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
)