Grid groupping with collapsible issue

[pranit@srcomsec]

We have applied groupping with grid & it is working.

We are getting below issues. Please advise.

1) Showing "undefined" in place of "Drag a column here to group by that column"
2) collapsible is open but not close when click on the arrow again
3) Grouping arrow & item count is not coming as you can see that issue in "P.Name" of attached screenshot

See the grid code & attached screenshot and advise.

Code: [Select]

function loadNetPosition(fiTableIndex, fsTableHeaders) {
var loColumns = [];
$.each(fsTableHeaders, function (i, item) {
loColumns.push(fsTableHeaders[i].dataIndx);
});

var lsBuyQtyLetter = pq.toLetter(fsTableHeaders.findIndex(x => x.dataIndx == "BuyQty"));
var lsBuyValueLetter = pq.toLetter(fsTableHeaders.findIndex(x => x.dataIndx == "BuyValue"));
var lsSellQtyLetter = pq.toLetter(fsTableHeaders.findIndex(x => x.dataIndx == "SellQty"));
var lsSellValueLetter = pq.toLetter(fsTableHeaders.findIndex(x => x.dataIndx == "SellValue"));
var lsNetQtyLetter = pq.toLetter(fsTableHeaders.findIndex(x => x.dataIndx == "NetQty"));
var lsNetValueLetter = pq.toLetter(fsTableHeaders.findIndex(x => x.dataIndx == "NetValue"));

var loGroupModel = {
on: false,
dataIndx: ['Exchange', 'Symbol', 'MWStrategyName'],
summaryInTitleRow: 'all',               
showSummary: [true], //to display summary at end of every group.
fixCols: false,
indent: 20,
collapsed: [true, true, true],
title: [
"{0} ({1})",
"{0} - {1}"
]
};

var obj =
{
width: "auto",
numberCell: { width: 60, show: false },
resizable: true,
filterModel: { on: true, header: false, type: 'local', menuIcon: true, hideRows: false },   //on: true,
menuIcon: true,
selectionModel: { type: 'row', mode: 'block', column: false },               
blur: function (evt, ui)
{
mGridUIFocus = ui; //global var
},
editable: false,
stripeRows: false,
showTitle: false,
hwrap: false,
wrap: false,
strNoRows: 'No Net Position found.',

pageModel: { rPP: 50 },
columnTemplate: {
filter: {
crules: [{ condition: 'contain' }]
}
},
colModel: fsTableHeaders,
groupModel: loGroupModel,
rowInit: function (ui)
{
if ($("#hfWorkSpaceBox" + fiTableIndex + "SMParameter").val() != "") {
var loStrategyMasterJS = $.parseJSON($("#hfWorkSpaceBox" + fiTableIndex + "SMParameter").val());
//console.log(loStrategyMasterJS);

if (loStrategyMasterJS.stTableBGColor != "" && loStrategyMasterJS.stTableBGColor != "null") {
return {
style: { "background": loStrategyMasterJS.stTableBGColor } //can also return attr (for attributes) and cls (for css classes) properties.
};
}
}
},
cellSave: function (evt, ui) {
this.refreshRow({ rowIndx: ui.rowIndx });
},

create: function () {
var lsParamQueryGridState = $("#hfParamQueryGridState" + fiTableIndex).val();
if (lsParamQueryGridState != "" && lsParamQueryGridState != "null")
$("#gridfilter" + fiTableIndex).pqGrid("loadState", { state: lsParamQueryGridState, refresh: false });
},
change: function () {
this.filter();
},
beforeCellClick: function(evt, ui){
if( !evt.ctrlKey && this.SelectRow().isSelected(ui)){
return false;
}
},

summaryData: [
{ summaryRow: true, pq_fn:{BuyQty:'sum(' + lsBuyQtyLetter + ':' + lsBuyQtyLetter + ')', BuyValue:'sum(' + lsBuyValueLetter + ':' + lsBuyValueLetter + ')', SellQty:'sum(' + lsSellQtyLetter + ':' + lsSellQtyLetter + ')', SellValue:'sum(' + lsSellValueLetter + ':' + lsSellValueLetter + ')', NetQty:'sum(' + lsNetQtyLetter + ':' + lsNetQtyLetter + ')', NetValue:'sum(' + lsNetValueLetter + ':' + lsNetValueLetter + ')' } },                   
],               
};

var loData = "";
obj.dataModel =
{
method: "GET",
location: "remote",
beforeSend: function (jqXHR, settings) {
jqXHR.setRequestHeader("Content-Type", "application/json");
},

getUrl: function () {
//alert("1a");
return {
url: "API URL",
data: loData
};
},

getData: function (response) {
var loOrderJS = $.parseJSON(response.d);
data = loOrderJS;   // loOrderJS.OrdersByFilter;
return { data: data }
},
error: function (jqXHR, textStatus, errorThrown) {
customalerterror('Error!', jqXHR.responseText, '500px');
}
};

var grid = pq.grid("#gridfilter" + fiTableIndex, obj);
grid.one('lazyProgress', function () {
this.flex();
});
}


[paramvir]

1. Please include the localization file.

2 & 3: Do you get any error in the browser console. Please share a small test case on jsfiddle so that I can look into it.

[pranit@srcomsec]

1) Thank you, it is working after adding the localization file.
2 & 3) No error in the console. We have DB driver data in the grid so challenging to create jsfiddle. Let me know if you have any suggestions.

I just thought that, the issue when "_" & number in the name. Let me know your thought.

One more question, how to remove the "sum: " keyword from the summary column? I just wanted to display numbers & highlight rows with a different colors.

[pranit@srcomsec]

Any advise regarding this?

[paramvir]

"_" & number are not supposed to be an issue. You can share small test case on jsfiddle by using local data instead of remote data.

Please use summaryTitle option:

Code: [Select]

summaryTitle: {sum: "{0}"},

https://paramquery.com/pro/api#option-summaryTitle

[pranit@srcomsec]

Thank you.

How to highlight different colors in the summary row?

[pranit@srcomsec]

Any advise regarding this?

[paramvir]

summary rows are styled similar to other rows in grid.

Example: https://paramquery.com/pro/demos/export_style