Unplanned
Last Updated: 07 May 2024 07:04 by ADMIN
Peter
Created on: 03 May 2024 10:10
Category: Grid
Type: Feature Request
2
Grid double-click Event

Hi

I'm using the popup editor to edit rows in the grid.

I'm using following javascript method to open the popup:

function editSelectedRow(name) {
    var grid = $('#' + name).data('kendoGrid');
    var rows = grid.select();
    grid.editRow(rows[0]);
}

This function is called when a row is double clicked:

$("#Binders tbody").on("dblclick", "tr[role='row']", function (e) {
    editSelectedRow("Binders");
});

I have this code for many years now and it was never a problem.

With the latest version of the grid this code fails (the popup doesn't open) upon making a change in the popup window. As long as no changes is done to the record in the popup, there will not be a problem.

The error received is the following:

jquery-3.7.1.min.js:2  jQuery.Deferred exception: Cannot read properties of undefined (reading 'id') TypeError: Cannot read properties of undefined (reading 'id')
    at HTMLTableRowElement.<anonymous> (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1814199)
    at Function.each (https://code.jquery.com/jquery-3.7.1.min.js:2:3129)
    at Le.fn.init.each (https://code.jquery.com/jquery-3.7.1.min.js:2:1594)
    at init._persistSelectedRows (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1814160)
    at init.select (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1811103)
    at init._displayRow (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1779176)
    at https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1894615
    at Array.forEach (<anonymous>)
    at init.refresh (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1894600)
    at init.trigger (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:4189) undefined

When the data in the grid is refreshed, no error will occur anymore.

HOWEVER... I also have an "Edit" button on the toolbar of the grid. That buttons uses the same 'editSelectedRow' function but when that button is used, the popup window will open, even after a change to the record!!

With other words... something goes wrong when double clicking a row after an update was made.

What has changed?

Best regards,

Peter

5 comments
ADMIN
Anton Mironov
Posted on: 06 May 2024 06:51

Hi Peter,

Thank you again for the kind words. I am really sorry to hear about the effort and the frustration this change is causing.

Your idea for the double-click Event is very good. I will log a new item in our Feedback Portal for this Event and will speak with my manager for the idea.

 

Kind Regards,
Anton Mironov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Peter
Posted on: 06 May 2024 06:38

Hi Anton,

Thanks for coming back so fast again ;o)

I can confirm this fixes the issue, but at the same time I must say that we have this code in a lot of applications.

Replacing this everywhere will cost a bit of time and not so very long ago i was using some other code to do this which had to be replaced by the code that is now not working anymore either. (so it's the second time i have to replace this everywhere)

Maybe there should be a "double click" event out of the box on the grid?

I can't imagine I'm the only one that is using a popup editor on the grid and double clicking a row to display the popup window makes perfect sense in my mind.

Kind regards,

Peter

 

ADMIN
Anton Mironov
Posted on: 06 May 2024 06:26

Hi Peter,

Thank you for the kind words and the additional details provided.

I tried the described scenario and can confirm the issue. It is caused because, after the first edit, the selector is not the same - the "role='row'" part is missing. I can check when this change was made.

In order to achieve the desired behavior, I would recommend changing the jQuery selector for the row - just "tr" or the class selector ".k-table-row".

Give a try to the approach above and let me know if it fixes the issue.

Best Regards,
Anton Mironov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Peter
Posted on: 06 May 2024 06:14

Hi Anton,

Thanks for coming back to me so fast during a holiday period.

Much appreciated!

I have changed your sample by setting edit mode to "Popup":

Just replace

.Editable(e => e.Mode(GridEditMode.InLine))

by

.Editable(e => e.Mode(GridEditMode.PopUp))

When you run the sample now, do the following:

1. Edit the first record by double clicking the row.

2. Change something to the data

3. click "Save"

4. Double click again that first row... it will not open!

Please let me know if you confirm the same behavior.

Best regards,

Peter

ADMIN
Anton Mironov
Posted on: 06 May 2024 05:55

Hello Peter,

Thank you for the code snippets and the details provided.

You are totally correct - the JavaScript looks very well and should work out of the box.

In order to achieve the same behavior on my side and debug the scenario, I decided to implement a sample project for the case.

The sample project uses the latest version and your code. It is attached to this reply and is working as expected.

Feel free to make the needed tests on your side and let me know if this is the desired result.

Kind Regards,
Anton Mironov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Attached Files: