Kendo grid Editing custom editor

[Alex]

Hello,

I'm using the Kendo Grid with Editing custom editor like the doc Edit custom but I have a real problem when I click on the "add button" there's no focus on the first column's new row.

I have the Datasource :

let DataSource = new kendo.data.DataSource({
        data: data,
        autoSync: true,
        schema: {
       }
})

And the grid

$('#grid').kendoGrid({
        dataSource: DataSource,
        pageable: false,
        height: 550,
        toolbar: ["create"],
        columns: [],
        editable: true
})
        

Of course schema and column are good with fields and model.

However when I add a new record, there's a new row but there's no focus on the first column input which have { validation: { required: true } }.

If I remove autoSync: true, I have the good action, and I focus out the error message display but I want to save when the focusout is fired on the field..
I don't understand why it's not working but if someone can help me it will be nice because I made it again and again whithout finding the solution (listening events 'Edit', 'BeforeEdit', 'EditRow' & 'EditColumn' but it only work with  "inline" or "popup" edit mode, or trying to focus on the first column's new row when the add button is fired).

Hope you see my problem.

Regards

[Alex]

I found a dojo with the same problems I have

Dojo

When you click on add button, no focus on the first cell but the schema have { validation: { required: true } }

But in the documentation it work

[Neli]

Hi Alex,

You could add a click event listener to the 'Add new record' button. Then, with a slight delay, you could use the editCell method to edit the first cell in the Grid. Below is an example:

$('.k-grid-add').on('click', function(){
        setTimeout(function(){
              var grid = $("#grid").data("kendoGrid");
              grid.editCell($("#grid td:eq(0)"));
       }, 700)
 })

Here is the modified Dojo example. 

I hope this helps.

Regards,
Neli
Progress Telerik