Complete Custom Filtering Example

[Reid]

Are there any links or code examples that the community could share that shows how to write totally custom column filters?

Better yet, add more content to the bottom of the existing filtering?  Grids in this application contain a custom table above the grid with columns that contain list boxes where the user can select one or more items (check boxes)?

Please see attached.

[Konstantin Dikov]

Hi Reid,

Although that we do not have such example, you could take a look at the following dojo example, where the Grid is filtered with an external input element, using the "filter" method of the DataSource:

• http://dojo.telerik.com/oQoVulIl/4

More complex scenarios and multiple components in the external filter could still use the same approach by creating complex filter expression with nested filters.


Regards,
Konstantin Dikov
Progress Telerik

[Reid]

Hi Konstantin,

Thanks for that link but that approach is really the same as the external source that is use by our templates already (in the screen shot).  Too bad Kendo does not not support a template for that reason.  So we can have a custom row template, custom header template, etc.  Why not a custom Filter template?

[Konstantin Dikov]

Hi Reid,

The Grid provides option for customizing the filter cells:

columns.Bound(p => p.UnitsInStock).Width(100).Filterable(f=>f.Cell(c=>c.Template("myFilterCellTemplate")));

Detail information on the filter templates could be found in the following help topics for the jQuery widget, applicable for the Core wrapper as well:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.cell#columns.filterable.cell.template 
• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.ui

Regards,
Konstantin Dikov
Progress Telerik

[Reid]

Thank you for this.  I will take a look at the links.

[Reid]

I just realized that that is a JavaScript approach.  I am using .NET Core MVC.  Are there any links showing an example of that?

[Konstantin Dikov]

Hi Reid,

We have online for customizing the filter with Menu filter mode:

• https://demos.telerik.com/aspnet-core/grid/filter-menu-customization

For the "Row" mode you could use the "Filterable.Cell.Template", which could be set as shown in my last post. For the JavaScript handler used for initializing the custom filter you could refer to the jQuery documentation (which is applicable for the Core wrapper).


Regards,
Konstantin Dikov
Progress Telerik

[Reid]

I marked that as the answer, thank you but actually I look forward to a solution where we can create a custom temp;ate for each column with custom content.  There are all sorts of templates that can be used (row, column, header etc.) but no Filter Template.

[Konstantin Dikov]

Hello Reid,

Although that there is no "script" template option for the filtering of each column, using functions for the filter templates for each column allows creating entirely custom HTML. It is not a straight forward solution as the script templates, but it gives the same freedom for creating complex HTML for the filtering (with JavaScript or jQuery).


Regards,
Konstantin Dikov
Progress Telerik

[Chris]

Also, looking for documentation on just the tag helpers for .net core for filtering for example.  in the intellisense it has a huge amount of options, but I can't find that in the documentation.  Where exactly is the reference for all of the options?  If you goto the docs and support link at the top of this page, it doesn't bring you any documentation whatsoever.  filtering just has a paragraph.  Not sure, where all the information is??

 

 

[Konstantin Dikov]

Hello Chris,

You could refer to the following help topic for the filterable column options:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable

We are currently working on the MVC API reference, but the API reference of the Kendo UI Grid could be used as well, since the Grid for ASP.NET Core is a wrapper of the Kendo UI Grid.


Regards,
Konstantin Dikov
Progress Telerik