Grid Data Binding Overview

This article explains the basics of showing data in a grid and the features of its bound columns.

For details on Value Binding and Data Binding, and the differences between them, see the Value Binding vs Data Binding article.

Sections in this article:

Show Data In A Grid

To show data in a grid, you must define GridColumn instances in the GridColumns collection for the fields of the data source you want to show. Their Field parameter defines which property from the model is shown in the column. You can provide the collection of models to the grid in its Data parameter.

Provide data to the grid and choose which columns (fields) to see

@* define data, model and columns for a grid *@

@using System.ComponentModel.DataAnnotations
@* This Using is for the model class attributes only *@

<TelerikGrid Data="@MyData">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" />
        <GridColumn Field="@(nameof(SampleData.Name))" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        [Display(Name = "Employee Name")]
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

You can also use a string for the field name, using the nameof operator is not necessary. For example, the ID column can be defined like this: <GridColumn Field="Id" />. The field name is, however, case-sensitive.

The Data collection can be an ObservableCollection, an array, a List - it must only implement IEnumerable.

Video tutorial - Get started with Telerik Data Grid for Blazor

Grid Bound Column Parameters

You can use the following properties on the bound columns:

  • Field - (defaults to null) - the name of the field in the data source that the column will render as a string (case-sensitive). You can set its as a plain string (Field="SomeField") or to have .NET extract the field name from the model for flat models (Field=@nameof(MyModelClass.SomeFIeld)).

  • Title - the text that is rendered in the column header. See the Notes below for its behavior.

  • Editable - (defaults to true) - you can set this property to true or false to allow or prevent editing of this field. Defaults to true. To edit data, you also need a CommandColumn.

  • Filterable - (defaults to true) - you can set this to false so a filterable grid will not let the user filter that particular column.

  • Sortable - (defaults to true) - set it to false so the user cannot sort this column.

  • Groupable - (defaults to true) - whether the use can group the grid by this column.

  • Reorderable - (defaults to true) - whether the user can drag to reorder this column.

  • Resizable - (defaults to true) - whether the user can resize this column.

  • Width - (defaults to null) - the width of the column. See the Dimensions article. Keep in mind that these are columns in a <table>, so it is often a good practice to leave one column without explicit dimensions so it can accommodate the remaining width and changes to the container size.

  • Locked - (defaults to false) - if this parameter is set to true it locks the column so it is always visible to the user.

  • Template - this property can also be used as an inner tag and it lets you define the column display content. It can also point to a component name.

  • Context - the standard Blazor context variable name for use inside the inline template.

  • ref - the standard Blazor reference name.

  • EditorTemplate - this property can also be used as an inner tag and it lets you define the column edit content. It can also point to a component name.

  • FilterCellTemplate - this property can also be used as an inner tag and it lets you customize the Grid Filter Row. It can also point to a component name.
  • FilterMenuTemplate - this property can also be used as an inner tag and it lets you customize the Grid Filter Menu. It can also point to a component name.

You can find more examples in the rest of the grid documentation and in our live demos.

The Grid can automatically generate its columns out of the public properties of the model.

Notes

  • For advanced operations such as grouping, filtering, sorting, you must set a Field to the column, and the field it points to must be a string or a value type (such as a number, string, DateTime, boolean).

    • If a Field is not set the column will not allow filtering, grouping, sorting and editing for the column.
    • If the Field points to a custom object or something like an IDictionary, errors will be thrown upon those actions because there are no known data operations on non-primitive types in .NET. An alternative is to implement all data source operations yourself by handling the OnRead event.
    • To bind to nested (complex) models (also called navigation properties), use only the name of the field that holds the child class and its own field. For an example, see the Bind to navigation properties in complex objects article.
  • The grid skips fields marked with the IgnoreDataMemberAttribute when performing CUD operations. Its presence indicates that this property does not need to be part of the serialized data anyway, and skipping such fields allows Lazy Loading Proxies in EF to work.

  • If you don't set a Title for a column, the grid will take the [Display(Name = "My Column Title")] data annotation attribute from the model field. If that's not available either, the name of the field will be shown.

  • If you want to prevent data mutation for a specific property you can set the Editable parameter of the GridColumn or the [Editable] data annotation attribute to false for the desired model field.

    • Columns generated out of model properties that do not have a setter or it is not accessible (private) will not be editable too.
  • The Grid uses Activator.CreateInstance<TItem>(); to generate a new item when an Insert action is invoked, so the Model should have a Parameterless constructor defined. A workaround might be invoking Insert through the grid state and creating the object with your own code.

You can optimize database queries in two ways:

  • Use an IQueryable<MyModel> collection for the grid Data. The grid will build a LINQ expression internally that will be resolved only when needed. This can be useful when the Data comes from something like an EntityFramework context.
  • Implement manual data source operations and implement the desired query yourself.

See Also

In this article
Not finding the help you need? Improve this article