or
@model Copper.Domain.Entities.EntInventory<div class="editor-label"> @Html.LabelFor(model => model.DeviceName)</div><div class="editor-field"> @Html.EditorFor(model => model.DeviceName)</div><div> <img alt="" src="@Url.Action("GetImage", "CellInventory", new { inventoryImageSeq = Model.InventoryImageSeq })" /></div>public FileContentResult GetImage(string inventoryImageSeq){ EntInventoryImage entImage = new EntInventoryImage(); int seq; if (Int32.TryParse(inventoryImageSeq, out seq)) { entImage = _margoRepository.GetInventoryImage((int?)seq); } return File(entImage.ActualImage, entImage.ContentType);}new { inventoryImageSeq = Model.InventoryImageSeq }command.Custom("edit").Click("editPlan");var grid = $("#Grid").data("kendoGrid"); var Id= grid.dataItem(grid.select()).Id;
@Html.Kendo().MultiSelectFor(m => m.SelectedEmployeeIds).BindTo(Model.Employees).DataTextField("EmployeeName").DataValueField("EmployeeId").ItemTemplate("<span class='span2'>#: data.EmployeeName #</span><span><strong>#: data.Email #</strong></span>").Placeholder("Select Names")Uncaught TypeError: Cannot call method replace of undefined//Kendow MVC Server binding test public ActionResult KendoGrid([DataSourceRequest] DataSourceRequest request, string areaFilter = null) { ListLocationsViewModel viewModel = _manageLocationsAppServ.CreateListLocationsViewModel(0, areaFilter); return Json(viewModel.Locations.ToDataSourceResult(request), JsonRequestBehavior.AllowGet); }@using Kendo.Mvc.UI@using OTIS.domain.CompanyMgmt@model OTIS.AppServ.CompanyMgmt.ViewModels.ListLocationsViewModel@{ ViewBag.Title = "Locations | OTIS";}<h2>Locations</h2>@Html.Raw(TempData["message"])<p> @using (Html.BeginForm()) { <p> Area: @Html.DropDownList("areaFilter", new SelectList(Model.AreaOptions), "") <input type="submit" value="Search"/> <button onclick="filter()">Filter</button> </p> }</p><hr /><p> @Html.ActionLink("Create New", "Edit", "ManageLocations", null, new { @class="button" })</p>@(Html.Kendo().Grid<OTIS.AppServ.CompanyMgmt.ViewModels.ListLocationsViewModel.LocationsGrid>() .Name("MVCClientBindGrid") .Columns(columns => { columns.Bound(l => l.DisplayLocation); columns.Bound(l => l.Area); columns.Bound(l => l.Zone); columns.Bound(l => l.Aisle); columns.Bound(l => l.Bay); columns.Bound(l => l.Level); columns.Bound(l => l.Position); columns.Bound(l => l.Barcode); columns.Command(command => command.Custom("Details").Click("showDetails")).Width(100); }) // Add "Create" command .ToolBar(toolbar => { //Want to place this at the bottom toolbar.Custom().Text("Add").Url("#_").HtmlAttributes(new { onclick = "addNew()", @class = "k-grid-add" }); }) .DataSource(dataSource => dataSource .Ajax() // Specify that the data source is of ajax type .ServerOperation(false) // paging, sorting, filtering and grouping will be applied client-side .PageSize(10) .Model(model => model.Id(c => c.Id)) .Read(read => read.Action("KendoGrid", "ManageLocations", new { area = "CompanyMgmt" })// Specify the action method and controller name //.Data("getFilters") // the name of the JavaScript function which will return the additional data ) ) .Pageable() .Sortable() .Scrollable() .Filterable() .Groupable())<script type="text/javascript"> var detailsTemplate = kendo.template($("#template").html()); function showDetails(e) { e.preventDefault(); var dataItem = this.dataItem($(e.currentTarget).closest("tr")); window.location.href = "@Url.Action( "Edit", "ManageLocations")" + "/" + dataItem.id; } function addNew() { window.location.href = "@Url.Action( "Edit", "ManageLocations")"; } function filter() { var grid = $("#MVCClientBindGrid").data("kendoGrid"); var area = $('#areaFilter').val() grid.dataSource.filter({ logic: "and", filters: [ { field: 'Area', operator: 'eq', value: 'SHIP' }, { field: 'Area', operator: 'eq', value: 'SHIP' } ] }); } </script><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Locations | OTIS - My ASP.NET MVC Application</title> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <link href="/Content/site.css" rel="stylesheet"/><link href="/Content/superfish.css" rel="stylesheet"/> <link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/> <link href="/Content/themes/green_machine/jquery-ui-1.9.2.custom.css" rel="stylesheet"/><link href="/Content/themes/green_machine/green_machine.css" rel="stylesheet"/> <script src="/Scripts/modernizr-2.5.3.js"></script> <script src="/Scripts/jquery-1.8.3.js"></script> <script src="/Scripts/jquery-ui-1.8.20.js"></script> <script src="/Scripts/kendo/kendo.web.min.js"></script><script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script> <script> //JQuery custom theme application $(function () { $("input[type=submit], a.button, button").button() $('ul.sf-menu').superfish({ animation: { opacity: 'show', height: 'show' }, // fade-in and slide-down animation speed: 'fast', // faster animation speed autoArrows: true, // disable generation of arrow mark-up dropShadows: true // disable drop shadows }); }); </script> </head> <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title"><a href="/CompanyMgmt/Home">OTIS</a></p> </div> <div class="float-right"> <section id="login"> Hello, <a class="username" href="/Account/UserProfile" title="Manage">chadr</a>!<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="EHsDe8SgQElcRgrIcNq4uuC_Y8XexV-LUKiigBQGqQpjTHVVDvapFTB0W6sylMdJUAelKHrka6apyRxGy39CDJ4JUf_ae4rwGNxFR3aaXp81" /> <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></form> </section> </div> <div class="float-right"> <nav> <ul class="sf-menu sf-hover" id="menu"> <li><a href="/">Home</a></li> <li><a href="#">Admin</a> <ul> <li><a href="/CompanyMgmt/ManageCompanies">Companies</a></li> <li><a href="/CompanyMgmt/ManageLocations">Locations</a></li> <li><a href="/CompanyMgmt/ManageCompanies/Kendo">Kendo Test</a></li> </ul> </li> <li><a href="/Home/About">About</a></li> <li><a href="/Home/Contact">Contact</a></li> </ul> </nav> </div> </div> <div class="clear-fix"></div> </header> <div id="body"> <section class="content-wrapper main-content clear-fix"> <h2>Locations</h2><p><form action="/CompanyMgmt/ManageLocations" method="post"> <p> Area: <select id="areaFilter" name="areaFilter"><option value=""></option><option>RECV</option><option>SHIP</option></select> <input type="submit" value="Search"/> <button onclick="filter()">Filter</button> </p> </form></p><hr /><p> <a class="button" href="/CompanyMgmt/ManageLocations/Edit">Create New</a></p><div class="k-widget k-grid" id="MVCClientBindGrid"><div class="k-toolbar k-grid-toolbar k-grid-top"><a class="k-grid-add k-button k-button-icontext " href="#_" onclick="addNew()"><span></span>Add</a></div><div class="k-grouping-header">Drag a column header and drop it here to group by that column</div><div class="k-grid-header"><div class="k-grid-header-wrap"><table cellspacing="0"><colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col style="width:100px" /></colgroup><tr><th class="k-header k-filterable" data-field="DisplayLocation" data-title="Display Location" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=DisplayLocation-asc">Display Location</a></th><th class="k-header k-filterable" data-field="Area" data-title="Area" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Area-asc">Area</a></th><th class="k-header k-filterable" data-field="Zone" data-title="Zone" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Zone-asc">Zone</a></th><th class="k-header k-filterable" data-field="Aisle" data-title="Aisle" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Aisle-asc">Aisle</a></th><th class="k-header k-filterable" data-field="Bay" data-title="Bay" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Bay-asc">Bay</a></th><th class="k-header k-filterable" data-field="Level" data-title="Level" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Level-asc">Level</a></th><th class="k-header k-filterable" data-field="Position" data-title="Position" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Position-asc">Position</a></th><th class="k-header k-filterable" data-field="Barcode" data-title="Barcode" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Barcode-asc">Barcode</a></th><th class="k-header" scope="col"><span class="k-link"> </span></th></tr></table></div></div><div class="k-grid-content" style="height:200px"><table cellspacing="0"><colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col style="width:100px" /></colgroup><tbody><tr class="t-no-data"><td colspan="9"></td></tr></tbody></table></div><div class="k-pager-wrap k-grid-pager"><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the first page"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-state-disabled" data-page="0" href="#" title="Go to the previous page"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-state-disabled" data-page="2" href="#" title="Go to the next page"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the last page"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">0 - 0 of 0 items</span></div></div><script> jQuery(function(){jQuery("#MVCClientBindGrid").kendoGrid({"columns":[{"title":"Display Location","field":"DisplayLocation","encoded":true},{"title":"Area","field":"Area","encoded":true},{"title":"Zone","field":"Zone","encoded":true},{"title":"Aisle","field":"Aisle","encoded":true},{"title":"Bay","field":"Bay","encoded":true},{"title":"Level","field":"Level","encoded":true},{"title":"Position","field":"Position","encoded":true},{"title":"Barcode","field":"Barcode","encoded":true},{"width":"100px","command":[{"name":"Details","buttonType":"ImageAndText","text":"Details","click":showDetails}]}],"groupable":{},"pageable":{"buttonCount":10},"sortable":true,"filterable":true,"toolbar":{"command":[{"name":null,"attr":" onclick=\"addNew()\" class=\"k-grid-add\"","buttonType":"ImageAndText","text":"Add"}]},"dataSource":{"transport":{"read":{"url":"/CompanyMgmt/ManageLocations/KendoGrid"}},"pageSize":10,"page":1,"total":0,"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"Id","fields":{"Id":{"type":"number"},"DisplayLocation":{"type":"string"},"Area":{"type":"string"},"Zone":{"type":"string"},"Aisle":{"type":"string"},"Bay":{"type":"string"},"Level":{"type":"string"},"Position":{"type":"string"},"Barcode":{"type":"string"}}}}}});});</script><script type="text/javascript"> var detailsTemplate = kendo.template($("#template").html()); function showDetails(e) { e.preventDefault(); var dataItem = this.dataItem($(e.currentTarget).closest("tr")); window.location.href = "/CompanyMgmt/ManageLocations/Edit" + "/" + dataItem.id; } function addNew() { window.location.href = "/CompanyMgmt/ManageLocations/Edit"; } function filter() { var grid = $("#MVCClientBindGrid").data("kendoGrid"); //grid.dataSource.filter({ // logic: "and", // filters: [ // { field: 'ID', operator: 'gte', value: 10 }, // { field: 'ID', operator: 'lte', value: 20 } // ] //}); var area = $('#areaFilter').val() grid.dataSource.filter({ logic: "and", filters: [ { field: 'Area', operator: 'eq', value: 'SHIP' }, { field: 'Area', operator: 'eq', value: 'SHIP' } ] }); } function getFilters() { var filters = []; // create an empty array filters.push({ key: "areaFilter", value: $('#areaFilter').val() }); return filters; //return { // areaFilter: "SHIP" //}; }</script> </section> </div> <footer> <div class="content-wrapper"> <div class="float-left"> <p>© 2012 - OTIS - Order Tracking and Inventory System</p> </div> </div> </footer> <script src="/Scripts/superfish.js"></script><script src="/Scripts/supersubs.js"></script> <script> $(document).ready(function () { //to utilize jquery theme in superfish menu //$("ul.sf-menu li").addClass("ui-state-default"); //$("ul.sf-menu li").hover(function () { $(this).addClass('ui-state-hover'); }, // function () { $(this).removeClass('ui-state-hover'); }); }); </script> </body></html>Are any of these two scenarios supposed to work at the moment, and if so, is there any demo code available?
On a related note: We always bind our grids server-side first and do following operations (sort/filter/etc) using client code. Are there any plans on making it possible to define a template once and get it working in both scenarios? For us we really only use server binding once and would prefer is details are loaded via ajax on demand, but using a client details template only gives an empty details view as far as we know...
Thank you
/Victor
// something @(Html.Kendo().Grid<type1>() .Name("typ1") .ToolBar(toolBar => toolBar.Create()) .Columns(columns => { // other columns.Bound(o => o.Volume); // other }// other)<br/ >// something @(Html.Kendo().Grid<type2>() .Name("typ2") .ToolBar(toolBar => toolBar.Create()) .Columns(columns => { // other columns.Bound(o => o.Volume); // other }// other)