or
<!doctype html> <html> @{ ViewBag.Title = "OnTime Sample"; } <head> <title>Kendo UI Web</title> <link href="~/styles/kendo.common.min.css" rel="stylesheet" /> <link href="~/styles/kendo.default.min.css" rel="stylesheet" /> <script src="~/js/jquery.min.js"></script> <script src="~/js/kendo.web.min.js"></script> </head> <body> <div class="form"> <div class="selector"> Edit Product: <input type="text" id="onTimeIDs" /> </div> <div id="container" class="container"> <ul> <li> <label> OnTime ID</label> <span data-bind="text:OnTimeID"></span></li> <li> <label> Description</label> <input type="text" class="k-textbox" data-bind="value: Description" /></li> <li> <label> Status</label> <input type="text" class="k-textbox" data-bind="value: Status" /></li> </ul> <button id="save"> Save</button> </div> </div> <script> var crudServiceBaseUrl = "/Services", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/OnTimeIDs_Get", dataType: "json" }, update: { url: crudServiceBaseUrl + "/OnTimeIDs_Update", type: "POST", dataType: "json" }, parameterMap: function (options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; } } }, batch: true, schema: { model: { id: "OnTimeID", fields: { OnTimeID: { editable: false, nullable: true }, Description: { type: "string" }, Status: { type: "string" } } } } } ); $("#onTimeIDs").kendoDropDownList({ dataSource: dataSource, dataTextField: "Description", dataValueField: "OnTimeID", change: function () { var model = dataSource.get(this.value()); kendo.bind($("#container"), model); } }).data("kendoDropDownList") .one("dataBound", function () { kendo.bind($("#container"), dataSource.view()[0]); }); $("button").click(function () { dataSource.sync(); }); </script> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MVCTimeCard.Models; namespace MVCTimeCard.Controllers { public class ServicesController : Controller { public ActionResult OnTimeIDs_Get() { List<OnTimeItem> otiList = new List<OnTimeItem>() { new OnTimeItem {OnTimeID = 123, Description = "Altamed staging issue", Status = "Open"}, new OnTimeItem {OnTimeID = 456, Description = "HILL staging issue", Status = "Open"}, new OnTimeItem {OnTimeID = 789, Description = "PPMSI staging issue", Status = "Open"} }; return Json(otiList, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult OnTimeIDs_Update( IEnumerable< OnTimeItem> otis) { return Json(otis, JsonRequestBehavior.AllowGet); } } } .Filterable(fltr => fltr.Extra(false).Messages(m => m.IsTrue(" Yes").IsFalse(" No")).Operators(op => op.ForString(str => str.Clear()))))@(Html.Kendo().Grid<Extranet.Web.Models.UserListViewModel.UserList>(Model.Users).Name("Grid").Columns(columns => { columns.Bound(u => u.UserView.UserName); columns.Bound(u => u.UserView.Name); columns.Bound(u => u.UserView.UserRole); columns.Bound(u => u.UserView.CreatedOn); columns.Template(@<button class="k-button" value="@Url.Action("EditUser")/@item.UserView.ID">Edit</button>) .ClientTemplate("<button value='" + Url.Action("EditUser", "Admin") + "/#=ID#>Edit</button>"); }) .Pageable() .Filterable() .Sortable() .Selectable() .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) .Read(read => read.Action("AllUsers", "Admin")) ))columns.Template(@<button class="k-button" value="@Url.Action("EditUser")/@item.UserView.ID">Edit</button>) .ClientTemplate("<button value='" + Url.Action("EditUser", "Admin") + "/#=ID#>Edit</button>");@(Html.Kendo().TreeView() .Name("CompanyHierarchy") .Events(events => events .DragEnd("HierarchyDragEnd") ) .BindTo(Model.Hierarchy as System.Collections.IEnumerable, mappings => { mappings.For<BlueGrace.BlueShip.MVC.Models.EnterpriseChildModel>(binding => binding .Children(c => c.Children) .ItemDataBound((item, c) => { item.Text = c.Name; item.HtmlAttributes.Add("Id", c.EnterpriseID.ToString() + "|" + c.EnterpriseID.ToString()); }) ); }) .DragAndDrop(true))<script> function HierarchyDragEnd(e) { setTimeout(function () { var originNode = e.sourceNode.id; var destinationNode = e.destinationNode.id; var loc = e.dropPosition; alert("Origin ID: " + originNode + "\nDestination ID: " + destinationNode + "\nDrop Position: " + loc); }, 100); }</script>