NestGrid not expanded

[sreeni379Member]

Hi,

I have nested grid my page, if  first page loading nested grid working fine click button,if click next time same button nested grid not opening .

Please can  you suggest to me .

Thanks

Sreeni

[Peter StoevKeymaster]

Hi Sreeni,

Please, take a look at the following sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm?classic. It demonstrates how to implement nested Grids.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sreeni379Member]

Hi Peter Stove,

I am sorry ,last time posted wrong code, this is my actual code for nested grid, Can check once what wrong in that code ,Can please help me .

This is code i written for nested Grid:
$(“#jqxgridPeripheralAdmin”).jqxGrid(
{
width: ‘100%’,
height: 206,
showdefaultloadelement: true,
source: dataAdapterForMainGrid,
theme: theme,
columnsresize: true,
pageable: true, altrows: true,
editable: true,
enablehover: false,
selectionmode: ‘none’,
enabletooltips: true,
filterable: true,
sortable: true,
//rendergridrows: function () { return dataAdapterForMainGrid.records; },
rowdetails: true,
autoshowfiltericon: true,
rowdetailstemplate: { rowdetails: “

“, autoheight: true, rowdetailshidden: true },
initrowdetails: function (index, parentElement, gridElement, record) {
var PeripheralIDValue = $(‘#jqxgridPeripheralAdmin’).jqxGrid(‘getcellvalue’, index, “PeripheralID”);
var DellPartNumberValue = $(‘#jqxgridPeripheralAdmin’).jqxGrid(‘getcellvalue’, index, “DellPartNumber”);
//debugger;
var val = row.DellPartNumber + “”;
var val1 = val.replace(//g, ”);
splitval = val1.split(”);
var lenght = splitval.length;
var i = lenght – 1;
if (i === 1) {
$(‘#jqxgridPeripheralAdmin’).jqxGrid(‘setrowheight’, index, 25);
}
else {
$(‘#jqxgridPeripheralAdmin’).jqxGrid(‘setrowheight’, index, 18 * i);
}
splitval = [];
grid = $($(parentElement).children()[0]);
grid.bind(‘bindingcomplete’, function (event) {
if (event.target.id == “grid” + index) {
grid.jqxGrid(‘beginupdate’);
var datainformation = grid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
grid.jqxGrid('setrowdetails', i, "

“, 220, hidden);
}
grid.jqxGrid(‘endupdate’);
}
});
//debugger;
$.ajax({
url: ‘../Peripheral/GetRegionalData’, cache: false, async: false, data: { PeripheralID: PeripheralIDValue },
success: function (data, status, xhr) {
var jqxGridForNestedGrid = {};
jqxGridForNestedGrid = data;
var ssourcenstedgrid = {
datafields: [{ name: ‘RegionName’ }, { name: ‘ChangeClass’ }, { name: ‘HiddenExternal’, type: ‘bool’ }, { name: ‘HiddenInternal’, type: ‘bool’ }, { name: ‘RTSDate’ }, { name: ‘FCSDate’ }, { name: ‘EOMLDate’ }, { name: ‘ReasonForChange’ }, { name: ‘TestOnly’ }, { name: ‘CustomerComments’ }, { name: ‘EditorComments’ }, { name: ‘CreatedDateTime’ }],
datatype: “array”,
localdata: jqxGridForNestedGrid
}
/*format dateTime*/
var dataAdapternstedgrid = new $.jqx.dataAdapter(FormatDateTime(ssourcenstedgrid));
if (grid != null) {
grid.jqxGrid({
source: dataAdapternstedgrid, theme: theme, width: 900, autoheight: true, rowdetails: true, enabletooltips: true, editable: false,
columns: [
{ text: ‘Regions’, datafield: ‘RegionName’, width: 180 },
{ text: ‘Change Class’, datafield: ‘ChangeClass’, columntype: ‘dropdownlist’, width: 130 },
{ text: ‘Reason For Change’, datafield: ‘ReasonForChange’, width: 150 },
{ text: ‘Hidden External’, datafield: ‘HiddenExternal’, columntype: ‘checkbox’, width: 130 },
{ text: ‘Hidden Internal’, datafield: ‘HiddenInternal’, columntype: ‘checkbox’, width: 130 },
{ text: ‘RTS Date’, datafield: ‘RTSDate’, width: 100 },
{ text: ‘FCS Date’, datafield: ‘FCSDate’, width: 100 },//sree
{ text: ‘EOL Date’, datafield: ‘EOMLDate’, width: 100 },
{ text: ‘Test Only’, datafield: ‘TestOnly’, columntype: ‘checkbox’, width: 80 },
{ text: ‘Customer Comments’, datafield: ‘CustomerComments’, width: 170 },
{ text: ‘Editor Comments’, datafield: ‘EditorComments’, width: 140 },
{ text: ‘Last Updated’, datafield: ‘CreatedDateTime’, width: 110 }
]
});
}
Gridrowidth();
}
});
},
columns: [
{
text: ”, datafield: ‘SelectAll’, filterable: false, sortable: false, columntype: ‘checkbox’, width: 40,
renderer: function () {
var value = CheckAndUncheck1stRenderer();
return value;
},
rendered: function (element) { SelectAllPaging(element, Maingrid); }
},
{
text: ‘MapPlatform’, datafield: ‘Edit’, columntype: ‘button’, cellsalign: ‘center’, width: 80, cellsrenderer: function () {
return “Platform”;
},
buttonclick: function (row) {
//debugger;
PeripheralID = $(“#jqxgridPeripheralAdmin”).jqxGrid(‘getcellvalue’, row, ‘PeripheralID’);
$(“#PlotNamePOP”).jqxWindow(‘show’);
PlotformDetail(PeripheralID);
// alert(row.PeripheralID +”Hi”);
}
},
{ text: ‘Status’, datafield: ‘FlagPartPresentStatus’, editable: false, width: 60, cellsrenderer: imagerenderer },
{ text: ‘PeripheralID’, editable: false, dataField: ‘PeripheralID’, hidden: true },
{ text: ‘GroupID’, editable: false, dataField: ‘GroupID’, hidden: true },
{ text: ‘Dell Part No.’, editable: false, dataField: ‘DellPartNumber’, cellsalign: ‘center’, width: 100 },
{ text: ‘UnGroupID’, editable: false, dataField: ‘UnGroupID’, width: 100, hidden: true },
{ text: ‘GroupID’, editable: false, dataField: ‘GroupID’, width: 100, hidden: true },
{ text: ‘Part Description’, editable: false, dataField: ‘PartDescription’, cellsalign: ‘center’, width: 141 },
{ text: ‘Peripheral Type’, editable: false, dataField: ‘PeripheralType’, width: 172 },
{
text: ‘Peripheral Sub Type ‘, editable: true, dataField: ‘PeripheralSubType’, columntype: ‘dropdownlist’, width: 170,
createeditor: function (row, cellvalue, editor) {
PeripheralTypeID = $(“#jqxgridPeripheralAdmin”).jqxGrid(‘getcellvalue’, row, ‘PeripheralType’);
var PeripheralsubtypeList = “”;
//debugger;
PeripheralsubtypeList = LoadPeripheralSubType(PeripheralTypeID);
editor.jqxDropDownList({ displayMember: ‘PeripheralSubType’, valueMember: ‘PeripheralSubTypeID’, source: PeripheralsubtypeList });
},
validation: function (row, value) {
if (value == “”) {
return { result: false, message: “PeripheralSubType is Required.” };
}

return true;
}

},
{
text: ‘Brand Name’, editable: true, dataField: ‘PeripheralBrandName’, width: 120,
validation: function (rowdetails, value) {
var PeripheralIDVal = “”;
PeripheralIDVal = $(“#jqxgridPeripheralAdmin”).jqxGrid(‘getcellvalue’, rowdetails.row, ‘PeripheralID’);
if (PeripheralIDVal != 0) {
if (value == “”) {
return { result: false, message: “Please enter PeripheralBrandName” };
}
else if (value.length >= 30) {
return { result: false, message: “PeripheralBrandName should below 30 characters only” };
}
return true;
}
return true;
}
},
{
text: ‘Internal Marketing Name’, editable: true, dataField: ‘InternalMarketingName’, width: 150,
validation: function (rowdetails, value) {
var PeripheralIDVal = “”;
PeripheralIDVal = $(“#jqxgridPeripheralAdmin”).jqxGrid(‘getcellvalue’, rowdetails.row, ‘PeripheralID’);
if (PeripheralIDVal != 0) {
if (value == “”) {
return { result: false, message: “Please enter InternalMarketingName” };
}
else if (value.length >= 30) {
return { result: false, message: “InternalMarketingName should below 30 characters only” };
}
return true;
}
return true;
}
},
{ text: ‘GSP’, editable: true, dataField: ‘GSP’, columntype: ‘checkbox’, width: 90 },
{ text: ‘Cust Kit’, editable: true, dataField: ‘CustKit’, columntype: ‘checkbox’, width: 90 },
//{ text: ‘Test Only’, editable: false, dataField: ‘TestOnly’, columntype: ‘checkbox’, width: 90 },
{ text: ‘Vendor’, editable: false, dataField: ‘Vendors’, cellsalign: ‘center’, width: 120 }
]
});

Thanks
Sreeni

[sreeni379Member]

Hi ,

Last week i posted nested grid problem still i dint get any response your side , i posted my code also,please find what wrong above code i posted. Please help me , it very urgent to me.
Thanks
Sreeni

[Author]

Posts