Author Topic: Grid groupping with collapsible issue  (Read 677 times)

pranit@srcomsec

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 99
    • View Profile
Grid groupping with collapsible issue
« on: February 02, 2023, 06:56:36 pm »
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();
});
}
« Last Edit: February 02, 2023, 08:47:26 pm by pranit@srcomsec »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Re: Grid groupping with collapsible issue
« Reply #1 on: February 03, 2023, 01:50:16 pm »
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

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 99
    • View Profile
Re: Grid groupping with collapsible issue
« Reply #2 on: February 03, 2023, 06:35:44 pm »
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

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 99
    • View Profile
Re: Grid groupping with collapsible issue
« Reply #3 on: February 06, 2023, 09:12:34 am »
Any advise regarding this?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Re: Grid groupping with collapsible issue
« Reply #4 on: February 06, 2023, 03:03:43 pm »
"_" & 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

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 99
    • View Profile
Re: Grid groupping with collapsible issue
« Reply #5 on: February 08, 2023, 07:40:05 pm »
Thank you.

How to highlight different colors in the summary row?

pranit@srcomsec

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 99
    • View Profile
Re: Grid groupping with collapsible issue
« Reply #6 on: February 14, 2023, 11:07:12 pm »
Any advise regarding this?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6309
    • View Profile
Re: Grid groupping with collapsible issue
« Reply #7 on: February 15, 2023, 09:00:13 pm »
summary rows are styled similar to other rows in grid.

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