This is a migrated thread and some comments may be shown as answers.

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

4 Answers 13 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ray
Top achievements
Rank 1
Ray asked on 27 Mar 2014, 10:50 PM
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.

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 31 Mar 2014, 07:49 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ray
Top achievements
Rank 1
answered on 01 Apr 2014, 10:46 PM
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?
0
Accepted
Alexander Valchev
Telerik team
answered on 02 Apr 2014, 08:27 AM
Hi Ray,

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


Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ray
Top achievements
Rank 1
answered on 07 Apr 2014, 08:00 PM
Thank you.  worked great! 
Tags
Grid
Asked by
Ray
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Ray
Top achievements
Rank 1
Share this question
or