Filtering & Grouping in dhtmlxGrid having a rendering issue

Suite and Optimus Suite 5
#1

Hi Support/Members,

We have a issue in using the grouping and filtering in the grid with more than 50 rows. Any body came across such issue / implemented a solution with Grouping & Filtering please advice.

Thanks a lot in advance.
<<>>

<body onload="doOnLoad()">
<p>This type of filtering enables filtering operation for records currently rendered on the page.</p>
<div id="gridbox" style="width:600px; height:250px; background-color:white;"></div>

</body>

</html>

<>

#2

This issue occurs because of groupBy() method is incompatible with enableSmartRendering() method.
Also, it’s better to call groupBy() method after all rows are loaded:

mygrid.loadXML("../common/grid.xml",function(){ mygrid.groupBy(2); });

#3

Hi Olga,
Thanks for the prompt reply. We have actually a requirement to have our own text box for filtering rather than using the #text_filter. As our filter data is mixed case and want to have the control over the text box style, we want input text box as search filter box . Grouping is a mandatory requirement in addition to filtering for our solution. We are having performance issue even with 50 rows if used iteration based code for filtering.

-----Our filterBy method------------------------------------------
function filterBy() {
var tVal = document.getElementById(“vasdescTxt”).value.toLowerCase();
for(var i = 0; i < availVasGrid.getRowsNum(); i++) {
var tStr = availVasGrid.cells2(i,1).getValue().toString().toLowerCase();
if((tVal=="" || tStr.indexOf(tVal)!=-1) ) {
availVasGrid.setRowHidden(availVasGrid.getRowId(i),false);
} else {
availVasGrid.setRowHidden(availVasGrid.getRowId(i),true);
}
}
}

Thanks in advance.

#4

Instead of iteration you can call something like

grid.filterBy(column_index, filter_method);

docs.dhtmlx.com/doku.php?id=dhtm … tering_api
Which will work a lot faster

As for your existing way of filtering , it can be improved by using dhtmlxgrid_fast.js and code like

grid.startFastOperations();
filterBy(); //your existing filter by call
grid.stopFastOperations();