This is a migrated thread and some comments may be shown as answers.
Assign ID To Column Filter Datepickers
2 Answers 2 Views
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 24 Sep 2020, 12:10 PM

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 Answers, 1 is accepted

Sort by
0
Jeff
Top achievements
Rank 1
answered on 24 Sep 2020, 12:11 PM
This is what the GUI looks like
0
Nikolay
Telerik team
answered on 28 Sep 2020, 07:51 AM

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

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