[Solved] Kendo Grid Pop-up Validation

[Chuck]

Hello,

I've been running into a problem when trying to validate the pop-ups from a grid edit.

When I have everything set up as in the code below, errors from the controller are returned as a string on a new page, rather than to the ValidationSummary or ValidationMessage Tags.

Here is the PartialView used as a template for the Pop-up editor

@model CopyOrder
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<div class="EditorContainer">
    <div id="OrderEditorSubHeader">Order <b>Information</b></div>
@using (Html.BeginForm("OrderCopy", "OrderManagement")){
    <div class="form-group">
        @Html.Label("Copy Order ID")
        @(Html.Kendo().ComboBoxFor(m=>m.CopyOrderID)
        //.Name("CopyOrderID")
        .Filter("contains")
        .Placeholder("Please Select")
        .DataSource(dataSource => dataSource.Read(read => read.Url("/OrderManagement/OrderID_Select")))
        .DataTextField("Text")
        .DataValueField("Value")
        .Suggest(true)
        .HtmlAttributes(new { @class = "form-control" }))
        @Html.ValidationMessageFor(m => m.CopyOrderID)
    </div>

    <div class="form-group">
        @Html.Label("Copy To Customer")
        @(Html.Kendo().ComboBoxFor(m=>m.CopyCustomerID)
        //.Name("CopyCustomerID")
        .Filter("contains")
        .Placeholder("Please Select")
        .DataSource(dataSource =>
            dataSource.Read(read =>
                {
                    read.Action("AvailableCustomers_Select", "OrderManagement")
                        .Data("filterAvailableCustomers");
                })
            .ServerFiltering(true)
            )
        .DataTextField("Text")
        .DataValueField("Value")
        .Suggest(true)
        .Enable(false)
        .AutoBind(false)
        .ValuePrimitive(true)
        .CascadeFrom("CopyOrderID")
        .HtmlAttributes(new { @class = "form-control" }))
        @Html.ValidationMessageFor(m => m.CopyCustomerID)
    </div>
    <input id="submitbtn" type="submit" value="Save" />

    @Html.ValidationSummary(false)
}

Here is the Controller code

[HttpPost]
        public ActionResult OrderCopy([DataSourceRequest] DataSourceRequest request, Ops.Models.CopyOrder Copy)
        {
            var db = new Ops.Models.Ops_Entities();

            if (ModelState.IsValid)
            {

                try
                {
                    //A bunch of Linq Queries here

                    //One of them causes a NullReference Exception

                    db.OrderGroups.Add(newGroup);
                    db.SaveChanges();

                    return RedirectToAction("Orders");
                }
                catch (NullReferenceException)
                {

                                                     //Code reaches this point when I trigger the error in question

                                                     //Problem is that when it is returned, a new page is  opened just displaying the error message as a string

                    ModelState.AddModelError(String.Empty, "Invalid Selection");
                    var failmodel2 = (new List<Ops.Models.CopyOrder> { Copy }).ToList().ToDataSourceResult(request, ModelState);
                    return Json(failmodel2, JsonRequestBehavior.AllowGet);
                }
            }

            var failmodel = new List<Ops.Models.CopyOrder>();
            return Json(failmodel.ToDataSourceResult(request, ModelState));
        }

and my kendo grid 

@(Html.Kendo().Grid<Ops.Models.vw_Orders>()
            .Name("Orders")
            .EnableCustomBinding(true)
            .Columns(columns =>
            {

                columns.Bound(p => p.SchoolYear)
                    .Title("Year");
                columns.Bound(p => p.Company)
                    .Title("School Name")
                    .ClientTemplate("<span><a href='/CustomerManagement/SchoolInfo?CustomerID=#=CustomerID#'>#=Company#</a></span>");
                columns.Bound(p => p.MasterOrderID)
                    .Title("Order ID");
                columns.Bound(p => p.GroupName);
                columns.Bound(p => p.Type);
                columns.Bound(p => p.Program);
                columns.Bound(p => p.Status)
                    .ClientTemplate("<span>#=Status#</span>");
                columns.Bound(p => p.AddUser);
                columns.Bound(p => p.SalesTerritory)
                    .Title("Territory");
            })
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("OrderGroupEdit"))
            .ToolBar(toolBar =>
            {
                toolBar.Create().Text("Add Order");
                toolBar.Custom().Text("Copy Order").HtmlAttributes(new { id = "openCopyWindow" });
                toolBar.Custom().Text("Add Service Item").HtmlAttributes(new { id = "openServiceItemWindow" });
                toolBar.Custom().Text("Get Job Master").HtmlAttributes(new { id = "openJobMastWindow" });
            })
            .Pageable(o =>
            {
                o.PageSizes(new[] { 11, 20, 50, 100, 1000 });
                o.ButtonCount(4);
            })
            .Sortable()
            .Filterable(f =>
                f.Operators(o =>
                    o.ForString(d => d
                        .Clear()
                        .Contains("Contains")
                        .IsEqualTo("Equal To")
                    )
                )
            )
            .Events(e => e.DataBound("onDataBound"))
            .ClientDetailTemplateId("OrderDetails")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model => model.Id(m => m.MasterOrderID))
                .PageSize(100)
                .Read(read => read.Action("OrderSearch", "OrderManagement"))
                .Create(create => create.Action("OrderCreate", "OrderManagement"))
                .ServerOperation(true)
            )
        )

@(Html.Kendo().Window()

    .Name("window")

    .Title("Copy Order")

    .Content("")

    .LoadContentFrom("CopyOrder", "OrderManagement")

    .Draggable()

    .Visible(false)

    .Width(800)

    //.Events(e => e.Close("ManualWindow_close"))

)

and the js opening the window

$(document).ready(function () {
        $("#openCopyWindow").click(function (e) {
            e.preventDefault();
            var window = $("#window").data("kendoWindow");
            window.center().open();
        });
    })

 

 

[Georgi Krustev]

Hello Chuck,

In general, the Grid widget uses Ajax requests to communicate with the server when an item is updated/created.

I noticed that you are placing the popup editor form inside a regular HTML Form element. This definitely will post the whole page. What I would suggest you use an editor form that is not put in HTML Form element. You can find a detailed information how to do that here:

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/custom-popup-editor

Regards,
Georgi Krustev
Telerik