Kendo grid Editing custom editor

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

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
Top achievements
Rank 1
commented on 21 Jan 2022, 09:15 AM

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

1 Answer, 1 is accepted

Sort by
0
Neli
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(){
        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

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
Data Source Grid
Asked by
Alex
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or