将文本搜索添加到 Kendo Grid

Question

我是第一次尝试开源 Kendo Grid。我有基本的网格并运行得很好，但现在我需要添加一个搜索功能，搜索名字和姓氏。我正在尝试在 ajax 中执行此操作，但我遇到了一个错误：

错误：无法调用未定义的方法“读取”

我的代码：

        <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="index-grid"></div>        
   </div>



    $(document).ready(function () {


        var grid = $('#index-grid').kendoGrid({
            height: 370,
            sortable: true,
            scrollable: true,
            pageable: true,
            dataSource: {
                        pageSize: 8,  
                        transport: {
                                    read: "/Home/GetPeople",
                                    dataType:"json"
                                    }
                        },
            columns: [
                                { field: "FirstName", title: "First Name" },
                                { field: "LastName", title: "Last Name" },
                                { field: "Gender", title: "Gender" },
                                { field: "DOB", title: "Date of Birth", template: '#= kendo.toString(new Date(parseInt(DOB.substring(6))), "MM/dd/yyyy") #' },
                                { field: "IsStudent", title: "Is a Student?" }]
        });


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

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

应该很重要，但这是我的控制器（使用 asp MVC 3）：

    public JsonResult GetPeople(string fname, string lname)
    {
        if (((fname == "") && (lname == "")) || ((fname == null) && (lname == null)))
       {
                var peopleList = repo.GetPeople();

                return Json(peopleList, JsonRequestBehavior.AllowGet);
         }
        else
        {
            var personResult = repo.GetSearchResult(fname, lname);

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

Answer 1

问题是$("#grid").kendoGrid() 返回一个没有dataSource 字段的jQuery 对象。以下是获取客户端对象引用的方法：http://docs.kendoui.com/getting-started/web/grid/overview#accessing-an-existing-grid