Kendo Grid Pop-up Validation

2 posts, 0 answers
  1. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 15 Mar 2016 Link to this post

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

     

     

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 18 Mar 2016 Link to this post

    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:
    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top