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>
And i cannot find it in the \shared where to look for this section,or maybe is not defined,in this case where should i define this?
Online example has a different approach more clear,but it doesn't show the actions from the controller like this
@(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>
Which version is correct or better?
and for the version using the section,where do i have to declare that section,in _layout.cshtml or where and, how?
3 Answers, 1 is accepted
We are not really sure what you are trying to achieve. The sample application indeed has a layout which is using a HeadContent section. However you don't need that in your own application. You only need the grid related code which is this:
@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();
}
Atanas Korchev
the Telerik team
Rank 1
the line of code that i was looking in the example project was
RenderSection("HeadContent",false)
But i have another question,what does .ToClientTemplate()?
i refer to the example with tabs(detail grid hierachical with 2 tabs for orders) ,because is cannot manage to work that example.do i need some template for the details?
ToClientTemplate() is required if your grid is ajax bound. I recommend checking the grid master/detail demos which are shipped as part of the ASP.NET MVC sample application.
Regards,Atanas Korchev
the Telerik team