Using Search Box to Filter the Grid Data by Date
Environment
| Product | Telerik UI for ASP.NET Core Grid |
| Progress Telerik UI for ASP.NET Core version | 2022.1.119 |
Description
How can I filter the Grid's data by a DateTime field with the Search tool? It recognizes strings formatted like dates as integers, for example, 07/08/1996 is parsed as 07.
Solution
When the Grid is bound to a numeric field and the search input includes numbers the input is parsed as a number by default.
To change this behavior, configure the Schema.Model.Parse property of the Numeric field to use a JavaScript handler function. To prevent the parsing of the date as a number, look for special date symbols in the handler and return null if there are any.
Client Operations
For a runnable sample of the Client-side operations approach refer to this Telerik REPL.
.DataSource( dataSource => dataSource
.Custom()
...
.Schema(schema =>
{
schema.Model(model =>
{
model.Id(x => x.OrderID);
model.Field(p => p.Freight).Parse("parseFreight");
model.Field(p=>p.OrderDate);
model.Field(p => p.ShipName);
});
schema.Data("Data");
schema.Total("Total");
})
)
<script>
function parseFreight(val){
var s = val.toString();
if (s.indexOf("/") !== -1) {
return null;
}
return kendo.parseFloat(val);
}
</script>
Server Operations
For a runnable sample of the Server-side operations approach refer to this Telerik REPL.
.DataSource( dataSource => dataSource
.Custom()
...
.ServerFiltering(true)
.ServerPaging(true)
.Schema(schema =>
{
schema.Model(model =>
{
model.Id(x => x.OrderID);
model.Field(p => p.Freight).Parse("parseFreight");
model.Field<DateTime?>(p=>p.OrderDate);
model.Field(p => p.ShipName);
});
schema.Data("Data");
schema.Total("Total");
})
)
<script>
function parseFreight(val){
var s = val.toString();
if (s.indexOf("/") !== -1) {
return null;
}
return kendo.parseFloat(val);
}
</script>