Add Text Search to Kendo Grid - asp.net-mvc

Question

I am trying out the open source Kendo Grid for the first time. I have the basic grid up and running just fine, but now I need to add a search feature, with a search on first and last names. I am trying to do it in ajax but I am stuck on an error:
Error: Cannot call method 'read' of undefined
my code:
<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.");
}
});
});
});
Should matter, but here is my controller (using 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

The problem is that $("#grid").kendoGrid() returns a jQuery object which doesn't have a dataSource field. Here is how to get a reference to the client-side object: http://docs.kendoui.com/getting-started/web/grid/overview#accessing-an-existing-grid