or
@(Html.Kendo().Grid<Biblioteka.ViewModels.BookViewModel>() .Name("BooksKendoGrid") .Columns(columns => { columns.Bound(p => p.Title); columns.Bound(p => p.Author); columns.Bound(p => p.GenreName); columns.Bound(p => p.ReleaseDate).Format("{0:d}"); columns.Bound(p => p.ISBN); columns.Bound(p => p.BorrowCount); columns.Bound(p => p.RealBookCount); columns.Bound(p => p.AddDate).Format("{0:d}"); columns.Bound(p => p.ModifiedDate).Format("{0:d}"); columns.Bound(p => p.BookId).Width(150).ClientTemplate("<input type=\"button\" value=\"Edit #= Title #\" style=\"width : 100px;\" onclick=\"openEditWindow(#= BookId #)\"/>"); }) .Pageable() .Sortable() .Scrollable() .Filterable() .HtmlAttributes(new { style = "height: 200px" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(2) .Model(model => { //The unique identifier (primary key) of the model is the ProductID property model.Id(p => p.BookId); }) .Read(read => read.Action("BooksKendoGridRead", "Raports") )
) )<!DOCTYPE html><html><head> <title>TEST</title> <script src="cordova-2.2.0.js"></script> <script src="js/jquery.min.js"></script> <script src="js/kendo.mobile.min.js"></script> <link href="css/kendo.common.min.css" rel="stylesheet" /> <link href="css/kendo.mobile.all.min.css" rel="stylesheet" /></head><body> <div id="div1" data-role="view" data-title="Hello World"> <h2>Hello App</h2> <ul data-role="listview" data-style="inset" data-type="group"> <li>Please select: <ul> <li data-icon="play"><a href="Page1.html">Page 1</a></li> <li data-icon="play"><a href="#" onclick="test1();">Test</a></li> </ul> </li> </ul></div> <script> window.kendoMobileApplication = new kendo.mobile.Application(document.body); function test1() { alert('hello there...'); } </script> </body></html>grid.dataSource.filter([ { field: "Name", operator: "startswith", value: "0" }, { field: "Name", operator: "startswith", value: "2" }, { field: "Name", operator: "startswith", value: "3" }, { field: "Name", operator: "startswith", value: "4" }, { field: "Name", operator: "startswith", value: "5" }]); <script type="text/x-kendo-template" id="recentPostListViewTemplate"> <div id="#= id #" data-role="touch" data-tap="myTouch.tap">#= title #</div> <div class="articleBody" id="body-#= id #"> #= content #<br> <a href=#= custom_fields.syndication_permalink[0] #>Read Full Story</a> </div> </script>window.myTouch = { tap : function(e) { var id = e.touch['target']['context']['id']; console.log(id); $('#body-' + id).toggle(); }}// I have a data source definedWorkbench = new kendo.data.DataSource({ transport: { create: { url: "/api/workbench", type: "POST" } }})// I add a new object to Data sourceWorkbench.add({...});// and call sync the action on workbench// controller returns a new object with id and other// properties set however I think the return is being// ignored Workbench.sync();For some strange reason, the GroupName column returns a null value to the controller even though I enter a value into the grid UI. The GroupDescription column passes the entered value successfully. Both columns are strings except GroupName is a required field in the GroupVM view model. The work around is that I have to use a clientemplate for GroupName (see below)
THIS WORKS: columns.Bound(p => p.GroupName).ClientTemplate("#=GroupName #").Title("Group Name");
THIS DOES NOT WORK: columns.Bound(p => p.GroupName).Title("Group Name");
@model IEnumerable<ViewModels.GroupVM>@(Html.Kendo().Grid<ViewModels.GroupVM>().Name("GroupGrid") .ToolBar(toolbar => toolbar.Create().Text("Create")) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Pageable() .Sortable() .Scrollable().Columns(columns => { columns.Bound(p => p.GroupId).Hidden(); columns.Bound(p => p.GroupName).ClientTemplate("#=GroupName #").Title("Group Name"); columns.Bound(p => p.GroupDescription).Title("Group Description"); columns.Command(command => { command.Edit(); }).Width(200); }) .DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Id(p => p.GroupId); }) .Events(events => events.Error("error_handler")) .Create(update => update.Action("ManageGroups_C", "Group")) .Read(read => read.Action("ManageGroups_R", "Group")) .Update(update => update.Action("ManageGroups_E", "Group")) ) ) <script type="text/javascript"> function error_handler(e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } }</script>