DxTreeListDataColumn.DisplayFormat Property
Specifies the format of column and summary values calculated for this column.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(null)]
[Parameter]
public string DisplayFormat { get; set; }
Property Value
Type | Default | Description |
---|---|---|
String | null | The format string. |
Remarks
Use the DisplayFormat
property to format values displayed in column cells and summaries. For information about supported format strings, refer to the following topics:
Note
A summary’s ValueDisplayFormat property takes priority over the column’s DisplayFormat
.
The code snippet below applies the following formats:
- The month/day pattern. to StartDate and DueDate fields.
- The percent format specifier to the Status field.
@inject EmployeeTaskService EmployeeTaskService
<DxTreeList Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId">
<Columns>
<DxTreeListDataColumn FieldName="Name" Caption="Task" />
<DxTreeListDataColumn FieldName="EmployeeName" />
<DxTreeListDataColumn FieldName="StartDate" DisplayFormat="m" />
<DxTreeListDataColumn FieldName="DueDate" DisplayFormat="m" />
<DxTreeListDataColumn FieldName="Status" Caption="Progress" DisplayFormat="p0" />
</Columns>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
}
The DisplayFormat
property also accepts format strings with the {0} placeholder, which replaces a column value. The format string syntax is as follows:
<custom text>{0:<format specifier>}<custom text>
- custom text - any plain text displayed before and after the column value.
- ‘{0}’ - the placeholder for the column value.
- format specifier - specifies the value format.
The following code shows possible format strings:
<DxTreeList Data="TreeListDataSource">
<Columns>
@* ... *@
<DxTreeListDataColumn FieldName="Status" DisplayFormat="c" />
@* or *@
<DxTreeListDataColumn FieldName="Status" DisplayFormat="${0}" />
@* or *@
<DxTreeListDataColumn FieldName="Status" DisplayFormat="my custom text {0:c}" />
</Columns>
</DxTreeList>