Kendo grid Editing custom editor

1 Answer 44 Views
Data Source Grid
Top achievements
Rank 1
Alex asked on 20 Jan 2022, 04:41 PM | edited on 21 Jan 2022, 08:40 AM


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{
        data: data,
        autoSync: true,
        schema: {

And the grid

        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.


Top achievements
Rank 1
commented on 21 Jan 2022, 09:15 AM

I found a dojo with the same problems I have


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

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 25 Jan 2022, 10:45 AM

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(){
              var grid = $("#grid").data("kendoGrid");
              grid.editCell($("#grid td:eq(0)"));
       }, 700)

Here is the modified Dojo example. 

I hope this helps.

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

Data Source Grid
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question