How to validate model on the server when Kendo grid is configured for ajax call?

2 posts, 0 answers
  1. Laksh
    Laksh avatar
    25 posts
    Member since:
    Mar 2011

    Posted 22 Jun 2015 Link to this post

    I’m using MVC Kendo grid and few drop down lists as filters and search button. Grid is bound using Ajax. The filters are defined outside of the grid. When user clicks on the search button i am passing the selected filter values to action method as Model, do the search and return the result. This is working fine when user selects the filter.
    However, One of the filter is required filter, so I have [Required] attribute on the model’s property. When user don’t select the required filter, it makes the GetData() action method as expected, I see ModelState is NOT valid as expected.
    But here im not sure what should I return when Model is not valid,
    Questions:
    I have validation summary on the layout page, how do I show model error in ValidationSummary without clearing the grid?When action method returns error, I don’t want to clear the existing result in the Grid. The error should display on top of the page.

    Note:  For brevity purpose my sample below showing only one filter. Also I’m not worrying about client side validation.

     Layout Page

     

    <html>
    <head>
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/kendo/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/kendo")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/jqueryval")
    </head>
    <body>   
        <div class="container body-content">     
            @Html.ValidationSummary()
            @RenderBody()
            <footer></footer>
        </div>
        @RenderSection("scripts", required: false)
    </body>
    </html>

     Index Page

    @model MyModel
                @{
                    ViewBag.Title = "Index";
                    Layout = "~/Views/Shared/_Layout.cshtml";
                }
                <h2>Index</h2>
                <div>
                    <br />
                    @Html.ListBoxFor(x => x.SelectedIDs, new MultiSelectList(Model.States, "ID", "Name"))
                    @Html.ValidationMessageFor(m => m.SelectedIDs)
                </div>
     
                <input id="btnSearch" type="submit" width="100" value="Search" />
                @(Html.Kendo().Grid<Person>()
                   .Name("grid")
                   .Columns(col =>
                   {
                   col.Bound(p => p.ID);
                   col.Bound(p => p.Name);
                   })
                   .DataSource(ds =>
                   ds.Ajax()
                   .Read(r => r.Action("GetData", "Working"))
                   .PageSize(3))
                   .Pageable()
                   .Sortable()
                   .AutoBind(false)
                )
                <script src="~/Scripts/Working.js"></script>

     

     JavaScript

    $(function () {
     
                    var myModel = {
                        SelectedIDs: []
                    };
                    
                    var dataSource = $("#grid").data("kendoGrid").dataSource;
                    dataSource.transport.options.read.data = getFilters;
     
                    $("#btnSearch").click(function () {
                        myModel.SelectedIDs = $("#SelectedIDs").val();
                        $("#grid").data("kendoGrid").dataSource.read();       
                        $("#grid").data("kendoGrid").refresh();
                    })
     
                    function getFilters() {
                        return myModel;
                    }
                })

     Controller

    public class WorkingController : Controller
                {
                    public ActionResult Index()
                    {
                        var model = new MyModel();
                        return View(model);
                    }
                     
                    public ActionResult GetData([DataSourceRequest]DataSourceRequest request, MyModel model)
                    {
                        if (!ModelState.IsValid)
                        {
                            // What should i return here so that Model error message will appear in ValidationSummary ???
                        }
     
                        return Json(MockData.GetPersons().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
                    }
                }

     

    Model

    public class MyModel
        {
            [Required(ErrorMessage = "State is required.")]
            public int[] SelectedIDs { get; set; }
     
            public IEnumerable<State> States
            {
                get
                {
                    return MockData.GetStatesWithAbbr();
                }
            }
     
            public IEnumerable<Person> Persons { get; set; }
        }

  2. Laksh
    Laksh avatar
    25 posts
    Member since:
    Mar 2011

    Posted 23 Jun 2015 in reply to Laksh Link to this post

    I found a solution

    http://stackoverflow.com/questions/14005773/use-asp-net-mvc-validation-with-jquery-ajax

    and then we can user datasource's error event to display returned messages in validation summary using jquery

    http://stackoverflow.com/questions/13653662/kendo-handling-errors-in-ajax-data-requests

Back to Top