Blazor Grid Column Definitions
There are two ways that you can define columns in the IntegralUI Grid component for Blazor. One way is to set columns directly in Blazor HTML and the second way is to set column definitions in code by creating data column objects.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This example shows grid columns with multi-line header. Some columns have child columns beneath that give more information about the parent column. This presents how to create groups of different columns to appear under one root column.
How to Define Columns in Blazor HTML
To set columns in HTML, in Grid component you need to use the Columns tag that will contain all column definitions set by use of IntegralUIGridColumn component.
You can set many different properties for each column, but the most important one is the Field property. This property is used to bind data from the data source to appear under specific column. Other properties that are commonly used are AllowFilter, AllowSort, FormatSpecifier, Width, etc.
Full list of all properties is available in the API for Grid Columns.
Under Columns section in HTML you can add one by one definition for columns that will appear in the Blazor Grid.
If you have many columns to show and to clear the HTML space, the other way is to create a loop inside HTML where you will add column definitions. To reduce the number of properties set in Blazor HTML for each column, you can create an IntegralUIDataColumn object with properties set for each column. Then only link this object using the Data property in IntegralUIGridColumn.
How to Define Columns in Blazor Code
To set columns in code, you need to create a list of IntegralUIDataColumn object for each column that you want to display in the Blazor Grid. Then you need to link this list to the DataColumns property of the Grid.
Functionality is the same as setting columns in HTML, the only difference is that you cannot provide custom content that will appear in column header, footer or to create custom filter using templates.
In addition, you can mix HTML and Blazor code for columns, where in code you will set all column properties and in HTML set any custom content. You only need to add reference to the column objects set in code to the Data property of the IntegralUIGridColumn component.
Columns with Multiline Headers
Each column can contain child columns. This feature allows you to create headers in multiple lines, where child column header will appear in another row below the parent column header. A detailed example on how to create this is available here: Blazor Grid with Multiline Headers.
Conclusion
IntegralUI Grid component for Blazor .NET allows you to define columns in Blazor HTML and in code. You can create columns that will display custom content in header, footer or custom filter in HTML using templates based on data column objects set in code.
Grid component is part of IntegralUI for Blazor, a library of native Blazor components that you can use to develop applications in Blazor .NET framework.