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>

#.net #desktop #web