Custom filters in remote filter scenario

[NoiZyParticipant]

I try to implement a custom filter in remote data source scenario, but I don’t get it to work ;(

I enabled filter row and filtering, and filter row filters are perfectly sendet to the server so that filters can be applied remotly.
But now I want to add a custom filter, take the examples on your site, but I don’t get it to work.

It’s simple, I have select box and want to send the chosen value with and “equal” to the server (And for sure each filter which is filled in the filter row).

My code to create the custom filter and apply it, is:

var applyFilter = function (type, name, value) {
	var filtergroup = new $.jqx.filter();
			
	var filtertype = type;
	var filtervalue = value;
	var filtercondition = 'equal';
			
			
	// add the filters.
	var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
	filtergroup.addfilter(0, filter);
	$("#jqxgrid").jqxGrid('addfilter', name, filtergroup);
	// apply the filters.
	$("#jqxgrid").jqxGrid('applyfilters');			
}

But in my Google Chrome Developer tools I see that request is fired against the remote service if I call:
$(“#jqxgrid”).jqxGrid(‘applyfilters’);

But my specified filter is not in that request.

My datasource for this grid is:

var messageSource =
		{
			datatype: "json",
			datafields:
			[
				{ name: 'mesgGuId', type: 'string' },
				{ name: 'mesgTimestamp', type: 'date'},
				{ name: 'senderGln', type: 'string' },
				{ name: 'receiverGln', type: 'string' },
				{ name: 'channelOwnerGln', type: 'string' },
				{ name: 'custBMSVersion', type: 'string' },
				{ name: 'mesgDocType', type: 'string' },
				{ name: 'mesgFileName', type: 'string' }
			],
			url: web_service_url + 'TrackTrace/Search',
			root: 'Rows',
			sortcolumn: 'mesgTimestamp',
            sortdirection: 'desc',
			filter: function () {                
                $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
            },
			sort: function () {                
                $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
            },
			pager: function (pagenum, pagesize, oldpagenum) {
				// callback called when a page or page size is changed.
			}
		};
		var messageAdapter = new $.jqx.dataAdapter(messageSource);

My grid is:

$("#jqxgrid").jqxGrid(
		{
			width: 1250,
			height: 550,
			source: messageAdapter,
			showfilterrow: true,
			sortable: true,
			filterable: true,
			theme: 'bootstrap',
			pageable: true,
			pagesizeoptions: ['10', '25', '50', '100'],
            autoheight: false,
			rowdetails: true,	
			virtualmode: true,
			initrowdetails: initrowdetails,
            rowdetailstemplate: { rowdetails: "<div id='transGrid' style='margin: 10px;'></div>", rowdetailshidden: true },
			rendergridrows: function (params) {				
				return params.data;
			},
			columns: [
			  ...
			]
		});

Hope you can help

Kind regards

[Peter StoevKeymaster]

Hi Noizy,

There is a similar sample here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?web
Also for formatting the Ajax parameters, see: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm

Best Regards,
Peter Stoev

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

[Author]

Posts