jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Virtual Model Default Filter
Tagged: filter, filtering, initial-filter, jqxGrid ;, virtual mode, virtualization
This topic contains 4 replies, has 4 voices, and was last updated by Hristo 6 years ago.
-
Author
-
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
Hello jeffo,
Take a look at these topics, you might find something useful.
Topic 1
Topic 2Best Regards,
StanislavjQWidgets Team
http://www.jqwidgets.com/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 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' } ] });
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 HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.