or
@(Html.Kendo().Grid(Model.Items as IEnumerable<Holding>) .Name("KendoCGrid") .Columns(columns => { columns.Bound(e => e.SymbolDescription).Title("Security Name"); columns.Bound(e => e.Symbol).Title("Symbol"); columns.Bound(e => e.SecurityType).Title("Type"); }) .Sortable() .DataSource(dataSource=>dataSource .Ajax() .PageSize(50) .ServerOperation(false) ) 
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Redacted</title> <link href="/Content/bootstrap.css" rel="stylesheet" /> <link href="/Content/site.css" rel="stylesheet" /> <script src="/Scripts/jquery-1.9.1.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> <script src="/Scripts/bootstrap.js"></script></head><body> <link href="/Assets/css/kendo/kendo.common.min.css" rel="stylesheet" /> <link href="/Assets/css/kendo/kendo.default.min.css" rel="stylesheet" /> <script src="/Assets/js/kendo/kendo.core.min.js"></script> <script src="/Assets/js/kendo/kendo.userevents.min.js"></script> <script src="/Assets/js/kendo/kendo.data.min.js"></script> <script src="/Assets/js/kendo/kendo.treeview.min.js"></script> <div class="container"> <h1>Batch Reporting</h1> <div class="accordion" id="reports"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="reports" href="#dataExtract">Data Extract</a> </div> <div id="dataExtract" class="accordion-body collapse"> <div class="accordion-inner"> <form action="/Report/DataExtract" method="post"> <div style="height: 300px; overflow-y: scroll"> <div id="treeview"></div> </div> <div> <br /> <button class="btn " type="submit">Submit</button> </div> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> $("#treeview").kendoTreeView({ checkboxes: { checkChildren: true, name: "checkedItem[]" }, dataSource: [ { "id": 13, "hasChildren": true, "text": "csd", "items": [ { "id": 25, "hasChildren": true, "text": "School", "items": [ { "id": 39, "hasChildren": false, "text": "Class 1", "items": null, "expanded": false }, { "id": 48, "hasChildren": false, "text": "Class 2", "items": null, "expanded": false }, { "id": 90, "hasChildren": false, "text": "Class 3", "items": null, "expanded": false }, { "id": 85, "hasChildren": false, "text": "Class 4", "items": null, "expanded": false },], "expanded": false }], "expanded": true }] }); </script></body></html>public ActionResult DataExtract(string[] checkedItems){ // Do some really important stuff here... return RedirectToAction("Index", "Home");}I'm trying to make an autocomplete and I'm using Visual Studio for debugging. The autocomplete does ask for data, my code returns it then I get this from Visual Studio:
Microsoft JScript runtime error: Unable to get value of the property 'toLowerCase': object is null or undefinedfunction anonymous(d, __f, __o) {return (d.Title.toLowerCase().lastIndexOf('key', 0) == 0)}I'm guessing it is due to d.Title being undefined... BTW: key above was the search word typed into the autocomplete.
I'm creating the autocomplete like this:
// Search box. $("#searchBox").kendoAutoComplete({ minLength: 3, dataTextField: "Title", //JSON property name to use dataSource: new kendo.data.DataSource({ type: "json", //Specifies data protocol pageSize: 10, //Limits result set transport: { read: "/Search", parameterMap: function() { return { title: $("#searchBox").data("kendoAutoComplete").value() }; } } }) });
Here is the data returned:
[{"Title":"Doctor Who: The Trial of a Time Lord"},{"Title":"Doctor Who: The Key to Time"},{"Title":"Doctor Who: The Time Meddler"},{"Title":"Doctor Who: The End of Time"}]