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

Grid date filter for Equals operator

3 Answers 87 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Suresh
Top achievements
Rank 1
Veteran
Suresh asked on 28 Dec 2020, 10:18 PM

Hello , 

I'm trying to filter a grid column having DateTime value , for eg - 12/21/2020 12:01:47 PM . and below my implementation .

This works for the first time only and if we open the filter menu again, the filter operator shows as blank (It should have the operator as Equals) and upon selecting a new value from operator list ,it throws JS error at d.filters[0].operator as d.filters[0] is coming as undefined.

Grid filter settings-
.Events(x => x.FilterMenuInit("filterDateWithoutTimeTest"))

.Filterable(f => f.Operators(operators => operators.ForDate(dt => dt.Clear()
                                                        .IsEqualTo("Equals")
                                                        .IsLessThan("EarlierThan")
                                                        .IsGreaterThan("LaterThan")
                                                        )))

 

function filterDateWithoutTimeTest(e) {
        var grid = e.sender;
        if (e.sender.dataSource.options.schema.model.fields[e.field].type === "date") {
            e.preventDefault();
            var columnTobeFiltered = e.field;
            e.container.find('button[type="submit"]').click(function (e) {     
                var existingFilters = grid.dataSource.filter();
                var newFilter = [];               
                var filterType = $(this.form).find($("select[data-role=dropdownlist]")).eq(0).val();
                if (filterType == "eq") {
                   
                    //gets the datePicker input date
                    var selectedDate = $(this.form).find($("input[data-role=datepicker]")).eq(0).val();

                    //    //create a filter
                    grid.dataSource.filter({
                        field: columnTobeFiltered,
                        //create custom filter operator
                        operator: function (fieldDate) {
                            var fieldDate2 = new Date(fieldDate);
                            var parsedSelectedDate = kendo.parseDate(selectedDate);
                            //parse the field date in order to ignore the time
                            var parsedFieldDate = new Date(fieldDate2.getFullYear(), fieldDate2.getMonth(), fieldDate2.getDate());
                            var result = (parsedFieldDate.getTime() == parsedSelectedDate.getTime());

                            return result;

                        },
                        value: selectedDate
                    });

                    //close filter window
                    $(gridElement).find("th[data-field=" + columnTobeFiltered + "]").data("kendoFilterMenu").popup.close();
                }
            })
        }
    }

Any help around this is appreciated.

Thanks

3 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 30 Dec 2020, 09:30 AM

Hello Suresh,

If you would like to Filter a DateTime column by date only I suggest following the approach demonstrated in the following article:

Let me know if this helps.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Suresh
Top achievements
Rank 1
Veteran
answered on 04 Jan 2021, 02:50 PM

Thanks Nikolay !

This seems to be working  the first time only.

Running into the below issue when trying to filter again with Equals operator

Step 1 - Filter the date with Equals operator

Step 2 - Open the filter again , change the date using datepicker 

Noticed that the operator value is blank and the filter selection is removed.

Can you please help here.

0
Nikolay
Telerik team
answered on 06 Jan 2021, 09:48 AM

Hi Suresh,

The recommended approach to make the date filter work for the IsEqualTo operator is to introduce a helper field. There is no need to ignore the minutes at all (as this might lead to unwanted behavior). 

1. Set a new field in the model:

public DateTime EnrollmentDate { get; set; }

public DateTime EnrollmentDateDateOnly { get { return (this.EnrollmentDate.Date); } }

2. Bind the column to the DataOnly, but display the original date:

columns.Bound(x => x.EnrollmentDateDateOnly).ClientTemplate(" #= kendo.toString(EnrollmentDate,\"MM/dd/yyyy hh:mm:ss\") #");

Please try this approach and let me know if it helps.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Suresh
Top achievements
Rank 1
Veteran
Answers by
Nikolay
Telerik team
Suresh
Top achievements
Rank 1
Veteran
Share this question
or