Filtering

[joshParticipant]

Hi Everyone,
I have three Grids in one page and I want to set a filter on top of the page such that the filter selected filters data on the three Grids accordingly.
I want to use this filter http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customfiltering.htm?arctic
How is that possible?
Regards,
Josh

[DimitarParticipant]

Hello Josh,

I understand you would like to filter the three grids through a single filter panel. If so, you only need a slight modification of the applyFilter function from the demo, to include the second and third grids:

var applyFilter = function (datafield) {
    $("#jqxgrid").jqxGrid('clearfilters');
    $("#jqxgrid2").jqxGrid('clearfilters');
    $("#jqxgrid3").jqxGrid('clearfilters');
    var filtertype = 'stringfilter';
    if (datafield == 'date') filtertype = 'datefilter';
    if (datafield == 'price' || datafield == 'quantity') filtertype = 'numericfilter';

    var filtergroup = new $.jqx.filter();
    var checkedItems = $("#filterbox").jqxListBox('getCheckedItems');
    if (checkedItems.length == 0) {
        var filter_or_operator = 1;
        var filtervalue = "Empty";
        var filtercondition = 'equal';
        var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter);
    }
    else {
        for (var i = 0; i < checkedItems.length; i++) {
            var filter_or_operator = 1;
            var filtervalue = checkedItems[i].label;
            var filtercondition = 'equal';
            var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
            filtergroup.addfilter(filter_or_operator, filter);
        }
    }

    // add the filters.
    $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
    $("#jqxgrid2").jqxGrid('addfilter', datafield, filtergroup);
    $("#jqxgrid3").jqxGrid('addfilter', datafield, filtergroup);
    // apply the filters.
    $("#jqxgrid").jqxGrid('applyfilters');
    $("#jqxgrid2").jqxGrid('applyfilters');
    $("#jqxgrid3").jqxGrid('applyfilters');
}

Best Regards,
Dimitar

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

[joshParticipant]

Thanks Dimitar

[joshParticipant]

Hi dimitar,
It seemed not to work with me,
I have already conditional filtering and wants to add custom filtering as this http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customfiltering.htm?arctic
I have pasted my code on pastebin
please have a look at it here http://pastebin.com/wjMrCE8x

[DimitarParticipant]

Hi josh,

You have misunderstood me. You do not need three applyFilter functions, but only one, which calls the methods of the three grids, as shown in the code snippet I posted.

Best Regards,
Dimitar

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

[joshParticipant]

Hi Dimitar,
Thank you for your answer
My problem is sdding the other two data sources:

var updateFilterBox = function (datafield) {
                var filterBoxAdapter = new $.jqx.dataAdapter(source,
                {
                    uniqueDataFields: [datafield],
                    autoBind: true

I have source2 and source3.how do i add this?
I tried

var updateFilterBox = function (datafield) {
                var filterBoxAdapter = new $.jqx.dataAdapter(source,source2,source3 
                {
                    uniqueDataFields: [datafield],
                    autoBind: true

but dint work
Regards

[joshParticipant]

Hi,
did anybody find a solution on my problem above?
Dimitar did you look at it

[joshParticipant]

Hi Everyone,
Thank you for your answer
My problem is sdding the other two data sources:

var updateFilterBox = function (datafield) {
                var filterBoxAdapter = new $.jqx.dataAdapter(source,
                {
                    uniqueDataFields: [datafield],
                    autoBind: true

I have source2 and source3.how do i add this?
I tried

var updateFilterBox = function (datafield) {
                var filterBoxAdapter = new $.jqx.dataAdapter(source,source2,source3 
                {
                    uniqueDataFields: [datafield],
                    autoBind: true

but dint work
Regards

[joshParticipant]

Hi
anyone to give me a quick help on the above please!!

[DimitarParticipant]

Hi josh,

Here is a suggestion:

var updateFilterBox = function (datafield) {
    var filterBoxAdapter = new $.jqx.dataAdapter(source,
    {
        uniqueDataFields: [datafield],
        autoBind: true
    });
    var filterBoxAdapter2 = new $.jqx.dataAdapter(source2,
    {
        uniqueDataFields: [datafield],
        autoBind: true
    });
    var filterBoxAdapter3 = new $.jqx.dataAdapter(source3,
    {
        uniqueDataFields: [datafield],
        autoBind: true
    });
    var uniqueRecords = filterBoxAdapter.records;
    uniqueRecords = uniqueRecords.concat(filterBoxAdapter2.records);
    uniqueRecords = uniqueRecords.concat(filterBoxAdapter3.records);
    uniqueRecords.splice(0, 0, '(Select All)');
    $("#filterbox").jqxListBox({ source: uniqueRecords, displayMember: datafield });
    $("#filterbox").jqxListBox('checkAll');
}

Best Regards,
Dimitar

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

[joshParticipant]

Hi Dimitar,
another glitch arises when setting the data source,
tried this but dint work,

create buttons, listbox and the columns chooser dropdownlist.
            $("#applyfilter").jqxButton({ theme: theme });
            $("#clearfilter").jqxButton({ theme: theme });
            $("#filterbox").jqxListBox({ checkboxes: true,  width: 200, height: 250 });
            $("#columnchooser").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0,  width: 200, height: 25,
                source: [{ label: 'Evidence', value: 'evidence' },
                ]
                source2: [{ label: 'Evidence', value: 'evidence' },
                ]
                source3: [{ label: 'Evidence', value: 'evidence' },
                ]
                source4: [{ label: 'Evidence', value: 'evidence' },
                  
                ]
            });

[DimitarParticipant]

Hi josh,

Each dropdownlist can have only one source property. Please refer to the jqxDropDownList Getting Started tutorial for the basics of initializing this widget.

Best Regards,
Dimitar

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

[Author]

Posts