Getting Error for filterable property in multi-level grids

[Vardhman JainParticipant]

Hi ,

I am using jqxgrid for my application.As per our requirement ,we need to display two grids one below the other where the second grid appears on clicking a row from first(parent) grid.So, to acheive this, I have kept the two grids in two different div ,giving the grids, different ids(say #jqxgrid and #jqxgridOne).However,the second grid is getting loaded empty after clicking on row from parent grid. The error it throws is-
“cannot read property ‘length of undefined’ -jqx-filter.js line 98”.However,as I remove the filterable and show filterrow property from grid definition,it works fine.But,as per our requirement, I need to implement filter in both the rows.Can anyone please suggest solution for this issue.

[DimitarParticipant]

Hello Vardhman Jain,

We cannot identify what causes the issue you experience. However, please make sure you have implemented the nested grids functionality correctly, as shown in the following demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm?arctic and that you are using the latest version of jQWidgets (3.6.0).

Best Regards,
Dimitar

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

[Vardhman JainParticipant]

Hi Dimitar,

Thanks for your reply.I saw the above link but this functionality is not the one I am looking for.The above demo contains nested grids but the child grid appears within the parent grid itself in this example.However,what I need is completly new grid right below the parent grid which would appear after clicking a row from parent grid.The issue is that as the second grid doesnt load initially,so the code in filter.js doesnt get the proper value due to which it get error.So,can you please suggest any solution for this issue..

[stanleyjebaduraiParticipant]

Hi ,

I have a constrain ,for one column I need String filter like AND , OR , contains and another column I need excel filter . Kindly guide me how to proceed.

If I use filtermode: ‘excel’ all the column appended by checkbox filter here I’m not able to override one some column to String filter.

$(document).ready(function() {
var data = generatedata(500);
var source =
{
localdata: data,
datafields:
[
{name: ‘name’, type: ‘string’},
{name: ‘productname’, type: ‘string’},
{name: ‘available’, type: ‘bool’},
{name: ‘date’, type: ‘date’},
{name: ‘quantity’, type: ‘number’}
],
datatype: “array”
};

var addfilter = function() {
// create a filter group for the FirstName column.
var fnameFilterGroup = new $.jqx.filter();
fnameFilterGroup.operator = ‘or’;
// operator between the filters in the filter group. 1 is for OR. 0 is for AND.
var filter_or_operator = 1;
// create a string filter with ‘contains’ condition.
var filtervalue = ‘la’;
var filtercondition = ‘contains’;
var fnameFilter1 = fnameFilterGroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// create second filter.
filtervalue = ‘la’;
filtercondition = ‘starts_with’;
var fnameFilter2 = fnameFilterGroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// add the filters to the filter group.
fnameFilterGroup.addfilter(filter_or_operator, fnameFilter1);
fnameFilterGroup.addfilter(filter_or_operator, fnameFilter2);
// add the filter group to the ‘firstname’ column in the Grid.
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘name’, fnameFilterGroup);

//

// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}

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

$(“#jqxgrid”).jqxGrid(
{
width: 685,
source: dataAdapter,
ready: function() {
addfilter();
},
autoshowfiltericon: true,
filtermode: ‘excel’,
pagesize: 20,
pagesizeoptions: [’20’, ’50’, ‘100’],
//showfilterrow: true,
filterable: true,
sortable: true,
selectionmode: ‘multiplecellsextended’,
columns: [
{text: ‘Name’, filtertype: ‘textbox’, datafield: ‘name’, width: 115},
{
text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 220
},
{text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 67},
{text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘date’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’},
{text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘excel’, cellsformat: ‘c2’ ,cellsalign: ‘right’}
]
});

});

Thanks in advance

Regards,
Stanley

[DimitarParticipant]

Hello,

1) to Vardhman Jain’s query:
I understand you are referring to a Master-Details implementation. I suggest you apply your initial filter when you first click the master grid’s row to populate the details grid. Another possibility is to do so on the bindingcomplete event of the details grid but in that case, make sure you bind to the event after the details grid’s initialization.

2) to Stanley’s query:
The answer can be found in the following forum topic: http://www.jqwidgets.com/community/topic/combination-of-excel-style-filters-and-condition-in-same-grid/.

Best Regards,
Dimitar

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

[Author]

Posts