Grid edition InCell with empty edit field

0 Answers 60 Views
Grid
FranckSix
Top achievements
Rank 2
Iron
Iron
Veteran
FranckSix asked on 18 May 2023, 08:09 PM | edited on 18 May 2023, 08:11 PM
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
Telerik team
commented on 23 May 2023, 11:41 AM

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
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 23 May 2023, 01:43 PM

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
Telerik team
commented on 26 May 2023, 11:55 AM

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.

No answers yet. Maybe you can help?

Tags
Grid
Asked by
FranckSix
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or