second level groupping and paging error

[u.gutierrezParticipant]

Hi,

We are having troubles using JqxGrid when paging and groupping are enabled. When the user makes a two level groupping, the grids renders the data wrong. Is it a bug or is there an additional configuration param that is missing?

<br />fotos imanes<br />

[StanislavParticipant]

Hello u.gutierrez,

We didn’t find an issue with our tests.
Can you please send us an example or a snippet, so we can test and reproduce the exact case.

Best Regards,
Stanislav

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

[u.gutierrezParticipant]

Hi,

Here you are an extract of my code:

var data = [];
var source =
{
localdata: this.data,
datafields:
[
{ name: ‘Edit’, type: ‘bool’ },
{ name: ‘Id’, type: ‘number’ },
{ name: ‘Code’, type: ‘string’ },
{ name: ‘Actions’, type: ‘string’ },
{ name: ‘PR_HineCode’, type: ‘number’ },
{ name: ‘Title’, type: ‘string’ },
{ name: ‘Sol_Status’, type: ‘string’ },
{ name: ‘MacroProjectTitle’, type: ‘string’ },
{ name: ‘MacroProjectUrl’, type: ‘string’ },
{ name: ‘OwnersNames’, type: ‘string’ },
{ name: ‘OwnersId’, type: ‘string’ },
{ name: ‘OwnersEmails’, type: ‘string’ },
{ name: ‘MembersNames’, type: ‘string’ },
{ name: ‘MembersId’, type: ‘string’ },
{ name: ‘MembersEmails’, type: ‘string’ },
{ name: ‘VisitorsNames’, type: ‘string’ },
{ name: ‘VisitorsId’, type: ‘string’ },
{ name: ‘VisitorsEmails’, type: ‘string’ },
{ name: ‘PR_StartDate’, type: ‘date’ },
{ name: ‘PR_EndDate’, type: ‘date’ },
{ name: ‘PR_Status’, type: ‘string’ },
{ name: ‘ProjectURL’, type: ‘string’ },
{ name: ‘PR_Size’, type: ‘string’ },
{ name: ‘Budget’, type: ‘number’ },
{ name: ‘PR_CostSaving’, type: ‘number’ },
{ name: ‘Risk’, type: ‘string’ },
{ name: ‘PR_Progress’, type: ‘number’ },
{ name: ‘PR_Criticality’, type: ‘string’ },
{ name: ‘PR_Priority’, type: ‘string’ },
{ name: ‘PR_ProjectType’, type: ‘string’ },
{ name: ‘PR_ExpectedEndDate’, type: ‘date’ },
{ name: ‘NotebookUrl’, type: ‘string’ },
{ name: ‘HineSitesFullText’, type: ‘string’ },
{ name: ‘PR_Department’, type: ‘string’ },
{ name: ‘Departments’, type: ‘string’ },
{ name: ‘Lean_x0020_targets’, type: ‘string’ },
{ name: ‘LeanTargets’, type: ‘string’ },
{ name: ‘CanEdit’, type: ‘bool’}

],
datatype: “array”
};

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

…

// Se inicializa el GRID
$(“#jqxgrid”).jqxGrid(
{
width: ‘3000’,
localization: getLocalization(),
autoheight: true,
source: dataAdapter,
autoloadstate: false,
filterable: true,
groupable: true,
sortable: true,
pageable: true,
autoshowfiltericon: true,
showdefaultloadelement: true,
autoshowloadelement: false,
columnsautoresize: true,
pagesize: 50,
enabletooltips: true,
showgroupaggregates: true,
showstatusbar: true,
showaggregates: true,
pagesizeoptions: [‘5′, ’10’, ’20’, ’50’, ‘100’],
columnsresize: true,
columnsreorder: true,
statusbarheight: 25,
ready: function () {
$(‘.closeLink’).click(function (e) {
e.preventDefault();
});
},
columns: [
{ text: ”, dataField: ‘Actions’, width: 25, cellclassname: cellclassname, cellsrenderer: actionitemcellsrenderer },
{ text: ‘Hine Sites’, datafield: ‘HineSitesFullText’, width: 150, cellclassname: cellclassname },
{ text: ‘Title’, datafield: ‘Title’, width: 300, cellsrenderer: gotoitemcellsrenderer, cellclassname: cellclassname },
{ text: ‘Code’, datafield: ‘PR_HineCode’, width: 50, cellclassname: cellclassname, cellsformat: ‘d’ },
{ text: ‘Macro-project’, datafield: ‘MacroProjectTitle’, width: 100, cellclassname: cellclassname, filtertype: ‘checkedlist’ },
{ text: ”, datafield: ‘ProjectURL’, width: 30, cellsrenderer: gotoprojectsiteellsrenderer, cellclassname: cellclassname },
{ text: ”, datafield: ‘NotebookUrl’, width: 30, cellsrenderer: opennotebookcteellsrenderer, cellclassname: cellclassname },
{ text: ‘Owners’, datafield: ‘OwnersNames’, width: 200, cellclassname: cellclassname },
{ text: ‘Members’, datafield: ‘MembersNames’, width: 200, cellclassname: cellclassname },
{ text: ‘Visitors’, datafield: ‘VisitorsNames’, width: 200, cellclassname: cellclassname },
{ text: ‘Size’, datafield: ‘PR_Size’, width: 100, cellclassname: cellclassname, filtertype: ‘checkedlist’ },
{ text: ‘Start Date’, datafield: ‘PR_StartDate’, width: 100, cellclassname: cellclassname, cellsformat: ‘dd/MM/yyyy’, filtertype: ‘date’ },
{ text: ‘Expected End Date’, datafield: ‘PR_ExpectedEndDate’, width: 100, cellclassname: cellexpectedenddateclassname, cellsformat: ‘dd/MM/yyyy’, filtertype: ‘date’ },
{ text: ‘End Date’, datafield: ‘PR_EndDate’, width: 100, cellclassname: cellclassname, cellsformat: ‘dd/MM/yyyy’, filtertype: ‘date’ },
{ text: ‘Project Status’, datafield: ‘PR_Status’, width: 100, cellclassname: cellclassname, filtertype: ‘checkedlist’ },
{ text: ‘Progress %’, datafield: ‘PR_Progress’, width: 100, cellclassname: cellclassname, cellsformat:’p’ },
{ text: ‘Criticality’, datafield: ‘PR_Criticality’, width: 100, cellclassname: cellclassname, filtertype: ‘checkedlist’ },
{ text: ‘Priority’, datafield: ‘PR_Priority’, width: 100, cellclassname: cellclassname, filtertype: ‘checkedlist’ },
{ text: ‘Project Type’, datafield: ‘PR_ProjectType’, width: 100, cellclassname: cellclassname, filtertype: ‘checkedlist’ },
{ text: ‘Budget’, datafield: ‘Budget’, width: 100, cellclassname: cellclassname, cellsformat: ‘F4’ },
{ text: ‘Cost Saving’, datafield: ‘PR_CostSaving’, width: 100, cellclassname: cellclassname, cellsformat: ‘F4’ },
{ text: ‘Risk’, datafield: ‘Risk’, width: 100, cellclassname: cellclassname, filtertype: ‘checkedlist’ },
{ text: ‘Departments’, datafield: ‘Departments’, width: 200, cellclassname: cellclassname },
{ text: ‘Lean Targets’, datafield: ‘LeanTargets’, width: 200, cellclassname: cellclassname }

]
});

…
var contextMenu = $(“#ProjectContextMenu”).jqxMenu({ width: 200, autoOpenPopup: false, mode: ‘popup’ });
$(“#jqxgrid”).on(‘contextmenu’, function () {
return false;
})

$(“#jqxgrid”).on(‘cellclick’, function (event) {
var args = event.args;
var rowIndex = args.rowindex;
CanEdit = true;
if (args.datafield == “Actions” && CanEdit) {

var row = $(‘#jqxgrid’).jqxGrid(‘getrowdatabyid’, rowIndex);

var source = [];

if (row.CanEdit) {
source.push({ label: ‘Edit’, value: row.Id });

if (row.PR_Status.toUpperCase() === ‘NOT STARTED’) {
source.push({ label: ‘Init’, value: row.Id });
}
if (row.PR_Status.toUpperCase() === ‘IN PROGRESS’) {
source.push({ label: ‘Advance’, value: row.Id });
}
if (row.PR_Status.toUpperCase() === ‘NOT STARTED’ || row.PR_Status.toUpperCase() === ‘IN PROGRESS’) {
source.push({ label: ‘Finish’, value: row.Id });
source.push({ label: ‘Stand By’, value: row.Id });
}
if (row.PR_Status.toUpperCase() === ‘STAND BY’ || row.PR_Status.toUpperCase() === ‘COMPLETED’) {
source.push({ label: ‘Return’, value: row.Id });
}

var contextMenu = $(“#ProjectContextMenu”).jqxMenu({ width: 200, source: source, autoOpenPopup: false, mode: ‘popup’ });

var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
return false;
} else {
$(“#ProjectContextMenu”).jqxMenu(‘close’)
}

} else {
$(“#ProjectContextMenu”).jqxMenu(‘close’)
}
});

$(“#ProjectContextMenu”).on(‘itemclick’, function (event) {
var args = event.args;
var selectedOption = $.trim($(args).text());
if (selectedOption == “Edit”) {
var rowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var row = $(‘#jqxgrid’).jqxGrid(‘getrowdatabyid’, rowindex);
openEditItemDialog(row.Id);
} else if (selectedOption == “Init”) {
doActionOnTasks(‘Init’);
} else if (selectedOption == “Finish”) {
doActionOnTasks(‘Finish’);
} else if (selectedOption == “Stand By”) {
doActionOnTasks(‘Stand By’);
} else if (selectedOption == “Return”) {
doActionOnTasks(‘Return’);
} else if (selectedOption == “Advance”) {
var rowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var row = $(‘#jqxgrid’).jqxGrid(‘getrowdatabyid’, rowindex);
$(“#inputPercentage”).val(row.PR_Progress.toString());
$(“#hiddenPercentagePreve”).val(row.PR_Progress.toString());
$(‘#WindowAdvance’).jqxWindow(‘open’);
}
});

[StanislavParticipant]

Hello u.gutierrez,

Your issue comes from the paging, if you disable it, you will see that it all works fine.
You have to be very careful when using paging and grouping together.

I hope this example is what you needed:
Link
Just group by First Name and Quantity, it will not duplicate the last row.

Best Regards,
Stanislav

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

[Author]

Posts