This is a migrated thread and some comments may be shown as answers.

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

1 Answer 359 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mireille
Top achievements
Rank 1
Mireille asked on 11 Aug 2016, 01:06 PM
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>

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 15 Aug 2016, 01:15 PM
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.
Tags
Grid
Asked by
Mireille
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or