Grid inCell edit mode with server side validation.

3 posts, 0 answers
  1. Martin
    Martin avatar
    7 posts
    Member since:
    May 2016

    Posted 02 Sep 2016 Link to this post


    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 :

              .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.Custom().Name("RepartirTemps").Text("Répartir").HtmlAttributes(new { id = "RepartirTemps", @class = "k-plus" }).Url("#");
              .Editable(editable => editable.Mode(GridEditMode.InCell))
              .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
              .Events(events => events.DataBound("onDataBound"))
              .Events(events => events.Edit("onEdit"))
              .DataSource(dataSource => dataSource
                  .Events(e => e.Change("onChange"))
                  .Events(e => e.Error("onError"))
                  .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 :

    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
                    db.Entry(entity).State = EntityState.Modified;
        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!



  2. Martin
    Martin avatar
    7 posts
    Member since:
    May 2016

    Posted 02 Sep 2016 Link to this post

    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 }));


  3. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 06 Sep 2016 Link to this post

    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.

    Konstantin Dikov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top