Master – Child grid

[mallepaddiParticipant]

Hi

I have followed … http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?%28arctic%29#demos/jqxgrid/masterdetails.htm to generate my code for similar task ..

code attached below ..

var productGrid = “#orderproductsgrid”;
var cartGrid = “#cartgrid”;

// prepare the data
var source = {
datafields: [
{ name: ‘PoNo’, type: ‘string’ },
{ name: ‘OrderNo’, type: ‘string’ },
{ name: ‘PoDate’, type: ‘date’ },
{ name: ‘DeliveryDate’, type: ‘date’ },
{ name: ‘TotalValue’, type: ‘string’ },
{ name: ‘Status’, type: ‘string’ }
],
datatype: “json”,
url: ‘Last10Orders.json’,
id: ‘PoNo’
};

var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) {}
});

// initialize jqxGrid
$(“#last10ordersgrid”).jqxGrid({
width:650,
height:180,
source: dataAdapter,
theme: theme,
columns: [
{ text: ‘PoNo’, datafield: ‘PoNo’, width: 125 },
{ text: ‘OrderNo’, datafield: ‘OrderNo’, width: 125},
{ text: ‘PoDate’, datafield: ‘PoDate’, width: 100,cellsformat: ‘d’,},
{ text: ‘DeliveryDate’, datafield: ‘DeliveryDate’, width: 100,cellsformat: ‘d’,},
{ text: ‘TotalValue’, datafield: ‘TotalValue’, width: 100},
{ text: ‘Status’, datafield: ‘Status’}
]
});
$(‘#last10ordersgrid’).jqxGrid({ scrollbarsize: 7});

// Items Grid
// prepare the data
var dataFields = [
{ name: ‘PoNo’,type: ‘string’ },
{ name: ‘selected’,type: ‘bool’ },
{ name: ‘productcode’,type: ‘string’},
{ name: ‘description’,type: ‘string’},
{ name: ‘supplier’ ,type: ‘string’},
{ name: ‘price’ ,type: ‘string’},
{ name: ‘qty’ ,type: ‘string’},
{ name: ‘uom’,type: ‘string’ }
];

var source =
{
datafields: dataFields,
datatype: “json”,
url: ‘OrderProducts.json’,
id: ‘productcode’
};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();

$(“#last10ordersgrid”).on(‘rowselect’, function (event) {
var row = $(“#last10ordersgrid”).jqxGrid(‘getrowdata’, event.args.rowindex);
var PoNo = row.PoNo;
var records = new Array();
var length = dataAdapter.records.length;
for (var i = 0; i < length; i++) {
var record = dataAdapter.records[i];
if (record.PoNo == PoNo) {
records[records.length] = record;
}
}
var dataSource = {
datafields: dataFields,
localdata: records
}
var adapter = new $.jqx.dataAdapter(dataSource);

// update data source.
$(productGrid).jqxGrid({ source: adapter });
});

$(productGrid).jqxGrid({
width:'650',
height:230,
editable: true,
theme: theme,
selectionmode: 'none',
editmode: 'click',
keyboardnavigation: false,
columns: [
{ text: '', datafield: 'selected', menu: false, sortable: false, editable: true, columntype: 'checkbox', width: 10 ,
renderer: function () {
return '

‘;
}
},
{ text: ‘Code’, datafield: ‘productcode’, editable: false,width: 70,cellsrenderer:renderCell,},
{ text: ‘Description’, datafield: ‘description’, editable: false, width: 235,cellsrenderer:renderCell,},
{ text: ‘Supplier’, datafield: ‘supplier’, editable: false, width: 125,cellsrenderer:renderCell,},
{ text: ‘Price / Unit’, datafield: ‘price’, editable: false, width: 70, align: ‘left’, cellsalign: ‘right’,cellsrenderer:renderCell,},
{ text: ‘Qty’, datafield: ‘qty’, width: 70, editable: true, cellsalign: ‘right’, align: ‘center’, columntype: ‘numberinput’, /*cellclassname:’grey-cell’,*/ cellsrenderer:renderQtyCell,
initeditor: function(row, cellvalue, editor) {
},
createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0, digits: 4, inputMode: ‘simple’, /*max:1,*/ min: 0, theme: theme, spinButtonsWidth: 15, width: ’55px’, height: ’20px’, spinButtons: true, spinMode: ‘simple’ });
}
},
{ text: ‘UoM’, datafield: ‘uom’, columntype: ‘textbox’, editable: false,cellsrenderer:renderCell}
]
});

$(productGrid).jqxGrid({ scrollbarsize: 7});

$(“#last10ordersgrid”).jqxGrid(‘selectrow’, 0);

It doesn’t work as expected, the difference between my code and given example was …

example uses .. localdata, mine is “json”

Thanks

[Peter StoevKeymaster]

Hi mallepaddi,

There are some issues that I observer in the provided code.

1. It is not necessary to set “scrollbarsize” right after the Grid’s initialization. You can do that during the initialization.
2. Do not call methods/set properties while the Grid is initializing. You should do that in a “bindingcomplete” handler or in the Grid’s “ready” callback.
3. You use the same name “dataAdapter” instance for creating 2 completely different dataAdapters.
4. I suggest you to look at the Master-Details sample implementation again.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mallepaddiParticipant]

Hi

Thanks for your input.
1. It is not necessary to set “scrollbarsize” right after the Grid’s initialization. You can do that during the initialization.
removed — added : scrollbarsize: 7

2. Do not call methods/set properties while the Grid is initializing. You should do that in a “bindingcomplete” handler or in the Grid’s “ready” callback.
I don;t understand

3. You use the same name “dataAdapter” instance for creating 2 completely different dataAdapters.
It was like that even in given example.

Do we need to use “async : false” when using “json” in this example ?

Thanks

[Peter StoevKeymaster]

Hi mallepaddi,

The following code shows how to invoke a Grid method within its “ready” callback. It is important to invoke a method or set a property after the Grid is initialized, because when you load data through Ajax, you will actually try to perform an action on something which is not yet rendered and loaded.

$(“#last10ordersgrid”).jqxGrid({
width:650,
height:180,
source: dataAdapter,
 scrollbarsize: 7,
ready: function()
{
$(“#last10ordersgrid”).jqxGrid(‘selectrow’, 0);
},
theme: theme,
columns: [
{ text: 'PoNo', datafield: 'PoNo', width: 125 },
{ text: 'OrderNo', datafield: 'OrderNo', width: 125},
{ text: 'PoDate', datafield: 'PoDate', width: 100,cellsformat: 'd',},
{ text: 'DeliveryDate', datafield: 'DeliveryDate', width: 100,cellsformat: 'd',},
{ text: 'TotalValue', datafield: 'TotalValue', width: 100},
{ text: 'Status', datafield: 'Status'}
]
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mallepaddiParticipant]

Hi

Perfect, but small change … i have placed below code in child grid, if i put it in parent grid, row was selected but chaild shows no data, putting it in child grid works perfect.

ready: function()
{
$(“#last10ordersgrid”).jqxGrid(‘selectrow’, 0);
}

Many thanks ..

Thanks

[mallepaddiParticipant]

Hi

I was referring to http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?%28arctic%29#demos/jqxgrid/masterdetails.htm example for Master Detail grid.

I need your help on following …

1. Could you please let me know the use of “dataAdapter.dataBind();” statement, will that we used only when we are referring to localdata .. like “localdata: records” while creating “datasource” ??

2. I need your help in replacing “localdata” with “url” while generating “child” grid, how do we pass selected master id for generating “json” data for child grid ?

3. “dataAdapter.dataBind();” is it need for datatype: “json” ?

Thanks

[Peter StoevKeymaster]

Hi mallepaddi,

The dataBind method performs data binding. When the binding is completed, the dataAdapter will call its loadComplete callback function. If you want to learn how to use loadComplete, see the jqxDataAdapter’s help topic in the Docs. The “datatype” member is not important. It could be json, xml, tab, csv, jsonp or array. If you bind to local data, set the “localdata” member to point to your local data, otherwise set the “url” member of the source object.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts