jQuery UI Widgets Forums Grid Virtual Model Default Filter

This topic contains 4 replies, has 4 voices, and was last updated by  Hristo 1 year, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Virtual Model Default Filter #98517


    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);

    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?


    Virtual Model Default Filter #98527


    Hello jeffo,

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

    Best Regards,

    jQWidgets Team

    Virtual Model Default Filter #98546


    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.

    • This reply was modified 2 years, 1 month ago by  jeffo. Reason: dont seem to be able to use a lambda here. I thought I was tidying it up
    Virtual Model Default Filter #103991


    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;
            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' }
    • This reply was modified 1 year, 1 month ago by  jpeszleny.
    Virtual Model Default Filter #104059


    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.