FlexGrid Row Details for Blazor

October 16 2020
0 Comments

FlexGrid for Blazor can show tabular data in an Excel-like grid. It supports many features for displaying information effectively. One feature is RowDetails; this provides flexibility when demonstrating additional data on each record in a detail section using a custom template. This template can contain any HTML or a Blazor control.

In this article, we will discuss two ways to display additional information using RowDetails inside FlexGrid.

How to Use HTML in RowDetails

Step 1: Create the Blazor Web Assembly Project

Create a Blazor Web Assembly project in VS2019.

Step 2: Adding Style Resource Entries

Open Index.html from under wwwroot and add the following style resource entries within the head tag:

<link rel="stylesheet" href="~/_content/C1.Blazor.Core/styles.css" />  
    <link rel="stylesheet" href="~/_content/C1.Blazor.Grid/styles.css" />  
    <link rel="stylesheet" href="~/_content/C1.Blazor.ListView/styles.css" 
/>  
    <link rel="stylesheet" href="~/_content/C1.Blazor.Input/styles.css" />  
    <link rel="stylesheet" href="~/_content/C1.Blazor.DataPager/styles.css" 
/>

Add the following scripts within body tags:

    <script src="~/_content/C1.Blazor.Core/scripts.js"></script>  
    <script src="~/_content/C1.Blazor.Input/scripts.js"></script>  
    <script src="~/_content/C1.Blazor.Grid/scripts.js"></script>

Step 3: Adding FlexGrid

Suppose we have a Customer class with Id, FirstName, LastName, Country, City, Address, and PostalCode public properties. We wish to show Country, City, Address, and PostalCode inside each row's detail section. To configure the grid to display such data, open the Index. razor page and clear all code except the top @page directive. Let's add a FlexGrid control and configure it to show Id, FirstName, and LastName.

<FlexGrid IsReadOnly="true" AutoGenerateColumns="false" HeadersVisibility="GridHeadersVisibility.All" ItemsSource="customers" Style="@("max-height:50vh")">  
    <FlexGridColumns>  
        <GridColumn Binding="Id" Width="80" />  
        <GridColumn Binding="FirstName" Width="GridLength.Star" />  
        <GridColumn Binding="LastName" Width="GridLength.Star" />  
    </FlexGridColumns>  
</FlexGrid>

Step 4: FlexGrid Configuration

Now, we can add a FlexgridDetailProvider to display Country, City, Address, and PostalCode. To get started, add a FlexGridBehaviors tag and inside that add a FlexgridDetailProvider. In the FlexgridDetailProvider, we can define a template to show detail data. Here is the complete FlexGrid configuration:

<FlexGrid IsReadOnly="true" AutoGenerateColumns="false" HeadersVisibility="GridHeadersVisibility.All" ItemsSource="customers" Style="@("max-height:50vh")">  
    <FlexGridColumns>  
        <GridColumn Binding="Id" Width="80" />  
        <GridColumn Binding="FirstName" Width="GridLength.Star" />  
        <GridColumn Binding="LastName" Width="GridLength.Star" />  
    </FlexGridColumns>  
    <FlexGridBehaviors>  
        <FlexGridDetailProvider TItem="Customer" Height="130" DetailVisibilityMode="detailVisibilityMode">  
            <div>  
                <div>Country: @context.Country</div>  
                <div>City: @context.City</div>  
                <div>Address: @context.Address</div>  
                <div>PostalCode: @context.PostalCode</div>  
            </div>  
        </FlexGridDetailProvider>  
    </FlexGridBehaviors>  
</FlexGrid>

Note TItem is set to Customer, where the detail binding information is extracted. This action enables the data-binding of detail elements using the context and respective property names.

Step 5: Create the Customer's Data Collection

In this step, we will add code to create the customer's data collection to which the grid is bound:

@code {  
    ObservableCollection<Customer> customers;

    GridDetailVisibilityMode detailVisibilityMode = GridDetailVisibilityMode.ExpandMultiple;  

    protected override void OnInitialized()  
    {  
        customers = Customer.GetCustomerList(100);  
    }  
}

That is all we need to configure FlexGrid to use RowDetails.

FlexGrid Row Details for Blazor

How to Use FlexGrid in RowDetails

The second way to use row details is to display a control inside RowDetails. Here we will discuss how to use FlexGrid. We will learn how to use nested FlexGrid to display master-detail data.

Step 1: Fetching Data from a REST API

Add another Page to the project. In the @Code section, we will fetch Customers and Orders data from a REST API and use LINQ to create a relational data collection based on the CustomerID column:

@code {  
    private Order[] orders;  
    private Customer[] customers;  
    private C1DataCollection<Order> collectionView;  
    private C1DataCollection<CustomerWithOrders> model;

    protected override async Task OnInitializedAsync()  
    {

        orders = await Http.GetFromJsonAsync<Order[]>("https://gc-demo-dataservice.azurewebsites.net/northwind/api/v1/Orders");  
        customers = await Http.GetFromJsonAsync<Customer[]>("https://gc-demo-dataservice.azurewebsites.net/northwind/api/v1/Customers");

        var query = customers.Select(c => new CustomerWithOrders  
        {  
            CustomerID = c.CustomerID,  
            CompanyName = c.CompanyName,  
            Country = c.Country,  
            Orders = orders.Where(o => o.CustomerID == c.CustomerID).ToList()

        });  
        model = new C1DataCollection<CustomerWithOrders>(query.ToList());

    }

    public class Order  
    {  
        public int? OrderID { get; set; }  
        public string CustomerID { get; set; }  
        public DateTime? OrderDate { get; set; }  
        public double? Freight { get; set; }  
        public string ShipCity { get; set; }  
    }


    {  
        public string CustomerID { get; set; }  
        public string CompanyName { get; set; }  
        public string Country { get; set; }

    }

    public class CustomerWithOrders : Customer  
    {  
        public List<Order> Orders { get; set; }  
    }

}

Step 2: Declaring FlexGrid

Now we can declare FlexGrid to show Customer data and configure the row detail with a second FlexGrid to display related Orders:

<FlexGrid ItemsSource="model" AutoGenerateColumns="false" HeadersVisibility="GridHeadersVisibility.All" Style="@("max-height:50vh")" >  
    <FlexGridColumns>  
    <GridColumn Binding="CustomerID" Width="80" />  
    <GridColumn Binding="CompanyName" Width="GridLength.Star" />  
    <GridColumn Binding="Country" Width="GridLength.Star" />  
    </FlexGridColumns>  
    <FlexGridBehaviors>  
        <FlexGridDetailProvider TItem="CustomerWithOrders" Height="130" DetailVisibilityMode="GridDetailVisibilityMode.ExpandMultiple">  

                <FlexGrid ItemsSource="@context.Orders" AutoGenerateColumns="false" HeadersVisibility="GridHeadersVisibility.Column" Style="@("height:100%")">  
                    <FlexGridColumns>  
                        <GridColumn Binding="OrderID" Width="80" />  
                        <GridColumn Binding="OrderDate" Width="GridLength.Star" />  
                        <GridColumn Binding="ShipCity" Width="GridLength.Star" />  
                        <GridColumn Binding="Freight" Width="80" />  
                    </FlexGridColumns>  
                </FlexGrid>  

        </FlexGridDetailProvider>  
    </FlexGridBehaviors>  
</FlexGrid>

The TItem for FlexGridDetailProvider is the CustomerWithOrders type, and the context makes the Orders to detail FlexGrid available.

FlexGrid Row Details for Blazor

What’s Next: Improving Simple Data Scenarios

The current row details implementation helps with simple data scenarios. To show nested details on demand, the FlexGridDetailProvider would need an async API and additional information about the parent row for related data to be shown in detail. To support such cases, we are working on adding an API for the 2020v3 release this year.

Check out the Blazor demo to see FlexGrid and all other controls in action.

Download Now!

Prabhakar Mishra

Product Manager