buggy Grid InLine Editing

[Wolfgang Weilguny]

Hello,

we have a Grid that is bound to an IEnumerable Property of the ViewModel being supplied by the server as you can see in the following code snippet:

01.@(Html.Kendo().Grid<AktionsTracker.Pages.PromotionEditModel.ModelDTO>(Model.Promotion.Models)
02.    .Name(ModelGrid)
03.    .Columns(c =>
04.    {
05.        c.ForeignKey("ModelId", Model.Models, "ModelId", "ModelCode").Title("Modellcode").Width(100);
06.        c.ForeignKey("ModelId", Model.Models, "ModelId", "ModelName").Title("Modellbezeichnung").Width(200);
07.        c.Bound(m => m.Absolute).Width(150);
08.        c.Bound(m => m.Relative).Width(150);
09.        c.Command(c => c.Edit());
10.        c.Command(c => c.Destroy());
11.    })
12.    // more code
13.    .DataSource(c =>
14.    {
15.        c.Custom()
16.        .Schema(s =>
17.        {
18.            s.Model(m =>
19.            {
20.                m.Id("ModelId");
21.                m.Field("ModelId", typeof(int)).Editable(false);
22.                m.Field("Absolute", typeof(Decimal?));
23.                m.Field("Relative", typeof(Decimal?));
24.            });
25.        });
26.    })
27.)

We now want to programmatically insert a new record with a specific Id (guaranteed to be unique and have an entry in the ForeignKey-Collections) and directly put the Row into Edit-Mode.

At first, we tried to simply call grid.addRow() and handle the beforeEdit event to set the ModelId but this did not work out since the ModelId has to be non-Editable.

Therefore, we have resorted to a different approach where we execute the following code in a javascript function:

1.var grid = $("#@ModelGrid").data("kendoGrid");
2.grid.dataSource.add({ ModelId: value, Absolute: null, Relative: null });
3.grid.editRow($("#@ModelGrid tbody tr:last-of-type"));

i.e. we add the pre-filled record to the datasource of the grid and manually start the editing via the call to editRow.

The problem is the following:

• Record is added and edit-mode is entered
• We manually set the required properties and press the Update button
• We press the Edit button on the same row
• We press Cancel to end the editing without saving changes => as a result the row disappears even though it has been previously saved!

It does not matter how often we have update the record with valid data, as soon as we press Cancel the record will disappear every time.
I want to reiterate that it is fine and *intended* that the row disappears if Cancel is clicked directly after adding the row. However, having it disappear after multiple succesfull updates is not what we want at all.

How can we fix this behaviour?

Best Regards

[Georgi]

Hi Wolfgang,

When a record is inserted via the add method of the dataSource, it is marked as dirty. Which means, that when the changes are cancelled, the record will be removed. The dirty state is removed after the item is saved. However, in your case the transport setting is not configured, thus, the item is never actually saved.

To avoid the issue with your current configuration I can suggest you to use the pushInsert method instead. For better understanding I have assembled a small sample which demonstrates the above:

• https://dojo.telerik.com/OxaRUsOt/2

Although the grid is configured with JS, the very same applies for the server wrapper.

I hope this helps.

Regards,
Georgi
Progress Telerik

[Wolfgang Weilguny]

Hey Georgi,

Thanks for your response. Yes, I already tried working around this with the pushCreate and pushINsert methods, however this poses another problem of its own.

See, I want to initialize some fields with null values but after editing they have to fulfill certain properties  (validated using a Kendo Validator). The problem is if I now insert a new record like this and call editRow on the record, clicking cancel without fulfilling the validation constraints would keep the record alive with invalid data and this is not acceptable for us.

Ideally, clicking cancel directly after creating the record should remove it but once it has been successfully saved it should be kept alive even when clicking cancel (much like the usual Create functionality of the Grid but with customized prefilled data). You mentioned that configuring the transport function may help in this? May I ask you for an example using the ASP.Net Core Helpers?

Best Regards

[Georgi]

Hello,

Our custom dataSource demo actually shows that exact scenario, you can find it in the link below:

• https://demos.telerik.com/aspnet-core/grid/custom-datasource

Another option you have is to manually append the new item to the pristine data of the dataSource in case the validation passed. You could do that in the Save event of the grid.

e.g.

.Events(x=> x.Save("onSave"))

// handler

function onSave(e){
   this.dataSource._pristineData.push(e.model.toJSON())
}

 

Below you will find a small sample which demonstrates the above:

• https://dojo.telerik.com/AfImuGOt

Regards,
Georgi
Progress Telerik

[Wolfgang Weilguny]

Thank you Georgi,

I guess I was kin dof confused about the custom datasource example because I am only dealing with local data already contained in the model and had no need for any URLs whatsoever.

It is working now though so thank you for your help :)

Best Regards