ComponentOne ASP.NET MVC Controls
Working with Controls / FlexGrid / Work with FlexGrid / Detail Row
In This Topic
    Detail Row
    In This Topic

    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:

    DetailRowController.cs

    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);
        }
    }
    

    DetailRow.cshtml

    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; }
    }
    
    See Also