Data Binding in Blazor Grid
In this article, you will learn how to bind data to IntegralUI Grid component for Blazor .NET using custom data sources. You can use any databases or services as data source, locally or remotely to populate the Grid. In addition, your data can have custom fields that can be unbound.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This demo shows a Blazor Grid that is populated asynchronously using a JSON file as a data source.
Bind Data to Blazor Grid
The IntegralUI Grid component provides a generic model type, which you can use to bind data based on your data model.
Data Model
First you need to create a class or an interface that you will use as a model type. Then, you can apply this model type to the TModel property of the Grid component. Based on this model, you can populate the Blazor Grid from your data source, either locally or remotely. The DataSource property can accept any queryable collection, that uses provided data model.
The interface can contain any property type, depending on your data source. Not all fields need to be bound. You can create custom fields and bind only those that are required to be present in the Grid, based on column definition. Based on this data model, Grid rows are created.
For example, in sample code below there is a class that contains all fields displayed in the Grid. The link between the class and the grid is done through the TModel property. And based on Field property set in each column, the corresponding value from your data source is displayed accordingly.
Queryable Collections
You can populate the Blazor Grid with data synchronously or asynchronously, from local or remote data source. The only requirement is the data model set (see above) and to link the DataSource property to your data.
You need to create a variable that will store the data once loaded, based on provided data model. In this example, the variable is a List of CustomData objects. Here is how to load a JSON file into the Grid asynchronously:
When data is applied to the DataSource property, to increase performance and avoid multiple state changes whenever this property value changes, you need to call the UpdateLayout or UpdateLayoutAsync method of the Grid component. To do this, at first you need to get a reference to the Grid component by setting the ref property in HTML.
The update layout methods are only needed when you want to update the Grid layout in whole. For increased performance, when specific data changes in the current view, you can use the UpdateView method.
Column Definitions
Once you bind Blazor Grid component to data, it will only appear if columns are set. Now, you can define columns directly in HTML using the Columns tag and IntegralUIGridColumn component. To bind specific data field from your data source into specific column, based on provided data model, you need to set the Field property to point to the name of interface field.
There are many other column properties that you can set in HTML, which are excluded here. For demonstration purposes, each column in this example uses HeaderText and Width to specify the header label and column size.
If the column title is the same as the Field name, you don't have to set the HeaderText property. The title will be taken from Field property value. Furthermore, if Width property value is not set, it is presumed that column width is 100 pixels.
In addition, instead of setting columns in HTML, you can create a list of all columns using the IntegralUIDataColumn object and set it to the DataColumns property. More details on working with columns you can here: Grid Data Columns.
Unbound Columns
Your data model can have fields that will not appear in the Grid. You can have custom fields that will remain hidden from the Grid view, but still usable in other way. You can apply column values based on custom logic set in your code or get column values from a external data source. Only fields that are linked to specific column Field property will appear.
Custom Data Fields
All fields set in the interface used as a data model are custom. Based on these data fields, Grid rows are created. However, there are some reserved fields used for specific purpose by the Blazor Grid. Here you will find a list of these fields:
- Checked - specifies that row is checked, false by default
- Enabled - determined whether the grid row is enabled or disabled, true by default
- Id - specifies a unique identifier for a row, empty string by default
- Selected - specifies that row is selected, false by default
- Visible - specifies that row is visible or not, true by default
Most of these reserved fields are state fields. Some of them are required to be present in the data model, to save the grid state. As an example, for selection purposes the Selected field is required.
If you use a different name for these fields in your data source, you may need to create an object that will map the data fields from the data source with the ones that are already in use in the Grid.
To bind these data fields, you can use the DataFields property of the Grid. This property accepts an object that replaces the default field names with your own.
You only need to provide the names for the fields that are different than those used by the Grid.
Conclusion
Data binding allows you to populate the IntegralUI Grid component from custom data source. A data source can be a database, a queryable collection, JSON file or any other form, which you can load locally or remotely. The Blazor Grid component accepts a generic type as data model, which you create in your code to bind data by providing an interface or specify a class based on object in your data source.
In addition, if you have a data source that uses different field names, you can provide an object that will match the names from your data source with the ones used by the Grid. Once you have the data ready, you can increase loading performance using built-in methods for fast data loading.
IntegralUI for Blazor is a library of UI components for Blazor .NET that includes the Data Grid. You can use it to develop web apps in Blazor .NET framework.