Assign ID To Column Filter Datepickers

3 posts, 0 answers
  1. Jeff
    Jeff avatar
    18 posts
    Member since:
    May 2012

    Posted 24 Sep 2020 Link to this post

    I have a Grid that has two Date field columns. I've implemented filters for both columns as shown below.  I'd like to assign an ID to the 4 datepickers that are created to be able to reference them later. 

      field: "issuedDate",
                title: "Issued Date",
                template: '#= kendo.toString(new Date(issuedDate), "MM/dd/yyyy HH:mm" ) #', 
                width: "140px",
                filterable: {
                    ui: "datepicker",               
                    //extra: true,
                    operators: {
                        date: {
                            gte: "From",
                            lte: "To",
                        }
                    },  
                    messages: { "info": "Issued Date From -> To " },
                }
     
    field: "receivedDate",
                title: "Received Date",
                template: '#= kendo.toString(new Date(receivedDate), "MM/dd/yyyy HH:mm" ) #',
                width: "140px",     
                filterable: {
                    ui: "datepicker",
                     
                    operators: {
                        date: {
                            gte: "From",
                            lte: "To",
                        }
                    },
                    messages: { "info": "Received Date From -> To " },               
                }

     

     

     

     
  2.
  3. Jeff
    Jeff avatar
    18 posts
    Member since:
    May 2012

    Posted 24 Sep 2020 in reply to Jeff Link to this post

    This is what the GUI looks like
  5. Nikolay
    Admin
    Nikolay avatar
    301 posts

    Posted 28 Sep 2020 Link to this post

    Hello Jeff,

    In general, the Column filter DatePickers can be referenced in the filterMenuInit event handler via the e.container event data that will return the object representing the filter menu form element. For example:

    filterMenuInit: function(e) {
    if (e.field == "date") {
     // get reference of the first DatePicker for "date" column
      var firstDatePicker = e.container.find("input:eq(0)").data("kendoDatePicker");
    }
  }

    The above can be examined live in the following Dojo demo:

    let me know if you have any questions.

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

Back to Top