Instantiating JQuery Datepicker Input Field in All Rows

c-myers1

So I have a datatable with a column meant to be a datepicker widget.

The datatables formatter correctly gives each datepicker an id of 'datepicker_#' where # is the column row number.

Within my document.ready function, right after instantiating the table, I immediately follow with:

$("#datepicker_1").kendoDatePicker();

This is simply for test purposes, to see it works for the first row before I bother with the selector that grabs all datepickers.

The above command simply has no effect; yet the network and console developer tabs reveal nothing unusual.

What could the issue be?

Please note I'm following the example here https://demos.telerik.com/kendo-ui/datepicker/index (i.e. I have loaded all required assets hitherto)

bindrid

Use the createdRow callback in your datatables, something like

$("#example").DataTable({
    createdRow:function(row,data,index){
       $("#datepicker_1", row).kendoDatePicker();    }
});

c-myers1

Would this work:

$("#example").DataTable({
createdRow:function(row,data,index){
$("#datepicker_"+row, row).kendoDatePicker(); }
});

To take care of each row and not just the first?

c-myers1

It doesn't work. How do I instantiate for each datepicker_# within createdRow?

bindrid

By bad. Don't use an id. Use a class name.

something like

$("#example").DataTable({
columnDefs:[{targets:[3], className:"datepicker_cell"}],
createdRow:function(row,data,index){
$(".datepicker_cell", row).kendoDatePicker(); }
});

here is my working example using jquery ui datepicker http://jsbin.com/hojexud/edit?html,js,output

c-myers1

Could you please change this js fiddle to get the row selected (and checkbox ticked) once the datepicker is changed?