Kendo grid ajax returns data but not rendered, no errors

Question

MVC 3 web app using the open source kendo web.

The controller passes the data tot he view, and kendo renders perfect.

I want to be able to search the first and last names, so I have textboxes and a search button. The search button triggers an ajax call to a method with a json result. Using the web developer I I can see the request goes and comes back successfully, and contains data, but it does not display. I am using a table, not divs, so I shouldnt have to bind the data to the columns. I have seen some solutions but they all presume I have the mvc plugins, which I dont.

controller:

    [HttpGet]
    public ActionResult Index()
    {
        var model = new List<PersonViewModel>();

        model = repo.GetPeople();


        return View(model);
    }



    public JsonResult _SearchResult(string fname, string lname)
    {
        var personResult = repo.GetSearchResult(fname, lname);

        return Json(personResult, JsonRequestBehavior.AllowGet);
    }

}

View with jquery:

        <div id="search-index">
                <div class="editor-field">   
                    <label>First Name:</label>
                    @Html.TextBox("FirstName")

                    <label style = "margin-left: 15px;">Last Name:</label>
                    @Html.TextBox("LastName", "", new { style = "margin-right: 15px;" })
                </div>            
                <div id="search-controls-index">
                      <input type="button" id="searchbtn" class="skbutton" value="Search" />
                      <input type="button" id="addPersonbtn" class="skbutton" value="Add New Person" onclick="location.href='@Url.Action("AddPerson", "Person")'"/>
                </div>
        </div>

        <div id="result-list-index">            
             <table id="index-grid">
                   <thead>
                            <tr>
                                <th>
                                    First Name
                                </th>
                                <th>
                                    Last Name
                                </th>
                                <th>
                                    Gender
                                </th>
                                <th>
                                    Date of Birth
                                </th>
                                <th>
                                    Is a Student?
                                </th>
                                <th>
                                    Actions
                                </th>
                            </tr>
                    </thead>
                @if (Model.Count() < 1)
                {
                                            <tr>
                                            <td colspan=7>
                                                There are currently no trespassers in the trespass database - this is a partial view.
                                            </td>
                                            </tr>
                }
                else
                {
                    foreach (var item in Model)
                    {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.FirstName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.LastName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Gender)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.DOB)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.IsStudent)
                        </td>
                        <td>
                            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })
                        </td>
                    </tr>
                    }
                }

        </table>        



</div>

<script type="text/javascript">

    $(document).ready(function () {


            $('#index-grid').kendoGrid({
                height: 370,
                sortable: true,
                scrollable: true,
                pageable: true,
                dataSource: { pageSize: 8 }
            });


           $("#searchbtn").on('click', function () {
                var fsname = $("#FirstName").val();
                var ltname = $("#LastName").val();

                    $.ajax({
                        type: 'GET',
                        url: '@Url.Content("~/Home/_SearchResult")',
                        data: { fname: fsname, lname: ltname },
                        success: function (data) {
                            $('#index-grid').html(data);
                        },
                        error: function () {
                            $("#index-grid").html("An error occured while trying to retieve your data.");
                        }
                    });
        });
    });                    
 </script>

Not sure where I am going wrong. I am thinking it has something to do with the way the data is returned from the request, like there is some kind of compatibility issue, so it can't render. Let me know your ideas on where to look.

Answer 1

I ended up here since had a similar issue, although I was using the MVC wrapper for the grid. No error, JSON returned, grid didn't returned anything. In the end, it turned out, i forgot one simple thing in my controller method, that returned data for the grid.

My method looked something like this:

public JsonResult _SearchResult([DataSourceRequest]DataSourceRequest request)
{
    var personResult = repo.persons();

    return Json(personResult.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

The "ToDataSourceResult" call was missing. Adding it fixed the issue. This changed the format of returned JSON to something like:

{"Data":[],"Total":0,"AggregateResults":null,"Errors":null}

Now to your problem:

You are trying to insert JSON in the DOM, and are not using kendo grid (or data source) to update itself. Take a look at the demos here: http://demos.kendoui.com/web/grid/remote-data.html