or
<div data-role="pane" data-layout="side-default" data-transition="slide"> @* Menu: Level 1 *@ <div data-role="view" data-title="Centro Web Panel" id="side-root"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> <ul data-role="listview" data-style="inset" @*data-source="splitViewCategories" data-template="categoriesTemplate"*@> @* TODO: Get rid of hard coded stuff *@ <li><a class="km-listview-link" href="#side-inbox" data-role="listview-link">Todo</a></li> <li><a class="km-listview-link" href="" data-role="listview-link">Drafts</a></li> <li><a class="km-listview-link" href="" data-role="listview-link">Pending</a></li> <li><a class="km-listview-link" href="" data-role="listview-link">Completed</a></li> </ul> </div> <div data-role="view" data-title="Todo" id="side-inbox"> <header data-role="header"> <div data-role="navbar"> <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a> <span data-role="view-title"></span> </div> </header> <ul data-role="listview" data-style="inset"> <li><a class="km-listview-link" href="" data-role="listview-link">Cardiology</a></li> <li><a class="km-listview-link" href="" data-role="listview-link">Radiology</a></li> <li><a class="km-listview-link" href="" data-role="listview-link">All Patients</a></li> </ul> </div></div> @* --> end of left menu area *@
dataSource = new kendo.data.DataSource({ transport: { read: { url: ('<%=Url.Action("GetUserList") %>'), dataType: "json" },{"fclID":3, "fclName":"TestFacility", "fclActive":true, "fclCity":"Mobile", "stateID":3, "state":{"country":null, "stateID":3, "stateName":"Alaska", "stateAbbr":"AK", "ctyID":1}}var fclDataSource = new kendo.data.DataSource({ //datasource for grid batch: false, autosync: true, transport: { create: { url: "/DataService/InsertFacility", dataType: "json", cache: false }, read: { url: "/DataService/GetFacilities", dataType: "json", cache: false }, update: { url: "/DataService/UpdateFacility", dataType: "json", cache: false } }, schema: { model: { id: "fclID", fields: { fclName: { type: "string", validation: { required: true } }, fclCity: { type: "string" }, fclActive: { type: "boolean", defaultValue: false }, stateID: { type: "number", validation: { required: true } } } } }, pageSize: 10 });$('.adminboxlarge').append($('#admingrid').kendoGrid({ dataSource: fclDataSource, height: 600, width: 890, filterable: true, sortable: true, pageable: true, scrollable: false, toolbar: [ { name: "create", text: "Add Facility"} //button to add new row ], columns: [ { field: "fclName", title: "Name", editable: true, filterable: true //width: 250 }, { field: "fclCity", title: "City", editable: true, filterable: true //width: 75 }, { //field: "state.stateAbbr", field: "stateID", template: "#=state.stateAbbr#", title: "State", editor: facilityStateEditor, editable: true, filterable: true //width: 75 }, { command: [ { name: "edit", text: "" } ] //width: 50 } ], editable: { mode: "inline", update: true, // puts the row in edit mode when it is clicked destroy: false, // does not remove the row when it is deleted, but marks it for deletion }, edit: function () { curr_container = this._editContainer; //selects the current edit container //deletes the text from the "Update" and "Cancel" buttons $(curr_container).find("a.k-grid-update").text("").append('<span class="k-icon k-update"/>'); $(curr_container).find("a.k-grid-cancel").text("").append('<span class="k-icon k-cancel"/>'); } }) )function facilityStateEditor(container, options) { //defines facility combobox $('<input data-text-field="stateName" data-value-field="stateID" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ dataSource: fclstateDataSource, dataTextField: "stateName", dataValueField: "stateID" }); };