Equal to Filtering on date and time column is not working

1 Answer 120 Views
Date/Time Pickers FileManager Filter General Discussions Grid
Muzammil
Top achievements
Rank 1
Muzammil asked on 20 Aug 2021, 09:49 AM

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

1 Answer, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 24 Aug 2021, 03:41 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Muzammil
Top achievements
Rank 1
commented on 25 Aug 2021, 09:06 AM

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
Telerik team
commented on 25 Aug 2021, 07:43 PM

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.

Tags
Date/Time Pickers FileManager Filter General Discussions Grid
Asked by
Muzammil
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or