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.
@(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>
<kendo-filter apply-button="true" expression-preview="true" main-logic="Or" name="filter" expression="InitialExpression" datasource-id="dataSource1" on-change="onChange">
<fields>
<filter-field name="name" type="string" label="Name">
</filter-field>
<filter-field name="price" type="number" label="Price">
</filter-field>
<filter-field name="description" type="string" label="Description">
</filter-field>
</fields>
</kendo-filter>
<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.
@(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")
)
<kendo-filter apply-button="true" expression-preview="true" main-logic="Or" name="filter" expression="InitialExpression" datasource-id="dataSource1"
on-change="
function(){
// Handle the change event inline.
}">
<fields>
<filter-field name="name" type="string" label="Name">
</filter-field>
<filter-field name="price" type="number" label="Price">
</filter-field>
<filter-field name="description" type="string" label="Description">
</filter-field>
</fields>
</kendo-filter>