Bug when canceling an edit using local data

[Jeff]

Overall, the kendo grid is fantastic for working with remote data but has issues when attempting to do anything more than display items from a local array. 

I have been able to work around most of the issues but there seems to be a bug in the grid code which appears when you add an item to the grid then attempt to add another item. If you cancel the addition of the second item, all items added to the grid disappear.

See this jsFiddle and follow these steps to see an example of the problem :

1. Click the 'Add Item' button in toolbar above the grid.
2. Enter values in each column (i.e. 'name005', '005', 'G5'.
3. Click the 'Update' button in the far right column.
4. Click the 'Add Item' button again.
5. Click the 'Cancel' button in the far right column.
6. Note that the first new row (name005) is gone! It will delete all new items, not just the last one.

I've tried numerous combinations of saveRow(), saveChanges(), sync(), etc but nothing seems to work. The items are definitely added to dataSource but it is somehow overwritten when the Cancel button is clicked. It's almost like the original array is read back in. 

While typing this, I just found a way around this issue but it's definitely not very "clean". A quick test in my production code seems to show that creating a new DataSource using the data from the existing data source seems to work in initial tests. Something like this:

1.function _onGrdItemsSaveChanges(oEvt) {
2.    var tDS = new kendo.data.DataSource(oEvt.sender.data);
3.    $('#grdItems').data('kendoGrid').setDataSource(tDS);
4.}

Could someone please look into this issue?

Thanks

[Jeff]

Here is a jsFiddle with the kludgy but usable workaround.

[Kiril Nikolov]

Hi Jeff,

The problem comes from the fact that when local data is used, you do not updated the initial array when a value inside the grid is changed. In order to updated the grid correctly, you need to implement local transport functions (working with the local data), so the grid will work as expected. 

Please check this jsBin showing a possible implementation:

http://jsbin.com/OHUBAcA/1/edit

Regards,
Kiril Nikolov
Telerik

[Seniloli]

Can an example be provided for using ASP Core? 

Thanks

[Stoyan]

Hi Seniloli,

Since Telerik UI for ASP.NET Core is based on Kendo UI for jQuery you can configure a Grid HtmlHelper/TagHelper and later bind it to a local DataSource initialized in Kendo UI for jQuery:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()    
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Width(100);
        columns.Bound(p => p.Freight).Width(100);
        columns.Bound(p => p.ShipName);
    })
    .Editable(e=>e.Mode(GridEditMode.InCell))
    .Navigatable()
    .ToolBar(t=>{
        t.Create();
        t.Save();       
    })
    .HtmlAttributes(new { style = "height:430px;" })
)

    $(document).ready(function(){
        //configure the dataSource here
        ...
        var grid = $("#grid").data("kendoGrid");
        grid.setDataSource(dataSource)
    })

Please review the suggested approach in this Telerik REPL: https://netcorerepl.telerik.com/wnuhYIFJ01ibDkiT51

I hope the suggested approach is useful.

[Seniloli]

Thank you. This does work to resolve the cancel button issue, however when we click on delete, it cannot delete the record anymore. It has the error of 

Uncaught TypeError: Cannot read properties of undefined (reading 'call').

Other functionality such as edit, save, works fine. Any insight? The edit mode I'm using is Inline. However, when using edit mode of Incell like example above, of course the cancel button does not show up, but the delete does work (and other functions like save.). 

Update, so in inline mode, we have to add the destroy method as well. Like below.

Might this be a bug in the InLine edit mode?

My implementation is like  example above  accepts for data, I used firstname, middle name and lastname. To match the Model being used.

Thanks

Update: We have to add the destroy method as well as it looks like it will now look for this method when we delete using this mix implementation of asp.net core and jquery. 

destroy: function (e) {					
			var item = e.data;
			var index = data.findIndex(function (dataItem) {
			return dataItem.Id === item.Id;
		    });

					if (index >= 0) {
						data.splice(index, 1);
					}
					e.success();
				}

[Stoyan]

Hi Seniloli,

Thank you for sharing the example snippet.

I used it and also set the Editable mode of the Grid to InLine.

The most convenient approach to edit and destroy rows in an InLine editable Grid is to use the Command Column:

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

I have applied the above the sample Telerik REPL and it seems to work as expected.

Give it a try and let me know how it works on your side.

Thank you.

 

[Seniloli]

Yes it works beautifully now without any issue.

Thanks again! 

[Enrique]

That made the trick for me! Great. thanks.

[Kiril Nikolov]

Hello Enrique,

I am happy to hear that the example helped.

In case you have any questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik

 

 

[ASHISH]

Hi,

I have just go through your demo "http://jsbin.com/OHUBAcA/1/edit" but does not work if i add dropdown list in column.

Thanks for quick response.

Ashish

[Preslav]

Hi Ashish,

Could you please elaborate on the code that is not working?

In the meantime, below you could find articles and demos on drop-downs in the Grid:

• https://demos.telerik.com/kendo-ui/grid/editing-custom
• https://demos.telerik.com/kendo-ui/grid/foreignkeycolumn
• https://docs.telerik.com/kendo-ui/knowledge-base/grid-mvvm-dropdown-template
• https://docs.telerik.com/kendo-ui/knowledge-base/grid-dropdown-list-first-click
• https://docs.telerik.com/kendo-ui/knowledge-base/grid-dropdownlist-column-template
• https://docs.telerik.com/kendo-ui/knowledge-base/grid-dropdown-editor-readonly

I look forward to hearing from you.


Regards,
Preslav
Progress Telerik

[Dusan]

The problem still persist, even if CRUD operations of local data source is implemented.

DOJO example

Steps to reproduce:

- press plus to add new row

- insert some values and confirm entry

- edit newly inserted row

- cancel changes - editor stays open, an exception is present in console..

I even tried implementing DS transport as suggested  in https://docs.telerik.com/kendo-ui/knowledge-base/local-data-editing, but with no success.

BR

 

[Georgi Denchev]

Hello, Dusan,

Looking at the provided Dojo, it seems like you're attempting to mix MVVM initialization with regular widget initialization. This could lead to potential issues.

I would recommend that you choose one of the approaches and use it.

Let me know in case the issue continues to persist after that.

Best Regards,

Georgi