Autofocus Kendo Date Picker on button click Inside Kendo Grid

1 Answer 26 Views
Date/Time Pickers DateInput Grid
abdul
Top achievements
Rank 1
Iron
abdul asked on 31 Jan 2025, 12:26 PM

Hi,

I have a Kendo Grid and its first column is a Datetime and Its a Kendo DatePicker.

When the user click on Add new record button then the 1st cell which is a date picker should be auto focus.

Note: When the user click on Add new record button then we are sorting the grid in ascending order so that the new row should appear on the top, which is working fine but the 1st cell of the newly created row a Kendo Date picker in not in focus.

But when the user click on the first cell of the newly created row, then it opens the datepicker to allow user to select a date.

My requirement is when i am clicking the Add new record button then 
1. It should sort in ascending order (Which is working now)

2. The 1st cell of the Kendo Datepicker should auto focus like the above screenshot.


.ToolBar(toolbar =>
{
    toolbar.Create().HtmlAttributes(new { onclick = "SortGridAscending();" });
})

 

function SortGridAscending(){
       var grid = $("#TLPCurveAllocationsGrid").data("kendoGrid");
    //sort Grid's dataSource
    grid.dataSource.sort({field: "AllocationDate", dir: "asc"});
}



 

1 Answer, 1 is accepted

Sort by
0
Accepted
Anton Mironov
Telerik team
answered on 05 Feb 2025, 07:34 AM

Hi Abdul,

Thank you for the code snippets, the images, and the details provided.

I did a couple of tests on my side and confirmed that you are totally correct. When the programmatically sorting is executed, a new data binding of the Grid is applied and the focus of the first cell is lost.

In order to achieve the desired behavior, I would recommend to add the following logic to the function:

    function SortGridAscending(){
        var grid = $("#TLPCurveAllocationsGrid").data("kendoGrid");
        
        //sort Grid's dataSource
        grid.dataSource.sort({field: "LastSupply", dir: "asc"});

        var cell = grid.tbody.find("tr[role='row'] td:first");
        grid.current(cell);
        grid.editCell(cell);
    }
The new logic above will enter the first cell in edit mode.

Here is a REPL example that I prepared for the case. It implements the approach above:

Feel free to test the REPL example on your side and let me know if this is the desired result.

Kind Regards,
Anton Mironov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Date/Time Pickers DateInput Grid
Asked by
abdul
Top achievements
Rank 1
Iron
Answers by
Anton Mironov
Telerik team
Share this question
or