Need a validation summary in a kendo grid edit pop-up

2 posts, 0 answers
  1. Mireille
    Mireille avatar
    2 posts
    Member since:
    Apr 2016

    Posted 11 Aug Link to this post

    Hi,
    I have a kendo grid to display some editable data.  To edit the data, an edit pop-up is used.  The pop-up displays a MVC editor template.
    I need a validation summary section at the top of the pop-up, to display all the required field validations.  When I add the MVC validationsummary declaration
    in the editor template, it doesnt work (the errors are not displayed at the top of the pop-up).  I dont know how to do it, can someone tell me how to do it ?
    There is the kendo grid declaration code :
            @(Html.Kendo().Grid(Model.Customers)
          .Name("Customers")
          .Columns(columns =>
          {
              columns.Bound(p => p.Id).Visible(false);
              columns.ForeignKey(p => p.LevelId, Model.Levels, "Id", "Text");
              columns.Bound(p => p.Name);
              columns.Bound(p => p.Comment).Sortable(false).Filterable(false);
              columns.Command(command =>
              {
                  command.Destroy().Text(" ").Text(" ").HtmlAttributes(new { @class = "k-icon-only" });
                  command.Edit().UpdateText(Res.SAVE).CancelText(Res.CANCEL).Text(" ").HtmlAttributes(new { @class = "k-icon-only" });
              }).Width(80).HtmlAttributes(new { @class = "align-right" });
          })
          .ToolBar(toolbar => toolbar.Create().Text("").HtmlAttributes(new { @class = "k-icon-only" }))
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Customer"))
        .Navigatable()
        .Filterable()
        .Sortable()
        .Events(p => p.Edit("OnEdit").Save("OnSave"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                model.Id(p => p.LevelId);
            })
            .ServerOperation(false)
                .Create(update => update.Action("Create", "Program"))
                .Update(update => update.Action("Update", "Program"))
                .Destroy(destroy => destroy.Action("Delete", "Program"))
            )
            .HtmlAttributes(new { @class = "k-fixed-grid" })
            )
    There is the pop-up editor template code :
    @model CustomerViewModel
    @Html.ValidationSummary()
    <div class="row hl-pad-bottom-sm">
        <div class="col-xs-12 hl-label-bold">@Html.DisplayNameFor(x => x.Id)</div>
        <div class="col-xs-12">
            @(
                Html.Kendo().ComboBoxFor(m => m.Id)
                    .DataTextField("Text")
                    .DataValueField("Id")
                    .AutoBind(true)
                    .Filter(FilterType.StartsWith)
                    .DataSource(source =>
                    {
                        source.Custom()
                            .Type("aspnetmvc-ajax")
                            .ServerFiltering(true)
                            .Transport(transport =>
                            {
                                transport.Read("Customers_Read", "Program");
                            })
                            .Schema(schema =>
                            {
                                schema.Data("Data")
                                    .Total("Total");
                            });
                    })
                    .HtmlAttributes(new { style = "width:100%", @class= "hideArrow" })
            )
        </div>
    </div>
  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    114 posts

    Posted 15 Aug Link to this post

    Hello Mireille,

    To use client-side validation and display the validation messages in the pop editor of the Kendo UI Grid for ASP.NET MVC,use the Html helper ValidationMessageFor, e.g:

    @(Html.TextBoxFor(m => m.Name))
    @Html.ValidationMessageFor(m => m.Name)

    An overview article for Validation with ASP.NET MVC at:

    http://docs.telerik.com/kendo-ui/aspnet-mvc/validation

    An example project with a custom pop-up editor is available at:

    https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/custom-popup-editor/KendoUIMVC5/Views/Home/EditorTemplates/Person.cshtml 

    Regards,
    Alex
    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.
  3. Kendo UI is VS 2017 Ready
Back to Top