Grid ajax binding, re-binding and Json issues

[Software]

My app is pretty straight-forward: It's a kendo pageable grid, with a search form above it which refines the data displayed in the grid each time the search button is clicked based on the criteria specified in the form fields.  Here are my current issues I could use some help with:

1. I have a primary action method I use to get my IEnumerable collection for the grid, which takes the DataSourceRequest as a parameter, as instructed in the docs.  This method returns a JsonResult.  If I call this method in my Index action, I get this error:  "This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet."  If I change the method to allow Get, I get a page full of json text instead of the grid.
2. If I instead put the collection into the Index action and call the View, it works fine, but if I do a search, or any kind of paging the grid resets to the full colection every time.
3. I have some code that toggles the css class on $(document).ready().  It works great, but as soon as I go to the next page it's broken.  How do I get this to work through all the paging, filtering, grouping, etc.?
4. I have a "Reset" button on the search form that is used to reset the values of the form and reset the grid to the full collection of data.  Right now the way I am doing that is to call the Index view again, which seems to me to be an inefficient way to go about this.  I can reset the fields using Javascript, but I'm not sure how to re-bind the grid?

Here's my code, and thanks so much for the help!

View:

@model IEnumerable<WatchSummaryViewModel>

 

@{

    ViewBag.Title = "Watch Summaries";

    ViewBag.OrgId = 18;

    ViewBag.FullName = "USER, TEST";

}

 

<h2>@ViewBag.Title</h2>

 

@Html.ActionLink("Create New", "Create")

 

<div id="container">

    <div id="searchForm">

        @using (Ajax.BeginForm("Search", "Home", new AjaxOptions { HttpMethod = "POST" })) {

        <table style="width:911px;padding:7px;margin-bottom:10px;">

            <tr>

                <td>

                    <label class="label" for="location">Location</label>

                    @(Html.Kendo().AutoComplete().Name("location").BindTo(WatchSummaryBL.DoGetLocations()).HtmlAttributes(new { style="width:200px" }).Placeholder("Start typing a location"))

                </td>

                <td>

                    <label class="label" for="reportNum">Report Number</label>                   

                    @Html.TextBox("reportNum", "", new { style = "width:140px;vertical-align:middle;" })

                </td>

                <td>

                    <label class="label">Officer</label>

                    @{

                        var officers = OfficersCollection.DoGetOfficerList((int)ViewBag.OrgId);

                        var list = officers.Select(officerInfo => new SelectListItem {Text = officerInfo.FullNameWithBadgeClass.ToUpper(), Value = officerInfo.OfficerId.ToString()}).ToList();

                    }                   

                    @(Html.Kendo().DropDownList()

                        .BindTo(list)

                        .DataTextField("Text")

                        .DataValueField("Value")

                        .Name("officerId")

                        .Height(300)                                               

                        .HtmlAttributes(new { style = "width:400px"})

                      ) 

                </td>           

            </tr>

            <tr>

                <td>

                    <label class="label" for="xref">Inmate XREF</label>

                    @Html.TextBox("xref", "", new { style = "width:200px;vertical-align:middle;" })

                </td>

                <td>

                    <label class="label">Incident Days</label>

                    @{

                        var days = new List<SelectListItem>

                            {

                                new SelectListItem {Text = "All", Value = "365"},

                                new SelectListItem {Text = "30 days", Value = "30"},

                                new SelectListItem {Text = "60 days", Value = "60"},

                                new SelectListItem {Text = "90 days", Value = "90", Selected = true},

                                new SelectListItem {Text = "6 months", Value = "180"}

                            };                       

                    }

                    @(Html.Kendo().DropDownList()

                        .BindTo(days)

                        .DataTextField("Text")

                        .DataValueField("Value")

                        .Name("days")

                      ) 

                </td>

                <td>

                    <label class="label">Incident Types</label>

                    @{

                        var types = new List<SelectListItem>

                            {

                                new SelectListItem {Text = "-- SELECT --", Value = "-1", Selected = true},

                                new SelectListItem {Text = "ASSAULT", Value = "1"},

                                new SelectListItem {Text = "C.E.R.T. EXERCISE", Value = "2"},

                                new SelectListItem {Text = "SHAKEDOWN", Value = "3"},

                                new SelectListItem {Text = "C.E.R.T. CALL-OUT", Value = "4"},

                                new SelectListItem {Text = "POD/CELL/BARRACK INSPECTION", Value = "5"},

                                new SelectListItem {Text = "FIRE", Value = "6"},

                                new SelectListItem {Text = "OTHER", Value = "7"},

                                new SelectListItem {Text = "FIRE DRILL", Value = "8"},

                                new SelectListItem {Text = "INTELLIGENCE", Value = "9"}

                            };

                    }

                    @(Html.Kendo().DropDownList()

                        .BindTo(types)

                        .DataTextField("Text")

                        .DataValueField("Value")

                        .Name("incidentTypeId")

                        .HtmlAttributes(new { style = "width:300px"})

                      ) 

                </td>           

            </tr>

            <tr>

                <td colspan="3">

                    <button type="button" id="btnSearch" value="Search" onclick="Search();">Search</button>

                    <button type="button" id="btnReset" value="Reset" onclick="Reset();">Reset</button>

                </td>

            </tr>

        </table>

        }

    </div>

    @(Html.Kendo().Grid(Model)

          .Name("tblGrid")         

          .Columns(columns =>

              {

                  columns.Bound(w => w.Id).Hidden();

                  columns.Bound(w => w.IncidentType).Width(160);

                  columns.Bound(w => w.Location).Width(180);

                  columns.Bound(w => w.IncidentDateTime).Width(120).Format("{0: MM/dd/yyyy H:mm tt}");

                  columns.Bound(w => w.PostDateTime).Width(120).Format("{0: MM/dd/yyyy H:mm tt}");

              })           

          .Events(events => events.Change("gridChange"))         

          .Pageable()

          .Sortable()         

          .Selectable()         

          .DataSource(dataSource => dataSource

                                        .Ajax()                                       

                                        .Model(model => model.Id(w => w.Id))

                                        .PageSize(15)                                       

                                        .Read(read => read.Action("GetSummaries","Home")

                                            .Data("searchParams")

                                        )                                       

                                        .Create("Editing_Create", "Home")

          ))

</div>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#officerId").width("220px");

             

            $("#tblGrid tbody tr").hover(function () {

                $(this).toggleClass("k-state-hover");

            });

        });

         

        function gridChange() {

            var propId = this.select().closest("tr").find("td:eq(0)").text();

            location.href = kendo.format('@(Server.UrlDecode(Url.Action("Details", "Home", new { id = "{0}" })))', propId);

        }

         

        function Reset() {

            location.href = '@(Server.UrlDecode(Url.Action("List", "Home")))';

        }

         

        function Search() {

            var loc = $("#location").val();

            var report = $("#reportNum").val();

            var officer = $("#officerId").val();

            var inmateXref = $("#xref").val();

            var daysBack = $("#days").val();

            var incidentType = $("#incidentTypeId").val();

 

            location.href = kendo.format('@(Server.UrlDecode(Url.Action("Search","Home", new { location = "{0}", reportNum = "{1}", officerId = "{2}", xref = "{3}", days = "{4}", incidentTypeId = "{5}" })))', loc, report, officer, inmateXref, daysBack, incidentType);

        }

         

        function searchParams() {

            var location = $("#location").val();

            var report = $("#reportNum").val();

            var officerId = $("#officerId").val();

            var xref = $("#xref").val();

            var days = $("#days").val();

            var incidentType = $("#incidentTypeId").val();

 

            return {

                location: location,

                reportNum: report,

                officerId: officerId,

                xref: xref,

                days: days,

                incidentTypeId: incidentType

            };

        }

    </script>

Controller:

namespace WatchSummaries.Kendo.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index([DataSourceRequest] DataSourceRequest request)

        {

            return GetSummaries(request);

//            return View("List", GetAllSummaries());

        }

 

        public ActionResult List([DataSourceRequest] DataSourceRequest request)

        {

            return GetSummaries(request);

//            return View(GetAllSummaries());

        }

 

        public ActionResult Create()

        {

            ViewBag.FullName = SessionUser.CurrentUser != null ? SessionUser.CurrentUser.FullName : "USER, TEST";

            return View();

        }

 

        private static IEnumerable<WatchSummaryViewModel> GetAllSummaries()

        {

            var summaries = DoGetWatchListApproved(90, 18);

            var allSummaries = new List<WatchSummaryViewModel>();

            if (summaries != null && summaries.Count > 0)

                allSummaries.AddRange(summaries.Select(summary => new WatchSummaryViewModel

                {

                    Id = summary.ID,

                    IncidentDateTime = summary.WatchDateTime,

                    IncidentType = summary.IncidentType,

                    InmateXref =

                        summary.InmateInfo != null && summary.InmateInfo.Count > 0 ? summary.InmateInfo[0].XREF : -1,

                    Location = summary.Location,

                    OfficerId = summary.OfficerId,

                    PostDateTime = summary.PostDateTime,

                    ReportNumber = summary.ReportNumber

                }));

 

            return allSummaries;

        }

 

        public ActionResult DoGetInmateName(int xref)

        {

            var name = Inmate.DoGetInmateName(xref);

            return Content(!string.IsNullOrEmpty(name) ? name : "none found");

        }

 

        [HttpPost]

        public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<WatchSummaryInfo> watchSummaries)

        {

            var results = new List<WatchSummaryInfo>();

 

            if (watchSummaries != null && ModelState.IsValid)

            {

                results.AddRange(watchSummaries);

            }

 

            return Json(results.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

        }

 

        [HttpPost]

        public ActionResult GetSummaries([DataSourceRequest] DataSourceRequest request)

        {

            var allSummaries = GetAllSummaries();

            var result = allSummaries.ToDataSourceResult(request);

             

            return Json(result);

        }

 

        public ActionResult Search([DataSourceRequest] DataSourceRequest request, string location, string reportNum, int? officerId, int? xref, int? days, int? incidentTypeId)

        {

            List<WatchSummaryInfo> summaries;

            try

            {

                var blnIsAssault = false;

                var blnIsCertExcercise = false;

                var blnIsShakeDown = false;

                var blnIsFireDrill = false;

                var blnIsCertCallout = false;

                var blnIsInspection = false;

                var blnIsFire = false;

                var blnIsIntelligence = false;

                var blnIsOther = false;

 

                if (incidentTypeId.HasValue)

                    switch (incidentTypeId.Value)

                    {

                        case 1:

                            blnIsAssault = true;

                            break;

                        case 2:

                            blnIsCertExcercise = true;

                            break;

                        case 3:

                            blnIsShakeDown = true;

                            break;

                        case 4:

                            blnIsCertCallout = true;

                            break;

                        case 5:

                            blnIsInspection = true;

                            break;

                        case 6:

                            blnIsFire = true;

                            break;

                        case 7:

                            blnIsOther = true;

                            break;

                        case 8:

                            blnIsFireDrill = true;

                            break;

                        case 9:

                            blnIsIntelligence = true;

                            break;

                    }

 

                days = days > 0 ? days : 0;

                officerId = officerId > 0 ? officerId : 0;

                xref = xref > 0 ? xref : 0;

 

                if (location == "Start typing a location") location = string.Empty;

 

                summaries = WatchSummaryBL.DoGetWatchListBySearch(officerId.Value,xref.Value,location,reportNum,days.Value, blnIsAssault, blnIsCertCallout, blnIsCertExcercise, blnIsFire, blnIsFireDrill, blnIsInspection, blnIsIntelligence,blnIsOther,blnIsShakeDown, 18).ToList();

            }

            catch (Exception ex)

            {               

                throw new Exception(ex.Message);

            }

 

            var filtered = new List<WatchSummaryViewModel>();

            try

            {

                foreach (var summary in summaries)

                {

                    var sum = new WatchSummaryViewModel

                    {

                        Id = summary.ID,

                        IncidentDateTime = summary.WatchDateTime,

                        IncidentType = summary.IncidentType,

                        Location = summary.Location,

                        OfficerId = summary.OfficerId,

                        PostDateTime = summary.PostDateTime,

                        ReportNumber = summary.ReportNumber

                    };

 

                    if (summary.InmateInfo != null && summary.InmateInfo.Count > 0)

                        sum.InmateXref = summary.InmateInfo[0].XREF;

 

                    filtered.Add(sum);

                }

            }

            catch (Exception ex)

            {

                throw new Exception(ex.Message);

            }

                         

            return View("List", filtered);

        }

 

        public ActionResult Details(int id)

        {

            var summary = DoGetWatchDetails(id);

            return View(summary);

        }

}

Viewmodel:

namespace WatchSummaries.Kendo.Models

{

    public class WatchSummaryViewModel

    {

        public int Id { get; set; }

        public string Location { get; set; }

        public DateTime? IncidentDateTime { get; set; }

        public DateTime? PostDateTime { get; set; }

        public string IncidentType { get; set; }

        public string ReportNumber { get; set; }

        public int InmateXref { get; set; }

        public string OfficerId { get; set; }

        public int IncidentDays { get; set; }

    }

}

Thanks again for your help!

Eddie

[Mark]

I was having a similar problem, and placed a support ticket into Telerik - Kendo Support.  For us, it ended up being an incompatibility between the latest version of Kendo UI and jQuery (1.9.0).  Installation of jQuery Migrate - v1.0.0 took care of that.

If you use bundles in MVC, your BundleConfig section for jQuery might look something like this after you add jquery-migrate-1.0.0.js to your Scripts folder:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

            "~/Scripts/jquery-{version}.js",

            "~/Scripts/jquery-migrate-1.0.0.js"));

I was told that jquery-migrate-1.0.0.js MUST go AFTER your loading of other jQuery libraries.

Hope that helps.

[Zachary]

I know this is an older thread, but I had this issue and spent 3 hours debugging it.

All the issue was for me was a .click event inside of one of the command columns not tying out to a method. It was invaliding some portion of the grids ability to finish writing the proper AJAX code. It P***** me off for 3 hours.

 

Hopefully this helps someone else out there...