Cascaded Filter in JqxGrid

[nehaParticipant]

Hi,

I am using JQXWidgets3.8.2. I have used filtertype ‘checkedlist’ in jqxGrid.

e.g. Data is given below for grid:-
Country City (These are headers)
India Bombay
India Delhi
US NJ
US NY

When Country column is filtered to select only ‘India’, City column filter values should have only ‘Bombay’ and ‘Delhi’. ‘NJ’ and ‘NY’ should be removed from the filter values of City column.

But, City column filter values contains all the values of City column.

Also, after applying filter ‘India’ to Country column and, then, applying filter ‘NJ’ to City column, no records are shown in grid (that is ok), but some grid headers are not shown (shown as blank).

Please share the solution.

Thanks,
Neha

[VladimirParticipant]

Hello Neha,

Please take a look at this demo:
It has a checkedlist filtertype for the Product column, and as you can see it is working as described in your example.
Note that actual filtering is applied after you close the checked filter list.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[nehaParticipant]

Hi Vladimir,

Thanks for the quick reply.

The issue is not related to data population in grid according to filter applied. The issue is with data in Filtered checkedlist( in Select Filter Dropdown).
e.g Data is given below for grid:-
Country City (These are headers)
India Bombay
India Delhi
US NJ
US NY

When applied filter as ‘India‘ on Country column, Grid shows me 2 rows as given below:-

Country City (These are headers)
India Bombay
India Delhi

but, when i applied filter again on City column on this data , filter drop down shows four values (Bombay, delhi, NJ, NY). Filter drop down must show 2 values now (Bombay, Delhi).

Filter dropdown should shown/change values according to currently loaded data in grid.

But, Filter Dropdown is showing all the values (with all the values when the grid is loaded very first time).

I want to apply Excel like Auto Filter feature.

Thanks,
Neha

[VladimirParticipant]

Hello Neha,

Such filtering is possible but needs to be custom made.
Here is a demo on how it can be achieved.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[nehaParticipant]

Thanks Vladimir.

[nehaParticipant]

Hi,

In the cascade filtering, i have done the following code:-

$(“#grid”).on(‘filter’, function (){
var filterGroups = $(“#grid”).jqxGrid(‘getfilterinformation’);
var rows = $(‘#grid’).jqxGrid(‘getrows’);

var filterGroup = filterGroups[filterGroups.length-1];
if(filterGroup == undefined){

$(“#grid”).jqxGrid(‘clearfilters’);

}else{
if(filterGroup != null){
filter_column = filterGroup.filtercolumn;
alert(‘filter_column:’ + filter_column);

for (var j = 0; j < dataFieldsOfGrid.length; j++) {
var items = [];
if(filter_column == dataFieldsOfGrid[j].name){
continue;
}
for(var i = 0; i < rows.length; i++)
{
var row = rows[i];
var dataFieldName = dataFieldsOfGrid[j].name;
if(items != null){
var flag=1;
for(var m = 0; m < items.length; m++)
{
if(items[m] == row[dataFieldName]){ flag=0; break;}
}
}
if(flag == 1){
items.push(row[dataFieldName]);
}
}

$(“#grid”).jqxGrid(‘setcolumnproperty’, dataFieldsOfGrid[j].name, ‘filteritems’, items);
}
}
}
});

The code is working fine for cascade filtering (on suppose 4-5 columns). But filteritems in filter checkedlist may not remain correct if we clear filters from the filter dropdown by clciking on clear button(there are 2 buttond Filter and Clear in filter dropdown).

The column JSON is given below for my grid:-

{“text”:”Invest Style”,”pinned”:false,”hidden”:false,”width”:112,”filtertype”:”checkedlist”,”datafield”:”Invest_Style”},
{“text”:”Market Seg”,”pinned”:false,”hidden”:false,”width”:110,”filtertype”:”checkedlist”,”datafield”:”Market_Seg”},
{“text”:”Portfolio Code”,”pinned”:false,”hidden”:false,”width”:114,”filtertype”:”checkedlist”,”datafield”:”Portfolio_Code”},
{“text”:”Sri”,”pinned”:false,”hidden”:false,”width”:103,”filtertype”:”checkedlist”,”datafield”:”Sri”},
{“text”:”Style Category”,”pinned”:false,”hidden”:false,”width”:114,”filtertype”:”checkedlist”,”datafield”:”Style_Category”},
{“text”:”Tax Status”,”pinned”:false,”hidden”:false,”width”:110,”filtertype”:”checkedlist”,”datafield”:”Tax_Status”},
{“text”:”Type”,”pinned”:false,”hidden”:false,”width”:104,”filtertype”:”checkedlist”,”datafield”:”Type”},
{“text”:”Attribute”,”pinned”:false,”hidden”:false,”width”:109,”filtertype”:”checkedlist”,”datafield”:”Attribute”},
{“text”:”Value”,”pinned”:false,”hidden”:false,”width”:105,”filtertype”:””,”datafield”:”Value”}

and other data related grid is :–

$(“#grid”).jqxGrid(
{
theme: ‘energyblue’,
width: 98 + ‘%’,
height: 250,
filterable: true,
// sortable: true,
source: dataAdapter,
selectionmode: ‘multiplecellsadvanced’,
columnsresize: true,
columns: columnsOfGrid
}

I have also called ‘clearFilters’, but my problem is not resolved. Problem is, if we clear all the filters one by one, when last filter is cleared, its filter items are not getting reset. Is there any option to reset filter items?

Please provide the solution ASAP.

[nehaParticipant]

Also, if i used this code for last column (which filter has cleared):-
if(filterGroup == undefined){

$(‘#grid’).jqxGrid(‘removefilter’, filter_column, true);
rows = $(‘#grid’).jqxGrid(‘getrows’);

var items = [];

for(var i = 0; i < rows.length; i++)
{
var row = rows[i];
var dataFieldName = filter_column;
if(items != null){
var flag=1;
for(var m = 0; m < items.length; m++)
{
if(items[m] == row[dataFieldName]){ flag=0; break;}
}
}
if(flag == 1){
items.push(row[dataFieldName]);
}
}

$(“#grid”).jqxGrid(‘setcolumnproperty’, filter_column, ‘filteritems’, items);

}

The other columns, on which filter has not applied , filter items are not reset properly for them.

Thanks,
Neha

[nehaParticipant]

And, if i reset all the column’s filter items. Javascript error is thrown:-

Uncaught RangeError: Maximum call stack size exceeded

[DimitarParticipant]

Hello Neha,

Calling clearfilters on the filter event can lead to an “infinite loop”, because the method will trigger the filter event by itself.

Otherwise, each column’s filteritems should be reset to their default state with setcolumnproperty.

Best Regards,
Dimitar

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

[nehaParticipant]

Thanks for the reply Dimitar.

[afrathParticipant]

is it possible to do above logic in filtermode: ‘excel’, ?? if yes can you show me the demo?

[Peter StoevKeymaster]

Unfortunately, it is not possible.

[afrathParticipant]

I’m not sure whether I conveyed the requirement correctly. Here is what I was expecting in ‘Excel’ mode of filtering. The first image lists all values for city and country. The second image is the result of filtering the first three cities and the country column correctly shows only the countries from the result set. However, if I further want to filter the selected countries (like in excel), the control shows all values of countries instead of just the selected ones. This is the nature of filtering in Excel and is there any way by which I can implement this in your control? We work with large datasets and this sort of filtering would hugely help. Please let me know.

[afrathParticipant]

Any idea?

[Author]

Posts