DxDataGridColumn.DisplayTemplate Property
Specifies a display template for column cells.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v22.1.dll
Declaration
[Parameter]
public RenderFragment<object> DisplayTemplate { get; set; }Property Value
| Type | Description |
|---|---|
| RenderFragment<Object> | The template content. |
Remarks
Important
The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
The DisplayTemplate property allows you to specify custom content for column cells. Use the template’s context parameter to access a data object and its fields (for instance, you can get a data field value).
Use the EditTemplate property to define a template for a column editor. If you do not specify the edit template, the column uses a standard editor based on the column type.
The code below demonstrates how to use these properties for the Details column. The display template shows the More Info… links. Users can click these links to view details about data rows in a pop-up window. The edit template embeds a Memo into the edit form.
<DxDataGrid Data="@DataSource"
RowRemovingAsync="@OnRowRemovingAsync"
RowUpdatingAsync="@OnRowUpdatingAsync"
RowInsertingAsync="@OnRowInsertingAsync"
RowEditStart="@(dataItem => OnRowEditStarting(dataItem))"
RowInsertStart="@(() => OnRowEditStarting(null))">
<Columns>
<DxDataGridCommandColumn Width="120px" />
<DxDataGridColumn Field="FirstName" />
<DxDataGridColumn Field="LastName" />
<DxDataGridColumn Field="Title" />
<DxDataGridColumn Field="@nameof(Employee.TitleOfCourtesy)" Width="150px" />
<DxDataGridDateEditColumn Field="BirthDate" Width="150px" />
<DxDataGridDateEditColumn Field="HireDate" Width="150px" />
<DxDataGridColumn Field="Details" AllowSort="false" Width="90px">
<DisplayTemplate><a class="d-block text-left" href="javascript:;" @onclick="() => ShowDetails(context as Employee)">More Info...</a></DisplayTemplate>
<EditTemplate>
<DxMemo @bind-Text="@EditEmployeeNotes" Rows="5" />
<div class="text-muted pt-1" style="font-size:0.8em">Details should be 4 to 256 characters</div>
</EditTemplate>
</DxDataGridColumn>
</Columns>
</DxDataGrid>
<DxPopup @bind-Visible="@PopupVisible"
HeaderText="@PopupHeaderText"
HorizontalAlignment="HorizontalAlignment.Center"
VerticalAlignment="VerticalAlignment.Center">
@PopupContent
</DxPopup>
@code {
IEnumerable<Employee> DataSource { get; set; }
string EditEmployeeNotes { get; set; }
Employee CurrentEmployee { get; set; }
bool PopupVisible {
get { return CurrentEmployee != null; }
set { if(!value) CurrentEmployee = null; }
}
string PopupHeaderText {
get { return CurrentEmployee != null ? CurrentEmployee.FirstName + " " + CurrentEmployee.LastName : ""; }
}
string PopupContent {
get { return CurrentEmployee != null ? CurrentEmployee.Notes : ""; }
}
protected override async Task OnInitializedAsync() {
DataSource = await NwindDataService.GetEmployeesEditableAsync();
}
public void ShowDetails(Employee context) {
CurrentEmployee = context;
}
void OnRowEditStarting(Employee employee) {
EditEmployeeNotes = employee?.Notes;
}
async Task OnRowRemovingAsync(Employee dataItem) {
await NwindDataService.RemoveEmployeeAsync(dataItem);
DataSource = await NwindDataService.GetEmployeesEditableAsync();
StateHasChanged();
}
async Task OnRowUpdatingAsync(Employee dataItem, IDictionary<string, object> newValues) {
newValues.Add(nameof(Employee.Notes), EditEmployeeNotes);
await NwindDataService.UpdateEmployeeAsync(dataItem, newValues);
DataSource = await NwindDataService.GetEmployeesEditableAsync();
StateHasChanged();
}
async Task OnRowInsertingAsync(IDictionary<string, object> newValues) {
newValues.Add(nameof(Employee.Notes), EditEmployeeNotes);
await NwindDataService.InsertEmployeeAsync(newValues);
DataSource = await NwindDataService.GetEmployeesEditableAsync();
StateHasChanged();
}
}
