New to Telerik UI for ASP.NET Core? Download free 30-day trial

Custom Editor

The Filter provides the possibility to use custom editors for scenarios requiring the use of specific editor for certain types of data.

Implementing Custom Editors

To implement a custom editor you need to specify the .EditorTemplateHandler(), .EditorTemplateId() or .EditorTemplate() options of the Filter's Field configuration. The value of this field will point to the editor template that will be used by the Telerik UI for ASP.NET Core Filter to render the editor.

The following example demonstrates how to create a custom editor using the .EditorTemplateHandler() configuration option:

    @(Html.Kendo().Filter<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("filter")
        .ApplyButton(true)
        .DataSource("dataSource1")
        .Fields(f =>
        {
            f.Add(p=>p.ProductName).Label("Product Name");
            f.Add(p=>p.CategoryID).Label("Category").DefaultValue(1).EditorTemplateHandler("categoryDropDownEditor");
        })
    )
    <script>
        function categoryDropDownEditor(container, options) {
            $('<input data-bind="value: value" name="' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    dataTextField: "CategoryName",
                    dataValueField: "CategoryID",
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                        }
                    }
                });
        }
    </script>

See Also

In this article
Not finding the help you need? Improve this article