Grid inCell edit mode with server side validation.

[Martin]

Hi,

I search how to show server validation error in a Grid like the client validation  (see image in attach file for example).

My grid is a InCell edit mode.

This is my grid code :

@(Html.Kendo().Grid<Mentorat.Models.Intervention>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Bound(c => c.Date_Intervention).Title("Date").Format("{0:yyyy/MM/dd HH:mm:ss}").Width(130).ClientGroupFooterTemplate("#= count # intervention(s)").ClientFooterTemplate("#= count # intervention(s)");
              //columns.Bound(c => c.Date_Intervention).Width(130).Title("Date").ClientGroupFooterTemplate("#= count # intervention(s)").ClientFooterTemplate("#= count # intervention(s)").HtmlAttributes(new { @class = "templateCell" }).ClientTemplate((
              //    @Html.Kendo().DateTimePicker().Name("date_#=No_Intervention#").Format("{0:yyyy/MM/dd HH:mm}").HtmlAttributes(new { data_bind = "value:Date_Intervention" }).ToClientTemplate()).ToHtmlString()
              //);
              columns.Bound(c => c.Duree_Intervention).Title("Durée (min.)").Width(70).ClientGroupFooterTemplate("Total : #= kendo.format('{0:0.00}', sum/60)# hrs").ClientFooterTemplate("Total : #= kendo.format('{0:0.00}', sum/60)# hrs");
              columns.ForeignKey(c => c.No_Mentore_Intervention, (System.Collections.IEnumerable) ViewData["ListeMentor"], "No_Mentore", "NomComplet_Mentore").Title("Mentoré").Width(160).ClientGroupHeaderTemplate("#= getHeaderMentores(value,data)#");
              columns.Bound(c => c.Description_Intervention).Title("Description").Width(300);
              columns.Command(command => { command.Destroy(); }).Width(65);
          })
          .ToolBar(toolbar =>
          {
              toolbar.Create();
              toolbar.Custom().Name("RepartirTemps").Text("Répartir").HtmlAttributes(new { id = "RepartirTemps", @class = "k-plus" }).Url("#");
              toolbar.Save();
              toolbar.Excel();
          })
          .Editable(editable => editable.Mode(GridEditMode.InCell))
          .Pageable()
          .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
          .Groupable()
          .Events(events => events.DataBound("onDataBound"))
          .Events(events => events.Edit("onEdit"))
          .DataSource(dataSource => dataSource
              .Ajax()
              .Events(e => e.Change("onChange"))
              .Events(e => e.Error("onError"))
              .Batch(true)
              .PageSize(100)
              .Model(model => model.Id(p => p.No_Intervention))
              .Read(read => read.Action("Interventions_Read", "Interventions"))
              .Create(create => create.Action("Interventions_Create", "Interventions"))
              .Update(update => update.Action("Interventions_Update", "Interventions"))
              .Destroy(destroy => destroy.Action("Interventions_Destroy", "Interventions"))
              .ServerOperation(false) //nouveau....
          .Aggregates(ag =>
           {
               ag.Add(p => p.Duree_Intervention).Sum();
               ag.Add(p => p.Date_Intervention).Count();
           })
      )
)

This is my controller update code :

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Interventions_Update([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<Intervention> interventions)
{
    var entities = new List<Intervention>();

    if (interventions != null && ModelState.IsValid)
    {
        if (ValiderGrid(interventions))
        {
            foreach (var intervention in interventions)
            {
                var entity = new Intervention
                {
                    No_Intervention = intervention.No_Intervention,
                    Date_Intervention = intervention.Date_Intervention,
                    No_Mentor_Intervention = (int) Session["intNoMentor"],
                    No_Mentore_Intervention = intervention.No_Mentore_Intervention,
                    Duree_Intervention = intervention.Duree_Intervention,
                    Description_Intervention = intervention.Description_Intervention
                };

                entities.Add(entity);
                db.Interventions.Attach(entity);
                db.Entry(entity).State = EntityState.Modified;
            }
            db.SaveChanges();
        }
    }

    var resultData = new[] { interventions };
    return Json(resultData.AsQueryable().ToDataSourceResult(request, ModelState));
}


private Boolean ValiderGrid(IEnumerable<Intervention> interventions)
{
    foreach (var intervention in interventions)
    {
        if(intervention.Date_Intervention == null)
        {
            ModelState.AddModelError("Date_Intervention", "Vous devez inscire une date.");
        }
    }

    return ModelState.IsValid;
}

I add in attach file a capture of my action error return.

 

i tried lot of solution with the error events. Each solution have a loop with this property "e.errors.length" but .lenth is undefined.

 

it is posible to show server error in the gird like client side error? Or i can only print a error message in a popup or in a div?

 

Thank for your help!

 

 

[Martin]

Ok i found a solution and it work : solution

If you have a better solution (out-the-box and not a custom one) i will appreciate

 

but if not... for that custom solution i had to add this to my columns.bound : .ClientTemplate("#=Date_Intervention#<span data-valmsg-for='Date_Intervention'></span>")

it is possible to attach error message without to add a clienttemplate to my column?

 

if i don't had clienttemplate this code will not work :

 

function showMessage(container, name, errors, id) {
    var validationMessageTmpl = kendo.template($("#message").html());

    //add the validation message to the form
    container.find("[data-valmsg-for=" + name + "]").replaceWith(validationMessageTmpl({ field: name, message: errors, id: id }));
}

Thank!

[Konstantin Dikov]

Hello Martin,

Handling the error event of the dataSource is the proper way for achieving the desired server validation. As for the other question, you should be able to avoid the ClientTemplate and use the "container" from the example to append custom element with jQuery that will display the error message to the end user. 

If any further assistance is needed on this matter, please do not hesitate to contact us again.


Regards,
Konstantin Dikov
Telerik by Progress