I was able to get a simple grid fully functional based on the weapons video at http://www.kendoui.com/videos.aspx called Get Started with the KendoUi Data Source.
I built an .asmx web service in asp.net, and I am posting the code here.
My solution requires you to have jquery.js working on your html page, and for you to set up a .asmx file that supplies web services in JSON format to read, create/update, and delete a list of Japanese weapons. I leave it to the reader to implement their database connection of choice in C# code. Also, one must create the Weapons class in code or have it defined in a web service they subscribe to in the code.
Home.html page
JSON.asmx web service
I built an .asmx web service in asp.net, and I am posting the code here.
My solution requires you to have jquery.js working on your html page, and for you to set up a .asmx file that supplies web services in JSON format to read, create/update, and delete a list of Japanese weapons. I leave it to the reader to implement their database connection of choice in C# code. Also, one must create the Weapons class in code or have it defined in a web service they subscribe to in the code.
Home.html page
<!doctype html><html><head> <title>Demo</title> <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/kendo.all.min.js"></script></head><body> <table> <tr> <td> <h1> Weapons </h1> </td> </tr> </table> <div id="mainSplitter" style="height:300px"> <div id="LeftPane"> <h3> Create</h3> <dl> <dt>Name:</dt> <dd> <input type="text" id="create-name" /></dd> <dt>Description:</dt> <dd> <textarea rows="5" cols="20" id="create-description"></textarea></dd> <dd> <button id="create-weapon"> Create</button></dd> </dl> </div> <div id="MiddlePane"> <div id="weapons"> </div> </div> <div id="RightPane"> <h3> Edit</h3> <dl> <dt>Name:</dt> <dd> <input type="text" id="update-name" /></dd> <dt>Description:</dt> <dd> <textarea rows="5" cols="20" id="update-description"></textarea></dd> <dd> <span> <button id="update-weapon"> Update</button> <button id="delete-weapon"> Delete</button></span></dd> </dl> </div> </div> <script> $(document).ready(function () { $("#mainSplitter").kendoSplitter({ //It is best to set the height of a splitter in the div style in the html above. see <div id="mainSplitter" ...> //Make three panes in the three dives that comprise the splitter and sent their width in terms of percentage. panes: [{ size: "20%", resizable: false }, { size: "60%", resizable: false, scrollable: false }, { size: "20%", resizable: false }, ] }); var Weapon = kendo.data.Model.define({ id: "WeaponID" }) //All of the operations in the data source must be specified of type POST becaue we are using an .asmx service. dataSource = new kendo.data.DataSource({ transport: { read: { type: "POST", contentType: "application/json; charset=utf-8", url: "JSON.asmx/GetWeapons", dataType: "json" }, //I remove the create event because it would end up reading the data before it was saved. //create: { // type: "POST", // url: "JSON.asmx/UpdateWeapons", // success: function () // { // dataSource.read(); // } //}, update: { type: "POST", url: "JSON.asmx/UpdateWeapons" }, destroy: { type: "POST", url: "JSON.asmx/DeleteWeapons" } }, schema: { data: "d", model: Weapon } }); var selectedWeapon; $("#weapons").kendoGrid({ columns: [{ title: "Weapon", field: "Name" }, { title: "Description", field: "Description"}], dataSource: dataSource, selectable: true, change: function () { var id = this.select().data("id"); selectedWeapon = this.dataSource.get(id); $("#update-name").val(selectedWeapon.get("Name")); $("#update-description").val(selectedWeapon.get("Description")); }, scrollable: true, height: 300 }); //The javascript to create a new weapon $("#create-weapon").click(function () { var name = $("#create-name").val(); //If the name is empty don't save it. if (name == "") { alert("Please specify a name for the weapon."); return; } else { //A better approach that uses ajax and does the read after the data is successfully saved. $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "JSON.asmx/UpdateWeapons?Name=" + $("#create-name").val() + "&Description=" + $("#create-description").val(), success: function () { dataSource.read(); } }); //Suggested Approach by Kendo site that is flawed because the read will execute before new records are saved into the database. // //Add to the data source from the newly created fields. // dataSource.add({ Name: $("#create-name").val(), Description: $("#create-description").val() }); // //This will call the create method in the data source, because we just added a record. // dataSource.sync(); // setTimeout("dataSource.read()", 1000); //Wait one second before refreshing the datasource because the create method takes a second. //Clear the Create fields. $("#create-name").val(''); $("#create-description").val(''); } }); //The javascript to update a weapon $("#update-weapon").click(function () { selectedWeapon.set("Name", $("#update-name").val()); selectedWeapon.set("Description", $("#update-description").val()); dataSource.sync(); }); //The javascript to delete a weapon $("#delete-weapon").click(function () { dataSource.remove(selectedWeapon); dataSource.sync(); }); }); </script></body></html>JSON.asmx web service
using System.Web.Services;using System.Web.Script.Services;namespace JSONService4{ /// <summary> /// Summary description for JSON /// </summary> [WebService(Description = "An ASP.Net version 4.0 JSON web service.", Namespace ="http://localhost/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [ScriptService] public class JSON : System.Web.Services.WebService { [WebMethod(Description = "Returns the list of Japanese weapons.")] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public Weapons[] GetWeapons() { //Put code here to read from the database, but you must return a simple array[] of Weapons objects. This could even be a call to another .asmx service like Outsystems to do the dirty work.
} [WebMethod(Description = "Adds to or updates the list of Japanese weapons.")] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public void UpdateWeapons() { int weaponID = 0; //If we can't parse the WeaponID parameter then there isn't any, and this is a create. if (this.Context.Request["WeaponID"] != null) weaponID = int.Parse(this.Context.Request["WeaponID"].ToString()); string name = this.Context.Request["Name"]; string description = this.Context.Request["Description"]; //Put code here to connect to the database and do your update or insert, depending on if the id > 0 or id = 0. This could even be a call to another .asmx service like Outsystems to do the dirty work.
} [WebMethod(Description = "Deletes from the list of Japanese weapons.")] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public void DeleteWeapons() { int weaponID = 0; //If we can't parse the request then there isn't any, and this is a create. int.TryParse(this.Context.Request["WeaponID"].ToString(), out weaponID); string name = this.Context.Request["Name"]; string description = this.Context.Request["Description"]; //Put code here to connect to the database and delete the weapon from the Weapons table. This could even be a call to another .asmx service like Outsystems to do the dirty work. } }}