How to render custom filter within filter row?

[SugoiParticipant]

Hi all,

I have a regular grid with filtering row. Now I have added a custom column which uses a object datatype.
For this custom column I would like to add a custom filter which can handle the object.

I can not seem to find any help on this in either the examples, docs or google.

Anyone have an idea on how to implement this?
Or does anyone know of a document that explains how to accomplish this?

[Peter StoevKeymaster]

Hi Sugoi,

There is no such document, because at present it is not possible to create a custom filter.

Best Regards,
Peter Stoev

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

[SugoiParticipant]

Thank you very much for your quick response.
I’m glad to have a clear answer on this.

Is there currently any plan to support this in the future?

[Peter StoevKeymaster]

Hi Sugoi,

I will add a work item about that missing feature. However, that would probably be considered when we discuss our Roadmap for Q3 2014.

Best Regards,
Peter Stoev

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

[RedantJParticipant]

Was this implemented?

My requirements are to have a combobox on the filterrow.

If not, is a work-around possible? Such as building a custom filterrow using jqxPanel?

[RedantJParticipant]

I just realized that a work-around solution is possible. There is a search function used here that works the similar to a filter. I’m going to see if I can make something that looks like a filter row, using the toolbar and combobox.

[RedantJParticipant]

This absolutely does work.

When the source is prepared, remove the filter:

	var source =
	{
		datatype: "json",
		datafields: [
		{ name: 'ID', type: 'string'},
		{ name: 'foo1', type: 'string'},
		{ name: 'foo2', type: 'string'},
		{ name: 'foo3', type: 'string'}
		],
		cache: false,
		url: './data/data.asp',
//		filter: function()
//		{
//			
//			// update the grid and send a request to the server.
//			$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
//		},
		root: 'Rows',
		beforeprocessing: function(data)
		{		
			if (data != null)
			{
				// Get the total number of records
				source.totalrecords = data[0].TotalRows;
			}
		}
	};

Add the filter with the Data Adapter:

	var dataadapter = new $.jqx.dataAdapter(source, {
// Add "formatData"
		formatData: function (data) {
			data.foo1_startsWith = $("#searchField").val();
			return data;
		},
		loadError: function(xhr, status, error)
		{
			alert(error);
		}
	});

Then you can design your filter bar using any input method you wish. In this case, the combobox:

	rendertoolbar: function (toolbar) {
		var me = this;
		var container = $("<div style='margin: 5px;'></div>");
		var input = $("<div id='searchField' />");
		toolbar.append(container);
		container.append(input);
		input.addClass('jqx-widget-content-theme');
		input.addClass('jqx-rc-all-theme');
		var oldVal = "";
		input.jqxComboBox({
			source: ['Item 1', 'Item 2', 'Item 3'],
			width: 200,
			height: 23
		});
		input.on('keydown', function (event) {
			if (input.val().length >= 2) {
				if (me.timer) {
					clearTimeout(me.timer);
				}
				if (oldVal != input.val()) {
					me.timer = setTimeout(function () {
						$("#jqxgrid").jqxGrid('updatebounddata');
					}, 1000);
					oldVal = input.val();
				}
			}
			else {
				$("#jqxgrid").jqxGrid('updatebounddata');
			}
		});
	}

Add as many input fields as required and write your server code accordingly.
In this case, when “Inspect Element” is selected, foo1_startsWith will show up on the Query string parameters.

It is a lot of code to write, especially if you want to put in more than one filter, which is why there is a filterrow feature in jqxGrid to begin with. This works if you want to program your own filterrow.

[Author]

Posts