The following section explains steps to include native events and pass data to event handler in the DateRangePicker component.
You can access any native event by using on <event>
attribute with a component. The attribute’s value is treated as an event handler.
In the following example, the KeyPressed method is called every time the key is pressed on input.
@using Syncfusion.Blazor.Calendars
<SfDateRangePicker TValue="DateTime?" @onkeypress='@KeyPressed'></SfDateRangePicker>
@code {
public void KeyPressed(){
Console.WriteLine("Key Pressed!");
}
}
Also, you can rewrite the above example code as follows using Lambda expressions.
@using Syncfusion.Blazor.Calendars
<SfDateRangePicker TValue="DateTime?" @onkeypress="@(() => Console.WriteLine("Key Pressed!"))"></SfDateRangePicker>
Blazor provides set of argument types to map to native events. the list of event types and event arguments are:
In the following example, the KeyPressed method is called every time any key is pressed inside input. But the message will be printed when you press “5” key.
@using Syncfusion.Blazor.Calendars
<SfDateRangePicker TValue="DateTime?" @onkeypress='@(e => KeyPressed(e))'></SfDateRangePicker>
@code {
public void KeyPressed(KeyboardEventArgs args)
{
if (args.Key == "5")
{
Console.WriteLine("5 was pressed");
}
}
}
Using Lambda expression also, you can pass the event data to the event handler.
List of Native events | |||
---|---|---|---|
onclick | onblur | onfocus | onfocusout |
onmousemove | onmouseover | onmouseout | onmousedown |
ondblclick | onkeydown | onkeyup | onkeypress |
ontouchend | onfocusin | onmouseup | ontouchstart |