Filter Date Range End date not filtering

[Katie]

Hi,
Here is code below:
function FilterGrid() {
    var grid = $("#grid").data("kendoGrid");

    var orderDateFromFilter = $("#FromDate").val().split('-');
    var orderDateToFilter = $("#ToDate").val().split('-');

    if (orderDateFromFilter == "") {
        orderDateToFilter = "";
        $("#ToDate").val("");
        $("#text5").val("");
        $("#text6").val("");
    }
    else if (orderDateToFilter == "") {
        $("#ToDate").val($("#FromDate").val());
        $("#text6").val($("#text5").val());
        orderDateToFilter = orderDateFromFilter;
    }

    var mydate1 = new Date(orderDateFromFilter[0], orderDateFromFilter[1]-1, orderDateFromFilter[2]);
    var mydate2 = new Date(orderDateToFilter[0], orderDateToFilter[1]-1, orderDateToFilter[2]);

    var filter = { logic: "and", filters: [] };

    filter.filters.push({ field: "FilterByDate", operator: "gte", value: mydate1 });
    filter.filters.push({ field: "FilterByDate", operator: "lte", value: mydate2 });

    if (orderDateFromFilter== "" && orderDateToFilter == "")
        filter = "";
    grid.dataSource.filter(filter);
}

[Mihaela]

Hello Katie,

Thank you for sharing the code snippet.

In order to be able to replicate your case, would you please clarify the following queries:

• Where are placed the input elements $("#FromDate") and $("#ToDate")?
• When is called the function FilterGrid()?
• It would be great if you could share the Grid configuration, too;

On a separate note, the article below describes a similar case, where the column "Birth Date" can be filtered by date range, "From date" and "To date" only (at least 1 date is required):

https://docs.telerik.com/kendo-ui/knowledge-base/use-two-inputs-range-date-filtering

The function "betweenFilter" defines the filter settings of "Birth Date", when both dates are selected/entered (From and To). Otherwise, the data is filtered by one of the specified dates.

I am looking forward to your reply. If you have any other questions, don't hesitate to let me know.

 

Regards, Mihaela Lukanova Progress Telerik

[Katie]

$("#grid").kendoGrid({

        dataSource: {
            data: gridDataSource,
            pageable: true,
            pageSize: 20
        },
        height: 350,
        groupable: false,
        sortable: true,
        selectable: true,
        EnableTimeIndependentFiltering: true,
        change: onChange,
        resizable: true,
        scrollable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "Case_number",
                title: gridTitle1,
                width: 120,
                headerAttributes: { "class": "main-blue" }
            },
            {
                field: "Name",
                title: gridTitle2,
                width: 220,
                headerAttributes: { "class": "main-blue" }
            },
            {
                field: "DocType",
                title: gridTitle3,
                width: 150,
                headerAttributes: { "class": "main-blue" }
            },
            {
                field: "Sys_created_by",
                title: gridTitle4,
                width: 150,
                headerAttributes: { "class": "main-blue" }
            },
            {
                field: "Sys_created_on",
                title: gridTitle5,
                width: 100,
                headerAttributes: { "class": "main-blue" }
            },
            {
                field: "Api_download_link",
                hidden: true
            },
            {
                field: "DocId",
                hidden: true
            },
            {
                field: "FilterByDate",
                type: "date",
                format: "{0:" + MyGlobal.displayDateFormat + "}",
                hidden: true
            }
        ]
    });

 

<div id="filters">                                                 

input id="FromDate" type="hidden" /> <input for="FromDate" id="input5" type="date" class="k-textbox"  style="width: 100%;"></div>

 

<div id="filters">  <input id="ToDate" type="hidden" /> <input for="ToDate" id="text<6" type="date" class="k-textbox" style="width: 100%;"></div>

<div id="grid"></div>

[Katie]

Hi thanks I have added my grid settings above.

[Mihaela]

Hello Katie,

Thank you for sharing the grid's configuration! 

I would suggest updating the filter logic operator to "or" when only one date is entered/selected. Otherwise, the data will be filtered only when the condition "and" is completed (when both dates are entered/selected):

if (orderDateFromFilter == "" || orderDateToFilter == "") {
  filter = { logic: "or", filters: [] };
} else {
  filter = { logic: "and", filters: [] };
}

Regarding the filters array, it could be updated with the appropriate filters, by verifying that "From" and/or "To" dates are entered/selected, as follows:

var mydate1 = new Date(orderDateFromFilter[0], orderDateFromFilter[1]-1, orderDateFromFilter[2]);
var mydate2 = new Date(orderDateToFilter[0], orderDateToFilter[1]-1, orderDateToFilter[2]);       

if(mydate1) {
  filter.filters.push({ field: "BirthDate", operator: "gte", value: mydate1 });
}

if(mydate2) {
  filter.filters.push({ field: "BirthDate", operator: "lte", value: mydate2 });
}

If any of "mydate1" or "mydate2" is not entered/selected, it will be equal to "Invalid date" and won't be added to the filter object.

I have prepared a runnable Dojo example for you to test the updated "FilterGrid" function: 

https://dojo.telerik.com/OjUsUtIt

Would you please test it at your end and let me know if it works as expected?

Feel free to contact me, if you need any further assistance.

Regards, Mihaela Lukanova Progress Telerik