Kendo Grid model with IEnumerable property, which is not updated correctly after creation / update when using AJAX binding

Question

I had a problem when the property of my model is not updated correctly when sending it to the controller to call Update or Create from the Kendo grid. The model is as follows:

public class ReleaseNotesModel { public int NoteID { get; set; } public int ReleaseID { get; set; } public List<TranslationModel> ReleaseNoteTranslations { get; set; } public ReleaseNoteType ItemType { get; set; } } public class TranslationModel { public int TranslationID { get; set; } public string Translation { get; set; } public int LanguageID { get; set; } public int ItemID { get; set; } } 

Here is the grid in my opinion:

 @(Html.Kendo().Grid<ReleaseNotesModel>() .Name("Grid") .Columns(columns => { columns.Bound(m => m.ItemType).Width(140); columns.Bound(m => m.Description); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(170); }) .ToolBar(toolbar => toolbar.Create()) .Editable(editable => editable .Mode(GridEditMode.PopUp) .TemplateName("ReleaseNoteTemplate") .Window(w => w.Width(620)) .DisplayDeleteConfirmation(true) ) .Pageable() .Sortable() .Scrollable() .Filterable() .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) //.Server() .Events(e => e.Error("grid_error")) .Model(model => { model.Id(m => m.NoteID); model.Field(m => m.ReleaseID).DefaultValue(Model.ReleaseID); model.Field(m => m.ItemType).DefaultValue(ReleaseNoteType.NewFeature); //defaultTranslationsList is a List<TranslationModel> with two empty objects in it model.Field(m => m.ReleaseNoteTranslations).DefaultValue(defaultTranslationsList); }) .PageSize(5) .Read(read => read.Action("GetNotes", "ReleaseNotes", new { releaseID = Model.ReleaseID })) .Create(create => create.Action("AddNote", "ReleaseNotes")) .Update(update => update.Action("EditNote", "ReleaseNotes")) .Destroy(destroy => destroy.Action("DeleteNote", "ReleaseNotes")) ) ) 

So, more specifically, the problem I'm experiencing is that in my controller action:

 public async Task<ActionResult> EditNote(ReleaseNotesModel model) 

model.ReleaseNoteTranslations always contains two empty objects (properties are null or 0), that is, the default value that I set for this property. If I have not set the default value, then I will not have any fields for editing this property in the pop-up editor. All other properties are updated as expected.

What bothers me if I use server binding instead of AJAX, then all the data will be correctly received. Therefore, I decided to check the data in the request headers sent in both cases:

 // Using server binding ReleaseID:300 NoteID:886 ItemType:1 ReleaseNoteTranslations[0].ItemID:886 ReleaseNoteTranslations[0].LanguageID:1 ReleaseNoteTranslations[0].TranslationID:869 ReleaseNoteTranslations[0].Translation:The module is now released! ReleaseNoteTranslations[1].ItemID:886 ReleaseNoteTranslations[1].LanguageID:2 ReleaseNoteTranslations[1].TranslationID:870 ReleaseNoteTranslations[1].Translation:Le module est maintenant disponible! NoteID:886 // Using AJAX binding sort: group: filter: NoteID:886 ReleaseID:300 ReleaseNoteTranslations[0][TranslationID]:869 ReleaseNoteTranslations[0][Translation]:The module is now released! ReleaseNoteTranslations[0][LanguageID]:1 ReleaseNoteTranslations[0][ItemID]:886 ReleaseNoteTranslations[1][TranslationID]:870 ReleaseNoteTranslations[1][Translation]:Le module est maintenant disponible! ReleaseNoteTranslations[1][LanguageID]:2 ReleaseNoteTranslations[1][ItemID]:886 ItemType:1 

Now I see here the syntax objectName[index].PropertyName vs objectName[index][PropertyName]

I wonder if this could be the cause of my problem, and if so, is there a way to go and directly manipulate the data being sent to fix this? Could this be a mistake in the way the Kendo Grid sends data through an Ajax binding?

In any case, any help would be greatly appreciated!

Answer 1

So, if someone stumbles upon this in the future, I contacted Telerik support, who explained to me that:

The DataSource only supports value types and will not serialize arrays in the format expected from the model.

They also provided me with a workaround using the Data query function to call a JavaScript function that converts the data to the correct format.

In the view, change the request functions by specifying the name of the JavaScript function being called:

 .Create(create => create.Action("AddNote", "ReleaseNotes").Data("serialize")) 

Then add the functions that will perform the conversion:

 function serialize(data) { for (var property in data) { if ($.isArray(data[property])) { serializeArray(property, data[property], data); } } } function serializeArray(prefix, array, result) { for (var i = 0; i < array.length; i++) { for (var property in array[i]) { result[prefix + "[" + i + "]." + property] = array[i][property]; } } } 

Answer 2

Another problem may be that kendo.aspnet.mvc.js is not included in the project. It appears that when turned on, it performs serialization.

Answer 3

Something I noticed is that you need to add an if condition, since you do not need to serialize if the count is 1, only one element works fine without serialization