Equal to Filtering on date and time column is not working

[Muzammil]

Hi,

Im using kendo MVC version 2016.3.1118.545

I want to use equal to filter on date and time column for format {MM/dd/yyyy hh:mm tt} but its not working

I have seen few solution but its only for filtering date alone.

Please provide some solution for this

[Patrick | Technical Support Engineer, Senior]

Hi Muzammil,

One way in which you can set the Kendo UI Grid's filter is to transform the filter to specifically look at the beginning and end of a particular day.  We have a Kendo UI Knowledge Base article which additionally applies to the Telerik UI for ASP.NET MVC version mentioned.  

I have attached a sample which uses the approach in the mentioned in the Kendo UI Knowledge Base article.   

Regards,
Patrick
Progress Telerik

[Muzammil]

Hi Patrick,

Thank you for your solution. But i need to do filtration along with the time not by only date.

Is it possible to do the filtration along with time if yes, please share that solution with me.

Note : from server/db format of column is {0:MM/dd/yyyy hh:mm:ss tt} 

And on UI its format is {0:MM/dd/yyyy hh:mm tt}

[Patrick | Technical Support Engineer, Senior]

The filter for a date field of a Kendo UI Grid can be configured to allow a custom filter component in the newest version of UI for ASP.NET MVC as well as the previous version. 

In this case, you can utilize a Kendo UI DateTimePicker by setting the column's filterable.UI:

Grid

        @(Html.Kendo().Grid<GridExample.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy hh:mm tt}").Filterable(filter => filter.UI("dateTimePicker"));
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            //...
        )

Then, define how the filter will be implemented:

JavaScript

     function dateTimePicker(element) {
        element.kendoDateTimePicker({
            format: "MM/dd/yyyy hh:mm tt",
            parseFormats: ["MM/dd/yyyy hh:mm tt"],
        });
    }

For the previous example, remove the filterMenuInit event, and set the following to the Orders_Read() ActionResult for sample data:

GridController.cs

		public ActionResult Orders_Read([DataSourceRequest] DataSourceRequest request)
		{
			var result = new List<OrderViewModel>();
			result.Add(new OrderViewModel() { OrderID = 1, Freight = 10, OrderDate = new DateTime(2021, 8, 25, 3, 0, 0), ShipName = "ShipName 1", ShipCity = "ShipCity 1" });
			result.Add(new OrderViewModel() { OrderID = 2, Freight = 20, OrderDate = new DateTime(2021, 8, 25, 4, 55, 0), ShipName = "ShipName 2", ShipCity = "ShipCity 2" });
			result.Add(new OrderViewModel() { OrderID = 3, Freight = 30, OrderDate = new DateTime(2021, 8, 25, 14, 25, 0), ShipName = "ShipName 3", ShipCity = "ShipCity 3" });
			result.Add(new OrderViewModel() { OrderID = 4, Freight = 40, OrderDate = new DateTime(2021, 8, 25, 13, 30, 0), ShipName = "ShipName 4", ShipCity = "ShipCity 4" });
			result.Add(new OrderViewModel() { OrderID = 5, Freight = 50, OrderDate = new DateTime(2021, 8, 25, 9, 27, 0), ShipName = "ShipName 5", ShipCity = "ShipCity 5" });
			result.Add(new OrderViewModel() { OrderID = 6, Freight = 60, OrderDate = new DateTime(2021, 8, 25, 18, 7, 0), ShipName = "ShipName 6", ShipCity = "ShipCity 6" });

			return Json(result.ToDataSourceResult(request));
		}

Please let me know if you have any questions regarding the approach.