Grid Bound Column

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

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 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 - the name of the field in the data source that the column will render as a string. You can set its as a plain string (Field="SomeField") or to have .NET extract the field name from the model (Field=@nameof(MyModelClass.SomeFIeld)).
  • Title - the text that is rendered in the column header.
  • Editable - 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 - you can set this to false so a filterable grid will not let the user filter that particular column.
  • Sortable - set it to false so the user cannot sort this column.
  • Groupable - whether the use can group the grid by this column.
  • Reorderable - whether the user can drag to reorder this column.
  • Resizable - whether the user can resize this column.
  • Width - 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.
  • 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.

For an example of the column usage, see the Grid Overview article, the rest of the documentation and our live demos.

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