Column filtering takes too many steps. Need simple contains filter in header.

[Ray]

I'm having trouble configuring the following:

Currently if the filter is turned on the user has to click the filter icon to show the filter options.  I just need a "contains" filter but I would like the search box to appear by default( without having to click the filter icon).  I'm hoping there's a configuration to make it appear below the header text.  I also would like the contains filter to fire automatically after the user hits enter.

This seems pretty simple but I'm still having trouble finding the documentation.  I'm using the html configurations in set up.

[Alexander Valchev]

Hi Ray,

The functionality that you are looking for is not provided out of the box but the developer should be able to implement it using the build-in templates/API of the widget.

In order to support such scenario you should:

1. Use columns.headerTemplate to include an input (search box) inside the column header
2. Hook up to the change event (or enter key press) of the aforementioned input right after Grid initialization script.
3. Use the Grid's DataSource filter method to filter the data.

I hope this information will help.

Regards,
Alexander Valchev
Telerik

 

 

[Ray]

I'm having one major issue with adding the text box to the headerTemplate.  I currently have column sorting turned on... and when the user clicks on my column text box it will interpret that as a column sort.

currently headerTemplate adds your html inside an anchor tag... I also tried manually appending the text field after the anchor tag with jquery. append(..) and am still it's still having the same "sort" issue.

Is there any way around this?

[Alexander Valchev]

Hi Ray,

I suggest hooking up to the click event of the input and preventing its propagation. Please check the following example:

• http://jsbin.com/tayuw/2/edit

Regards,
Alexander Valchev
Telerik

 

 

[Ray]

Thank you.  worked great!