Clicking the edit button on a grid with a local datasource clears the display of the grid (but not the data)

[Wim]

I have a pretty basic grid which displays and modifies a Javascript array, locally. However, whenever I press the "Edit" command button (Editable is defined as inline), the entire view of the grid will clear - no rows will be displayed. The array will still hold the data, though, so if I 'refresh' the grid by reapplying the datasource, it works just fine. The weirdest part is that this only happens the first time! So I'll add a few rows, click the edit button, refresh the grid, click the edit button again - now it works normally!

At first I thought it might be the issue like when cancelling an edit removes the row, due to not setting an ID on the datasource model. I do have an ID set, though.

I have now tracked the issue down to the following piece of code, inside my Grid_Edit event:

01.function Grid_Edit(e) {
02.    // Return saves the row
03.    grid.tbody.find("input").on("keydown", function (key) {
04.        if (key.which === 13) {
05.            setTimeout(function () {
06.                grid.saveRow();
07.            }, 100);
08.        }
09.    });
10.
11.    // Escape cancels the row
12.    grid.tbody.find("input").on("keydown", function (key) {
13.        if (key.which === 27) {
14.            setTimeout(function () {
15.                grid.cancelRow();
16.            }, 100);
17.        }
18.    });
19.
20.    // Pressing TAB (excluding Shift + TAB) on the Quantity field also saves the row
21.    grid.tbody.find("input[name=Quantity]").on("keydown", function (key) {
22.        if (!key.shiftKey && key.which === 9) {
23.            setTimeout(function () {
24.                grid.saveRow();
25.            }, 100);
26.        }
27.    });
28.}

My grid:

01.BatchCodes = [
02.    { URID: 900000, Code: "ABC123TEST", Quantity: 50 },
03.    { URID: 900001, Code: "ABC124TEST", Quantity: 25 },
04.    { URID: 900002, Code: "ABC125TEST", Quantity: 15 },
05.    { URID: 900003, Code: "ABC126TEST", Quantity: 5 }
06.];
07.
08.$("#GridBatchCodes").kendoGrid({
09.    dataSource: {
10.        data: BatchCodes,
11.        schema: {
12.            model: {
13.                id: "URID",
14.                fields: {
15.                    URID: { type: "number" },
16.                    Code: { type: "string" },
17.                    Quantity: { type: "number" }
18.                }
19.            }
20.        }
21.    },
22.    edit: Grid_Edit,
23.    save: Grid_Save,
24.    columns: [
25.        { field: "URID", hidden: true },
26.        { field: "Code", title: "#" },
27.        { field: "Quantity", title: "Quantity" },
28.        { command: ["edit", "destroy"], width: "94px" }],
29.    toolbar: [{ name: "create" }],
30.    editable: "inline"
31.});
32.
33.function Grid_Refresh() {
34.    var grid = $("#GridBatchCodes").data("kendoGrid");
35.
36.    grid.cancelRow();
37.    grid.dataSource.data(BatchCodes);
38.}

The Grid_Save event shouldn't be too relevant, so I left it out. All it basically does is check if the URID > 0, in which case it will try to update the existing entry in the array. If it is 0, it pushes a new entry onto the array and refreshes the grid.

The Grid_Refresh method simply re-sets the datasource's data array.

Another weird thing is that I have a similar grid which is 'linked' to the first one. Whenever I select a row in the first grid, the second one displays a filtered list from another array. If I keep the keydown handlers on the first grid, both grids will misbehave. If I remove the keydown handlers only from the first grid, both grids will behave nicely (even though the second grid has its own keydown handlers bound!).

[Wim]

After some additional testing, it seems that it is not caused by the keydown handlers. What could cause this issue?

[Nikolay Rusev]

Hello Wim,

I've just copy-pasted your code and it seems to be working. Am I missing something? Here is the dojo example - http://dojo.telerik.com/@rusev/ijEfi

Regards,
Nikolay Rusev
Telerik