Auto open KendoDatePicker in editable KendoGrid control

[Ian]

Hi,

I'm having some trouble getting the KendoDatePicker control to automatically open when its cell is selected in my editable Kendo Grid control while using AngularJs.

My editable column is defined as so:

gridColumns.push({
    field: currentField.FieldName.replace(/ /g, "_"),
    title: currentField.FieldName,
    format:"{0:yyyy-MM-dd}",
    editor: $scope.dateTimeCmtEditor,
    template: "#= (" + currentField.FieldName.replace(/ /g, "_") + " == null || (typeof " + currentField.FieldName.replace(/ /g, "_") + " == 'undefined')) ? ' ' : kendo.toString(kendo.parseDate(" + currentField.FieldName.replace(/ /g, "_") + ", 'yyyy-MM-dd'), 'yyyy-MM-dd') #",
    width: 150
});

 

And my editor is defined like so:

$scope.dateTimeCmtEditor = function (container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
                .kendoDatePicker({});
};

 

I would like the date picker to open automatically when the user either clicks in the cell or navigates to the cell using the keyboard and hits Enter.

Thanks,

Ian

[Alexander Popov]

Hi Ian, 

This behavior is not supported out of the box. You could however, try utilizing the Grid's navigate event and the editCell method. 

Regards,
Alexander Popov
Telerik