This is a migrated thread and some comments may be shown as answers.

Filterable Date Range

11 Answers 576 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Craig
Top achievements
Rank 1
Craig asked on 06 Feb 2013, 06:02 PM
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

11 Answers, 1 is accepted

Sort by
0
Craig
Top achievements
Rank 1
answered on 06 Feb 2013, 06:29 PM
Oops I was able to figure this out after some digging around. Thanks!
0
Jackelin España
Top achievements
Rank 1
answered on 06 Feb 2013, 10:33 PM
Like your solves? example please.
0
Bharat
Top achievements
Rank 1
answered on 01 Oct 2014, 10:03 PM
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
0
Kiril Nikolov
Telerik team
answered on 03 Oct 2014, 02:30 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bharat
Top achievements
Rank 1
answered on 06 Oct 2014, 07:47 PM
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")))
                                    )
0
Kiril Nikolov
Telerik team
answered on 08 Oct 2014, 08:30 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sam
Top achievements
Rank 1
answered on 07 Jun 2017, 01:16 PM

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.

0
Tsvetina
Telerik team
answered on 09 Jun 2017, 12:42 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Can
Top achievements
Rank 1
answered on 14 Oct 2019, 06:39 AM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 16 Oct 2019, 06:32 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Can
Top achievements
Rank 1
answered on 16 Oct 2019, 08:25 AM
Hello Alex,

this solution works fine. Thanks a lot!
Tags
Grid
Asked by
Craig
Top achievements
Rank 1
Answers by
Craig
Top achievements
Rank 1
Jackelin España
Top achievements
Rank 1
Bharat
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Sam
Top achievements
Rank 1
Tsvetina
Telerik team
Can
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or