Filter Date Range End date not filtering

5 posts, 0 answers
  1. Katie
    Katie avatar
    4 posts
    Member since:
    Nov 2020

    Posted 25 Feb Link to this post

    Hi,

    I'm able to filter the grid between two date ranges but if the users just enters the 2nd date and leaves the first date bank I'm not able to filter those results. Need some help getting the end date to filter as well.

    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);
    }
  2. Mihaela
    Admin
    Mihaela avatar
    45 posts

    Posted 02 Mar Link to this post

    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

    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/.

  3. Katie
    Katie avatar
    4 posts
    Member since:
    Nov 2020

    Posted 02 Mar Link to this post

     
    $("#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>

  4. Katie
    Katie avatar
    4 posts
    Member since:
    Nov 2020

    Posted 02 Mar Link to this post

    Hi thanks I have added my grid settings above.
  5. Mihaela
    Admin
    Mihaela avatar
    45 posts

    Posted 04 Mar Link to this post

    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

    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/.

Back to Top