FlexGrid provides support for detail row functionality, which adds a templated, expandable row to the control. You can add details section to any row in FlexGrid, which enables you to group data in a template that will be visible optionally. This allows end users to view additional data related to a row by simply selecting the row.
Built-in expand/collapse buttons are also provided to control the visibility of data within the expandable row. You can add nested grid within a Detail Row to create a hierarchical grid interface.
The following image shows how a FlexGrid with Detail Row appears. The example uses Customer data from local NorthWind database file C1NWind.mdf.
The following code examples demonstrate how to enable Detail Row in a FlexGrid:
| C# |
Copy Code
|
|---|---|
public partial class FlexGridController : Controller { public ActionResult DetailRow() { var customers = db.Customers.Take(10).ToList(); var model = customers.Select(c => new CustomerWithOrders { CustomerID = c.CustomerID, CompanyName = c.CompanyName, Country = c.Country, City = c.City, Orders = (db.Orders.Where(o => o.CustomerID == c.CustomerID).ToList()) }); return View(model); } } |
|
| Razor |
Copy Code
|
|---|---|
@model IEnumerable<CustomerWithOrders>
<script>
function hasDetail(row) {
return row.dataItem.Country.length > 5;
}
</script>
<script id="detailTemplate" type="text/template">
@(Html.C1().FlexGrid()
.Height("200px")
.AutoGenerateColumns(false)
.IsReadOnly(true)
.TemplateBind("ItemsSource", "Orders")
.Columns(columns =>
{
columns.Add(column => column.Binding("ShippedDate").Width("*"));
columns.Add(column => column.Binding("Freight").Width("*").Align("Center"));
columns.Add(column => column.Binding("ShipVia").Width("*").Align("Center"));
})
.ToTemplate()
)
</script>
@(Html.C1().FlexGrid()
.ShowDetailRow(d => d.DetailRowTemplateId("detailTemplate").RowHasDetail("hasDetail").DetailVisibilityMode(C1.Web.Mvc.Grid.DetailVisibilityMode.ExpandMulti))
.Id("detailRowFlexGrid")
.AutoGenerateColumns(false)
.IsReadOnly(true)
.Bind(Model)
.Columns(columns =>
{
columns.Add(column => column.Binding("CustomerID").Width("*"));
columns.Add(column => column.Binding("CompanyName").Width("2*").Align("Center"));
columns.Add(column => column.Binding("Country").Width("2*").Align("Center"));
columns.Add(column => column.Binding("City").Width("2*").Align("Center"));
})
)
|
|
Note that public class CustomerWithOrders inherits Customer class, and can be defined in the model named CustomerWithOrders, as shown below:
| Example Title |
Copy Code
|
|---|---|
public class CustomerWithOrders : Customer { public List<Order> Orders { get; set; } } |
|
