Filter Grid By Datepicker

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

    Posted 23 Nov 2020 Link to this post

    I'm trying to filter the grid by using the datepicker but I'm using an external filter outside of the grid and its not working. Here is some of my code below open to any suggestions to make this work. Thanks!

     

    <div id="filters">                                             

    <input id="text3" type="text" class="k-textbox" placeholder="Filter by Date">                                         

    </div>

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

    JS:

    $("#text3").kendoDatePicker({             

    change: function () {                 

    var value = this.value();                 

    if (value) {                     

    grid.dataSource.filter({                         

    field: "Opened_at",                         

    operator: operator,                         

    value: value                     

    });                 

    } else {                     

    grid.dataSource.filter({});                 }             }         });

     

  2. Answer
    Petar
    Admin
    Petar avatar
    509 posts

    Posted 25 Nov 2020 Link to this post

    Hi Jayrone,

    Here is a Dojo example demonstrating how the targeted functionality of filtering the Grid using an external DatePicker can be implemented.  The code that filters the Grid is the following one.

    change: function(e){
         grid.data("kendoGrid").dataSource.filter({ field: "OrderDate", operator: "eq", value: kendo.parseDate(e.sender.value()) })
    }

    I hope the provided example will help you implement the desired functionality in your application. 

    Regards,
    Petar
    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