Hello again,
I tried to make the Detail Template example from the local installed examples and it gives me this message
The following sections have been defined but have not been rendered for the layout page "~/Views/Shared/_Layout.cshtml": "HeadContent".
this is the cshtml
@{
ViewBag.Title = "DetailGrid";
}
<h2>DetailGrid</h2>
@model IEnumerable<KendoUIMvcApplication2.ViewModels.EmployeeViewModel>
@{ Html.Kendo().Grid(Model)
.Name("Employees")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(140);
columns.Bound(e => e.LastName).Width(140);
columns.Bound(e => e.Title).Width(200);
columns.Bound(e => e.Country).Width(200);
columns.Bound(e => e.City);
})
.DetailTemplate(e =>
{
Html.Kendo().TabStrip()
.Name("TabStrip_" + e.EmployeeID)
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Orders").Content(@<text>
@(Html.Kendo().Grid(e.Orders)
.Name("Orders_" + e.EmployeeID)
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(101);
columns.Bound(o => o.ShipCountry).Width(140);
columns.Bound(o => o.ShipAddress).Width(200);
columns.Bound(o => o.ShipName).Width(200);
columns.Bound(o => o.ShippedDate).Format("{0:d}");
})
.Pageable()
.Sortable()
)
</text>);
items.Add().Text("Contact Information").Content(
@<div class="employee-details">
<ul>
<li>
<label>Birth Date:</label>@e.BirthDate.Value.ToString("d")
</li>
<li>
<label>Country:</label>@e.Country
</li>
<li>
<label>City:</label>@e.City
</li>
<li>
<label>Address:</label>@e.Address
</li>
<li>
<label>Home Phone:</label>@e.HomePhone
</li>
</ul>
</div>);
})
.Render();
})
.RowAction(row =>
{
if (row.Index == 0)
{
row.DetailRow.Expanded = true;
}
})
.Pageable()
.DataSource(dataSource => dataSource.Server().PageSize(5))
.Sortable()
.Render();
}
@section HeadContent {
<style scoped="scoped">
.employee-details ul
{
list-style:none;
font-style:italic;
margin-bottom: 20px;
}
.employee-details label
{
display:inline-block;
width:90px;
font-style:normal;
font-weight:bold;
}
</style>
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>() .Name("Employees") .Columns(columns => { columns.Bound(e => e.FirstName).Width(140); columns.Bound(e => e.LastName).Width(140); columns.Bound(e => e.Title).Width(200); columns.Bound(e => e.Country).Width(200); columns.Bound(e => e.City); }) .ClientDetailTemplateId("employeesTemplate") .Pageable() .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("HierarchyBinding_Employees", "Grid")) .PageSize(5) ) .Sortable() .Events(events => events.DataBound("dataBound")) ) <script> function dataBound() { this.expandRow(this.tbody.find("tr.k-master-row").first()); } </script> <script id="employeesTemplate" type="text/kendo-tmpl"> @(Html.Kendo().TabStrip() .Name("TabStrip_#=EmployeeID#") .SelectedIndex(0) .Items(items => { items.Add().Text("Orders").Content(@<text> @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>() .Name("Orders_#=EmployeeID#") .Columns(columns => { columns.Bound(o => o.OrderID).Width(101); columns.Bound(o => o.ShipCountry).Width(140); columns.Bound(o => o.ShipAddress).Width(200); columns.Bound(o => o.ShipName).Width(200); }) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" })) ) .Pageable() .Sortable() .ToClientTemplate()) </text> ); items.Add().Text("Contact Information").Content( "<div class='employee-details'>" + "<ul>" + "<li><label>Country:</label>#= Country #</li>" + "<li><label>City:</label>#= City #</li>" + "<li><label>Address:</label>#= Address #</li>" + "<li><label>Home Phone:</label>#= HomePhone #</li>" + "</ul>" + "</div>" ); }) .ToClientTemplate()) </script> <script> function dataBound() { this.expandRow(this.tbody.find("tr.k-master-row").first()); } </script> @section HeadContent { <style scoped="scoped"> .employee-details ul { list-style:none; font-style:italic; margin-bottom: 20px; } .employee-details label { display:inline-block; width:90px; font-style:normal; font-weight:bold; } </style>
Person = kendo.data.Model.define({ id: "", firstName: "", lastName: "", age: "", myFunc: function () { return 2013 - this.age; } }); viewModel = kendo.observable({ personArr: [], loadDataFromController: function () { personArr = new kendo.data.ObservableArray([]); var vm = this; $.ajax({ dataType: 'json', url: '/Home/GetPersons', success: function (json) { vm.setData(json); } }); }, setData: function (json) { for (var i = 0; i < json.length; i++) { var temp = new Person(); temp.id = json[i].Id; temp.firstName = json[i].FirstName; temp.lastName = json[i].LastName; temp.age = json[i].Age; this.get("personArr").push(temp); } } }); viewModel.loadDataFromController(); kendo.bind($('#PersonGrid'), viewModel);<div id="PersonGrid"> @(Html.Kendo().Grid(Model) .Name("Grid") .Columns(columns => { columns.Bound("id").Groupable(false); columns.Bound("firstName"); columns.Bound("lastName"); columns.Template(@<text></text>).ClientTemplate("#=myFunc()#").Width(120).Title("Year of birth"); }) .Sortable() .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) ) .Pageable(page => page.PageSizes(true)) .Scrollable() .Filterable() .HtmlAttributes(new Dictionary<string, object> { {"data-bind", "source: personArr" } }) )</div>
var grid = $("#Grid").data("kendoGrid"); grid.dataSource.read(); columns.Bound(p => p.Employee).ClientTemplate("#=Employee.EmployeeName#");but who is ("#=Employee.employeeName") and also is correct that syntax? .i supose it should be a template.but where it is?
Html.Kendo().Grid(Model.Adresses).Name("AddressGrid") .Columns(columns => { columns.Bound(a => a.Name).Width(100); columns.Bound(a => a.StreetLine1).Width(100); columns.Bound(a => a.StreetLine2).Width(100); columns.Bound(a => a.ZipCode).Width(100); columns.Bound(a => a.City).Width(100); columns.Bound(a => a.Country).Width(100); columns.Bound(a => a.Type).Width(100); columns.Command(cmd => { cmd.Edit(); }).Width(100); }) .ToolBar(commands => { commands.Save(); }) .Editable(editable => editable.Mode(GridEditMode.InCell)) .DataSource(ds => ds.Ajax() .Batch(true) .ServerOperation(false) .Model(m => { m.Id(i => i.Id); m.Field(i => i.Id).Editable(false); m.Field(i => i.Name).Editable(true); m.Field(i => i.StreetLine1).Editable(true); m.Field(i => i.StreetLine2).Editable(true); m.Field(i => i.ZipCode).Editable(true); m.Field(i => i.City).Editable(true); m.Field(i => i.Country).Editable(true); m.Field(i => i.Type).Editable(true); }) .Update(update => update.Action("Customer_Update", "Customer",new { Command = "Update" })) )<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.common.min.css")"> <link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.rtl.min.css")"> <link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.default.min.css")"><script src="@Url.Content("~/Scripts/jquery.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>@(Html.Kendo().Grid<Nop.Web.Models.Customer.CustomerInfoModel>() .Name("Grid") .Columns(columns => { columns.Bound(p => p.Active); // columns.Bound(p => p.cbSubscriptions).ClientTemplate("#=Employee.EmployeeName#"); columns.Bound(p => p.cbSubscriptions); columns.Bound(p => p.FirstName); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); }) .ToolBar(toolBar => toolBar.Create()) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Pageable() .Sortable() .Scrollable() .DataSource(dataSource => dataSource .Ajax() .Events(events => events.Error("error_handler")) .Model(model => model.Id(p => p.Id)) .Create(update => update.Action("EditingInline_Create", "Customer")) .Read(read => read.Action("UsersList", "Customer")) .Update(update => update.Action("EditingInline_Update", "Grid")) .Destroy(update => update.Action("EditingInline_Destroy", "Grid")) ))<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>@(Html.Kendo().Grid<KendoUIMvcApplication3.Models.Product>() .Name("Grid") .Columns(columns => { columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitsInStock); columns.Command(c => { c.Edit(); c.Destroy(); }); }) .ToolBar(tools => { tools.Create(); }) .Sortable() .Pageable() .Filterable() .DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Id(p => p.ProductID); }) .Read(read => read.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Get)) .Create(create => create.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Post)) .Update(update => update.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Put)) .Destroy(destroy => destroy.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Delete)) ))<script>$(function() { var grid = $("#Grid").data("kendoGrid"); // WebAPI needs the ID of the entity to be part of the URL e.g. PUT /api/Product/80 grid.dataSource.transport.options.update.url = function(data) { return "http://192.168.1.10:699/api/Product/" + data.ProductID; }; // WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /api/Product/80 grid.dataSource.transport.options.destroy.url = function(data) { return "http://192.168.1.10:699/api/Product/" + data.ProductID; };});</script>