Virtual Model Default Filter

[jeffoParticipant]

How can I apply a default filter to a grid using virtual mode?

I am using datatype: ‘json’ to fetch data from an oDate WebAPi method. The grid is loading fine WITHOUT an initial filter applied.

One of my columns (‘deleted’) is a checkbox column. I want to include a default filter such that only NOT deleted items are displayed, the checkbox in the filter row should be filled in with a checkmark to show there is a filter applied. The user can alter the filter by clicking on the filter header as normal.

Without an initial filter the data loads; the user can click the header, and the data is refreshed correctly from the server.

If I apply an initial filter using the following code…

        var jqxFilter = new $.jqx.filter();
        var isDeletedFilter = jqxFilter.createfilter('booleanfilter', false, 'EQUAL');
        jqxFilter.addfilter(1, isDeletedFilter);
        $element.jqxGrid('addfilter', 'Deleted', jqxFilter);
        $element.jqxGrid('applyfilters');

I received the following message:

Message: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

However if I apply the filter on bindingcomplete, the grid begins recursively querying the data from the server.

I would like to apply the filter BEFORE the grid first requests its data. With the UI reflecting the applied filter. Is this possible?

Thanks

[StanislavParticipant]

Hello jeffo,

Take a look at these topics, you might find something useful.
Topic 1
Topic 2

Best Regards,
Stanislav

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

[jeffoParticipant]

Thank you for the response, however for anyone who would like a direct answer as opposed to an easter egg hunt to find it, here is what I managed to get working…

var isFalseFilter = function(){
            var jqxFilter = new $.jqx.filter();
            var isFalseFilter = jqxFilter.createfilter('booleanfilter', false, 'EQUAL');
            jqxFilter.addfilter(1, isFalseFilter);
            return jqxFilter;
        }();

(Notice the extra ‘()’ after the function. The Filter must be returned as a function, hence the additional brackets that I missed for ages!

Then as per the documentation define the column (I define my columns in html and pass them in via a binding)…

{text:'Deleted', columntype:'checkbox', datafield:'Deleted', filtertype:'bool', filter:isFalseFilter}

Hope this saves someone some time.

[jpeszlenyParticipant]

This is perfect and exactly what I am looking for but I am facing an issue. When the filter is applied, it’s not applied to column properly. Check out this screenshot. You will notice that in the query string parameters there a few undefined’s. That’s where the datafield name is supposed to be. Any idea on what is going wrong?

Here’s the code that I am using:

   var errorFilter = function () {
        var jqxFilter = new $.jqx.filter();
        var filter = jqxFilter.createfilter('stringfilter', 'Error', 'EQUAL');
        jqxFilter.addfilter(0, filter);
        return jqxFilter;
    }();

    $("#grid1").jqxGrid({
        source: dataAdapter,
        width: '100%',
        pageable: true,
        autoheight: true,
        virtualmode: true,
        sorttogglestates: 1,
        filterable: true,
        sortable: true,
        altrows: true,
        theme: 'bootstrap',
        selectionmode: 'none',
        autorowheight: true,
        columnsresize: true,
        enablebrowserselection: true,
        rowsheight: 26,
        rendergridrows: function (args) {
            return args.data;
        },
        columns: [
            { text: 'Id', dataField: 'Id', hidden: true },
            { text: 'Application', dataField: 'Application' },
            { text: 'Logged', dataField: 'Logged', width: 150, columntype: 'date', filtertype: 'date' },
            { text: 'Level', dataField: 'Level', width: 50, filtertype: 'input', filter: errorFilter },
            { text: 'Message', dataField: 'Message', filtertype: 'input' },
            { text: 'User Name', dataField: 'UserName', filtertype: 'input' },
            { text: 'Server Name', dataField: 'ServerName', filtertype: 'input' },
            { text: 'Callsite', dataField: 'Callsite' },
            { text: 'Exception', dataField: 'Exception' }
        ]
    });

[HristoParticipant]

Hello jpeszleny,

I am not able to see the provided picture.
You could try to upload it on this web page: https://postimages.org/
If you provide us with more details it will be better to understand you well.
Could you provide a simplified example of the whole scenario?
How you binding to the database?

Also, I would like to suggest you look at this example, which could be helpful.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts