Grid edition InCell with empty edit field

[FranckSix]

Hi,

Telerik Kendo MVC version (2023.1.425)

With my grid defined in MVC Razor like this :

@(Html.Kendo().Grid(Model.Factures)
	.Name("gridSelection")
	.Columns(c =>
	{
	    c.Bound(f => f.Id).Visible(false);
	    c.BoundDate(f => f.DateDebut);
	    c.BoundDate(f => f.DateFin);
	    c.BoundDate(f => f.DateFacturation);
	    c.Bound(f => f.NumeroActuel);
	})
	.Editable(e => e.Mode(GridEditMode.InCell))
	.Pageable()
	.Navigatable()
	.Scrollable()
	.DataSource(d => d
	    .Ajax()
	    .Batch(true)
	    .ServerOperation(false)
	    .Model(m => m.Id(p => p.Id);
	    .Update(a => a.Action("Sauvegarder", "ModifFactures", GetBindParams("Update")).Data(KendoJSCall.JSGetAntiForgeryToken))
	    .Events(e => e.RequestEnd(KendoJSCall.OnGridCheckResults))
	)
)

I got a grid, data displayed correctly.
But when I click on a cell, it display a empty text field the data not follow. On lost focus (cellClose) I got this error :


Someone have an idea ?

Thanks!

[Ivan Danchev]

Hi FranckSix,

Could you share the following:

1. The main Model as well as the Factures view model

2. The Sauvegarder action

3. The OnGridCheckResults handler

4. If you are using a custom editor template in EditorTemplates (Views/Shared/EditorTemplates or Views/ModifFactures/EditorTemplates), post the content of the custom template

 

[FranckSix]

Hi Ivan,

The model like this:

   public class FactureViewModel
   {
      public int IdFacture { get; set; }

      [Display(ResourceType = typeof(RessourcesModificationNoFactures), Name = "DateDebut")]
      [DataType(DataType.Date)]
      public DateTime DateDebut { get; set; }

      [Display(ResourceType = typeof(RessourcesModificationNoFactures), Name = "DateFin")]
      [DataType(DataType.Date)]
      public DateTime DateFin { get; set; }

      [Display(ResourceType = typeof(RessourcesModificationNoFactures), Name = "DateFacturation")]
      [DataType(DataType.Date)]
      public DateTime DateFacturation { get; set; }

      [Display(ResourceType = typeof(RessourcesModificationNoFactures), Name = "NumeroFactureActuel")]
      public string NumeroFactureActuel { get; set; }

      [StringLength(25, ErrorMessageResourceName = "LongueurMaximum", ErrorMessageResourceType = typeof(Domaine.Sphere.Resources.Global))]
      [Display(ResourceType = typeof(RessourcesModificationNoFactures), Name = "NouveauNumeroFacture")]
      public string NouveauNumeroFacture { get; set; }
   }

Save method :

public async Task<ActionResult> Sauvegarder([DataSourceRequest] DataSourceRequest request, string operation, [Bind(Prefix = "models")] IEnumerable<FactureViewModel> viewModel)
{
 if (viewModel == null)
	throw new ArgumentNullException(nameof(viewModel));

 var donneesMAJ = new List<Facture>();
 if (ModelState.IsValid)
 {
   await viewModel.ForEachAsync( async facture =>
   {
	  var entite = facture.ToEntite();
	  await EffectuerLaSauvegardeAsync(operation, entite);
	  donneesMAJ.Add(entite);
   });

 }
 var result = await donneesMAJ.ToDataSourceResultAsync(request, ModelState, FactureViewModel.FromEntite);
 return Json(result);
}

//gestion du Callback de la grille kendoMVC apres un post
onGridCheckResults: function (e) {
 var type = "";
 var notification = "";
 if (e.type !== "read" && !e.response.Errors) {
	type = "succes";
	notification += $("#messageHelios-messageSucces").html();
 }
 else if (e.type !== "read" && e.response.Errors) {
	type = "erreur";
	$.each(e.response.Errors,
	   function (key, value) {
		  if ('errors' in value) {
			 $.each(value.errors,
				function () {
				   notification += this + "<br>";
				});
		  }
	   });
 }
 const event = new CustomEvent('onGridCheckResults', { detail: { action: e.type, message: notification, type: type } });
 dispatchEvent(event);
}

[Ivan Danchev]

Hi FranckSix,

I've tested the scenario with the FactureViewModel you posted and I don't get any exception. I should note that I've made some changes due to the missing dependencies, for example I removed:

ResourceType = typeof(RessourcesModificationNoFactures

from the model fields annotations.

Also I see the following configuration in the Grid:

 c.BoundDate(f => f.DateDebut);

Not sure where you get that configuration from (possibly a custom solution?), but it is not available in the 2023 version I tested the Grid with, so I used the Bound configuration instead:

c.Bound(f => f.DateDebut);

A potential problem I saw was that a collection of FactureViewModel (Model.Factures I assume is a collection of FactureViewModel) is loaded in the Grid, yet the Grid columns are bound to fields that are not declared in the FactureViewModel:

.Columns(c =>
{
    c.Bound(f => f.Id).Visible(false);
    c.BoundDate(f => f.DateDebut);
    c.BoundDate(f => f.DateFin);
    c.BoundDate(f => f.DateFacturation);
    c.Bound(f => f.NumeroActuel);
})

The DataSource model is also set to use the Id field, which is not present in the FactureViewModel:

 .Model(m => m.Id(p => p.Id);

I've attached the sample project that I used to test the Grid.

You will notice that in it the Grid columns are bound only to fields that are declared in the FactureViewMode. For example, instead of Id, I use the IdFacture field. The column bound to NumeroActuel is commented. The Grid can be edited and clicking on a cell does not result in an exception.

I hope the sample project points you in the right direction with regard to properly configuring the Grid.