Parent grid don´t show nested grid on filter

[mandreuParticipant]

Hello, I have a problem, I have a grid with a nested grid that works fine, but when I filter on the parent grid, it doesn´t show the nested grid, why this can happen?, any suggestion?. I think this can be related with binding complete event, but I´m not sure. Thanks in advance.

[StanislavParticipant]

Hello mandreu,

I did some testing with the information you provided us, but I didn’t find anything unusual in my test.
Can you please provide us with an example, fiddle or a snippet so we can have a better look at the issue you are experiencing?

Best Regards,
Stanislav

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

[mandreuParticipant]

Hello, I´m using version 4.1.1 I´ve get this code in my view:

//This is the function that create the nested grid
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
// llenar los cobros dependiendo del id.
var cobrosSource =
{
datafields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘no_cheque’, type: ‘string’ },
{ name: ‘no_factura’, type: ‘string’ },
{ name: ‘fecha’, type: ‘date’, format: ‘dd-MM-yyyy’},
{ name: ‘costo_mercancia_cuc’, type: ‘number’ },
{ name: ‘margen_importacion_cuc’, type: ‘number’ },
{ name: ‘margen_circulacion_cuc’, type: ‘number’ },
{ name: ‘otros_cuc’, type: ‘number’ },
{ name: ‘total_cuc’, type: ‘number’ },
{ name: ‘costo_mercancia_cup’, type: ‘number’ },
{ name: ‘margen_importacion_cup’, type: ‘number’ },
{ name: ‘margen_circulacion_cup’, type: ‘number’ },
{ name: ‘impuesto_venta’, type: ‘number’ },
{ name: ‘otros_cup’, type: ‘number’ },
{ name: ‘total_cup’, type: ‘number’ },
{ name: ‘mora_cuc’, type: ‘number’ },
{ name: ‘mora_cup’, type: ‘number’ }
],
data: {‘facturaid’: id},
formatdata: function (data) {
data.facturaid = id;
return data;
},
root: “Rows”,
// record: “Order”,
datatype: “json”,
type: ‘POST’,
url: ‘cargarcobrosxfactura’,
async: false
};
var nestedGridAdapter = new $.jqx.dataAdapter(cobrosSource);

if (grid != null) {
var cellsrendererNombre = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
var rowData = grid.jqxGrid(‘getrowdata’, row);
if(rowData) {
var val = rowData[‘no_cheque’];
if (val == “Total”)
return ‘<b>’ + value + ‘</b>’;
}
}

grid.on(‘bindingcomplete’, function(){
grid.jqxGrid(‘localizestrings’,localizationobj);
});

grid.jqxGrid({
width: ‘100%’,
scrollmode: ‘logical’,
theme: ‘customblue’,
source: nestedGridAdapter,
rendergridrows: function () {
return nestedGridAdapter.records;
},
autoheight: true,
columnsresize: true,
columns: [
{ text: ‘No doc.’, datafield: ‘no_cheque’, width: ‘8%’, cellsrenderer: cellsrendererNombre },
{ text: ‘Fecha doc.’, datafield: ‘fecha’, columntype: ‘datetimeinput’, cellsformat: ‘dd-MM-yyyy’, width: ‘8%’ },
{ text: ‘C merc. cuc’, datafield: ‘costo_mercancia_cuc’, width: ‘10%’ },
{ text: ‘M imp. cuc’, datafield: ‘margen_importacion_cuc’, width: ‘10%’ },
{ text: ‘M circ. cuc’, datafield: ‘margen_circulacion_cuc’, width: ‘10%’ },
{ text: ‘Otros cuc’, datafield: ‘otros_cuc’, width: ‘10%’ },
{ text: ‘Total cuc’, datafield: ‘total_cuc’, width: ‘10%’ },
{ text: ‘C merc. cup’, datafield: ‘costo_mercancia_cup’, width: ‘10%’ },
{ text: ‘Otros cup’, datafield: ‘otros_cup’, width: ‘10%’ },
{ text: ‘Total cup’, datafield: ‘total_cup’, width: ‘10%’ },
{ text: ‘Mora cuc’, datafield: ‘mora_cuc’, width: ‘10%’ },
{ text: ‘Mora cup’, datafield: ‘mora_cup’, width: ‘10%’ }
]
});
}
}

//This is the parent grid
$(“#jqxgrid”).jqxGrid({
height: 370,
width: ‘100%’,
scrollmode: ‘logical’,
source: dataAdapter,
rowdetails: true,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
ready: function()
{
flag_filter = true;
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
pageable: true,
showfilterrow: true,
filterable: true,
virtualmode: true,
rendergridrows: function () {
return dataAdapter.records;
},
pagermode: “simple”,
autoheight: true,
editable: edicion,
enablekeyboarddelete: false,
theme: ‘energyblue’,
selectionmode: ‘singlerow’,
columnsresize: true,
columns: [
{ text: ‘Id’, datafield: ‘id’, editable: false, hidden: true },
{ text: ‘No. factura’, datafield: ‘no_factura’, width: ‘8%’, align: ‘center’, pinned: true },
{ text: ‘Fact. ext.’, datafield: ‘no_factura_externa’, width: ‘8%’, align: ‘center’, pinned: true },
{ text: ‘Contrato’, datafield: ‘contrato’, width: ‘8%’, align: ‘center’, pinned: true },
{
text: ‘Fecha fact.’, datafield: ‘fecha’, filtertype: ‘range’, columntype: ‘datetimeinput’, width: ‘8%’,
align: ‘center’, cellsalign: ‘center’, cellsformat: ‘dd-MM-yyyy’, pinned: true
},
{
text: ‘Fecha pago’, datafield: ‘fecha_com_pago’, filtertype: ‘range’, columntype: ‘datetimeinput’, width: ‘8%’,
align: ‘center’, cellsalign: ‘center’, cellsformat: ‘dd-MM-yyyy’, pinned: true
},
{ text: ‘Cliente’, datafield: ‘cliente’, columntype: ‘combobox’, width: ‘12%’, align: ‘center’, pinned: true,
cellsalign: ‘left’, createeditor: function (row, cellvalue, editor, cellText, width, height) {
editor.jqxComboBox({ theme: ‘energyblue’, dropDownHeight: 150, placeHolder: ‘Seleccione’,
source: comboClientes(), displayMember: “codigo”, valueMember: “codigo”
});
}
},
{ text: ‘Proveedor’, datafield: ‘proveedor’, columntype: ‘combobox’, width: ‘12%’, align: ‘center’, pinned: true,
cellsalign: ‘left’, createeditor: function (row, cellvalue, editor, cellText, width, height) {
editor.jqxComboBox({ theme: ‘energyblue’, dropDownHeight: 150, placeHolder: ‘Seleccione’,
source: comboProveedores(), displayMember: “codigo”, valueMember: “codigo”
});
}
},
{ text: ‘Act.’, editable: false, datafield: ‘estado’, width: ‘4%’, align: ‘center’, pinned: true },
{ text: ‘CSM’, editable: false, datafield: ‘cobrada’, width: ‘0%’, hidden: true, align: ‘center’, pinned: true },
{ text: ‘C merc. cuc’, columntype: ‘numberinput’, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘costo_mercancia_cuc’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,
createeditor: createGridEditor, validation: noNegativo, cellsrenderer: cellsrenderer
},
{ text: ‘M imp. cuc’, columntype: ‘numberinput’, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘margen_importacion_cuc’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,
createeditor: createGridEditor, validation: noNegativo, cellsrenderer: cellsrenderer
},
{ text: ‘M circ. cuc’, columntype: ‘numberinput’, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘margen_circulacion_cuc’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,
createeditor: createGridEditor, validation: noNegativo, cellsrenderer: cellsrenderer
},
{ text: ‘Otros cuc’, columntype: ‘numberinput’, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘otros_cuc’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,
createeditor: createGridEditor, validation: noNegativo, cellsrenderer: cellsrenderer
},
{ text: ‘Total cuc’, editable: false, columntype: ‘numberinput’, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘total_cuc’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,

var formato = ‘D’;
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; font-weight: bold;”>’ + dataAdapter.formatNumber(value, formato, {thousandsseparator: ‘,’}) + ‘</span>’;
}
},
{ text: ‘C merc. cup’, columntype: ‘numberinput’, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘costo_mercancia_cup’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,
createeditor: createGridEditor, validation: noNegativo, cellsrenderer: cellsrenderer
},
{ text: ‘Otros cup’, columntype: ‘numberinput’, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘otros_cup’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,
createeditor: createGridEditor, validation: noNegativo, cellsrenderer: cellsrenderer
},
{ text: ‘Total cup’, editable: false, columntype: ‘numberinput’, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘total_cup’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,

cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {

var formato = ‘D’;
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; font-weight: bold;”>’ + dataAdapter.formatNumber(value, formato, {thousandsseparator: ‘,’}) + ‘</span>’;
}

},
{ text: ‘Mora cuc’, editable: false, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘mora_cuc’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,
cellsrenderer: cellsrenderer
},
{ text: ‘Mora cup’, editable: false, cellsformat: ‘d2’, filtertype: ‘none’, datafield: ‘mora_cup’, width: ‘8%’, align: ‘center’, cellsalign: ‘right’,
cellsrenderer: cellsrenderer
}
]
});

[Author]

Posts