New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Events

You can subscribe to the Change Filter event and further customize the functionality of the component.

Handling Events by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Razor
    @(Html.Kendo().Filter<Kendo.Mvc.Examples.Models.Sushi>()
        .Name("filter")
        .MainLogic(FilterCompositionLogicalOperator.Or)
        .ApplyButton()
        .ExpressionPreview()
        .Fields(f =>
        {
            f.Add(p => p.name).Label("Name");
            f.Add(p => p.price).Label("Price");
            f.Add(p => p.description).Label("Description");
        })
        .FilterExpression(f =>
        {
            f.Add(p => p.price).IsGreaterThanOrEqualTo(5);
            f.Add(p => p.name).Contains("Salad");
        })
        .Events(e => e.Change("onChange"))
        .DataSource("dataSource1")
    )

    <script>
        function onChange(){
            console.log("change");
        }
    </script>

Handling Events by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Razor
    @(Html.Kendo().Filter<Kendo.Mvc.Examples.Models.Sushi>()
        .Name("filter")
        .MainLogic(FilterCompositionLogicalOperator.Or)
        .ApplyButton()
        .ExpressionPreview()
        .Fields(f =>
        {
            f.Add(p => p.name).Label("Name");
            f.Add(p => p.price).Label("Price");
            f.Add(p => p.description).Label("Description");
        })
        .FilterExpression(f =>
        {
            f.Add(p => p.price).IsGreaterThanOrEqualTo(5);
            f.Add(p => p.name).Contains("Salad");
        })
        .Events(e => e.Change(@<text>
             function(){
                 // Handle the change event inline.
             }
            </text>))
        .DataSource("dataSource1")
    )

See Also