Column filter for Time column

[Rodrigo]

Hi, i'm using a Grid with several columns. One of wich is displaying only Time part from a DateTime data type.

For this column, we are using .format("hh:mm:yyyy") to display the time part only.

The problem we're having is at time of filtering, the filter is requesting both Date and Time values to filter with a DateTimePicker widget. We'd like to filter the column the Time value only, by using a TimePicker widget.

Thank you.

[Rajapandi Ravi]

Hi Rodrigo, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to filter the time value only by using the TimePicker. You can render a TimePicker component in a filter menu for that particular column. To implement custom filter ui, define the following functions Create, Write and Read. So we suggest you to follow the below way to achieve your requirement. Please refer the below code example and documentation for more information. 

 

@{ 

    var filteruiTemplate = new 

    { 

        ui = new 

        { 

            create = "create", 

            write="write", 

            read="read" 

 

        } 

    }; 

} 

 

@Html.EJS().Grid("Grid").Columns(col=> { 

 

    .  .  .  .  .  .  .  . 

    col.Field("CustomerID").Filter(filteruiTemplate).HeaderText("Customer Name").Width("170").Add(); 

    .  .  .  .  .  .  .  .  

 

}).AllowPaging().AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Render() 

 

 

<script> 

     

                       function create(args) { 

                            //Creates custom component. 

                        }, 

                       function write(args) { 

                            //Wire events for custom component. 

                        }, 

                       function read(args) => { 

                         //Read the filter value from custom component.    

                        } 

</script> 

 

Render Custom component in FilterMenu(Javascript): https://ej2.syncfusion.com/javascript/documentation/grid/filtering/#custom-component-in-filter-menu 

TimePicker Documentation: https://ej2.syncfusion.com/javascript/documentation/timepicker/es5-getting-started/ 

Regards,
Rajapandi R