Filterable Date Range

[Craig]

Hi there,
I am trying to figure out how to create a filter based on a Date Range with the Kendo Grid?
I can't seem to find an example of this so I was hoping somebody might be able to help me.

Thanks in Advance

[Craig]

Oops I was able to figure this out after some digging around. Thanks!

[Jackelin España]

Like your solves? example please.

[Bharat]

How can I Create a date range filter on one column and "Starts with" , "Is equal to" filter on another column for the same Grid in RAZOR

[Kiril Nikolov]

Hi Bharat,

If I understand you correctly you would like to customize the filter menu in the Kendo UI Grid. If this is the case then I suggest you to check the following demo that shows how to create separate filter for each column:

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

In case you have any further questions, then please open a separate support request with some more detailed information and we will be happy to help.

Regards,
Kiril Nikolov
Telerik

 

 

[Bharat]

Thanks for the reply Kiril.  This is not what I meant. As you can see in this code I have done  .Extra(true)
. This gives me two set of filters on  column Name. First filter (Starts with)  AND/OR second filter (Starts with) (name starts with a AND starts with b)   here I want only one set of filter. This can be archived by making .Extra(False). Good so far. But the problem is when on the same grid I put filter on the date column.  .Extra(false) will also take away second set of filter from the date column where as in date column I want two set of filter to select the date range (Date after ....  and... date Before ...)



 .Refresh(true))
                                            .Filterable(filterable => filterable
                                            .Extra(true)
                                                    .Operators(operators => operators
                                                    .ForString(str => str.Clear()
                                                    .StartsWith("Starts with")
                                                    .IsEqualTo("Is equal to")
                                                    .IsNotEqualTo("Is not equal to")
                                                    ))
                                            )
                                         .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(15)
                                    .ServerOperation(false)
                                    .Read(read => read.Action("Shipment_Read_nw", "Home")))
                                    )

[Kiril Nikolov]

Hi Bharat,

You can use the filterMenuInit event, where you can detect the column field for the date column and manipulate the filters there. Like for example:

http://dojo.telerik.com/AGUxa

If this does not resolve the issue, then please edit the provided example in order for us to better understand the problem.

Regards,
Kiril Nikolov
Telerik

 

 

[Sam]

For your date example at:

http://dojo.telerik.com/AGUxa

If you leave the first date textbox empty, fill in a date in the second textbox, and click the Filter button, it works as expected, showing all items before the specified date. But if you open the Filter popup again, it puts the date you entered into the FIRST textbox instead of into the second one. Is there a way to fix this?

Thanks.

[Tsvetina]

Hello Sam,

This would not be possible with the built-in filter, as it just applies the existing expression and in the case that you describe, the expression is "BirthDate is less than someValue".

You can achieve your requirement by creating custom content for the filter menu in the filterMenuInit event. One possible way is shown in the following Dojo:
http://dojo.telerik.com/@tsveti/UNijO/22

Regards,
Tsvetina
Progress Telerik

[Can]

Hello Tsvetina,

I think there is a bug in the following Dojo which you've shared:
http://dojo.telerik.com/@tsveti/UNijO/22

I attached a screenshot pictures which describes the problem. If you follow the steps in that file, you will encounter a problem at the last step.

When i want to get some data before a specific date, the all data disappears. Then, if i click the filter button again, the date that i entered shifted up.

I think the filter operator applies some default procedure when extra filter area (second date filter having "lte" operator) is applied.
How can we overcome this issue?
Thanks in advance.

[Alex Hajigeorgieva]

Hello, Can,

The Dojo uses random generated data so it is not possible to reproduce the described behaviour.  I have added some hard coded data  and used the steps you provided in an attempt to reproduce it but it seems to work well. Perhaps because the example does not have a Filter button:

https://dojo.telerik.com/@bubblemaster/aromudeR

Having said that, the behaviour is expected when using the built-in menu because it loops the filter array to populate its options. If filter[0] is no longer available, it would move filter[1] up as it does in the built in filterable option:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/filterable

Can you check the provided updated example and let me know if you can reproduce it there and with what steps?

Regards,
Alex Hajigeorgieva
Progress Telerik

[Can]

Hello Alex,

this solution works fine. Thanks a lot!