Column Template
By default, the grid renders the value of the field in the column, as it is provided from the data source. You can change this behavior by using the Template of the column and add your own content and/or logic to make a string out of the object.
The column template (the <Template> tag under the column definition) is what the grid uses to show the "view" representation of the cell. This also includes a column that is marked as Editable="false" and is in edit mode.
If you only want to format numbers, dates, enums, you can do so with the DisplayFormat feature without the need to declare a template.
The example below shows how to:
- Set the
Template(make sure to use the tag with a capitalT. The Visual Studio autocomplete tends to use the lowercasetwhich breaks the template logic and does not allow you to access the context). - Access the
contextof the model item and employ your own logic. - Render HTML or nest components in the column template.
- Use inline or multi-line template.
- Get data item values from the model.
Using Grid cell (column) template
<TelerikGrid Data="@GridData" Height="400px">
<GridColumns>
<GridColumn Field="@(nameof(FoodItem.Id))" Title="Image">
<Template>
@{
var item = (FoodItem)context;
<img src="@($"https://demos.telerik.com/blazor-ui/images/{item.Id}.jpg")"
alt="Image of @item.Name" />
}
</Template>
</GridColumn>
<GridColumn Field="@(nameof(FoodItem.Name))">
<Template>
Food item name:
<br />
<strong>@((context as FoodItem).Name)</strong>
</Template>
</GridColumn>
<GridColumn Field="@nameof(FoodItem.BestBefore)" Title="Date - Default format">
</GridColumn>
<GridColumn Field="@nameof(FoodItem.BestBefore)" Title="Date - Custom format string">
<Template>
@((context as FoodItem).BestBefore.ToString("dd MMM yyyy"))
</Template>
</GridColumn>
<GridColumn Field="@nameof(FoodItem.Organic)">
<Template>
@{
var item = (FoodItem)context;
}
Read-only Checkbox:
<TelerikCheckBox @bind-Value="@item.Organic" Enabled="false" />
<br />
or Icon:
<TelerikFontIcon Icon="@( item.Organic ? FontIcon.CheckboxChecked : FontIcon.Checkbox )" />
</Template>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
private IEnumerable<FoodItem> GridData = Enumerable.Range(1, 10).Select(x => new FoodItem
{
Id = x,
Name = "Food Item " + x,
BestBefore = DateTime.Now.AddDays(x),
Organic = x % 2 != 0
});
public class FoodItem
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Quantity { get; set; }
public DateTime BestBefore { get; set; }
public bool Organic { get; set; }
}
}
The above example renders read-only checkboxes to display boolean values. It is possible to use checkboxes in display mode and directly change the underlying data source values. This can make boolean value editing faster, because the Grid doesn't go into edit mode.