DxComboBoxSettings.ItemDisplayTemplate Property

Specifies a template used to display the combo box editor items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<ComboBoxItemDisplayTemplateContext> ItemDisplayTemplate { get; set; }

Property Value

Type	Description
RenderFragment<ComboBoxItemDisplayTemplateContext>	The template content.

Remarks

Place HTML markup in the <ItemDisplayTemplate> tag to define custom content for ComboBox items. Use the template’s context parameter to access a data object and its fields (for instance, get the value of a data field).

The following code snippet makes the editor’s items bold:

<DxGrid Data="Products"
        EditMode="GridEditMode.EditRow"
        CustomizeEditModel="Grid_CustomizeEditModel"
        EditModelSaving="Grid_EditModelSaving">
    <Columns>
        <DxGridCommandColumn DeleteButtonVisible="false" Width="15%" />
        <DxGridDataColumn FieldName="ProductName" Width="25%" />
        <DxGridDataColumn FieldName="CategoryId" Caption="Category" Width="10%">
            <EditSettings>
                <DxComboBoxSettings Data="Categories" ValueFieldName="CategoryId" TextFieldName="CategoryName">
                    <ItemDisplayTemplate>
                        <div><b>@context.DisplayText</b></div>
                    </ItemDisplayTemplate>
                </DxComboBoxSettings>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%">
            <EditSettings>
                <DxSpinEditSettings MinValue="0M" Mask="n3" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="UnitsInStock" />
        <DxGridDataColumn FieldName="QuantityPerUnit" Width="15%" />   
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>

Implements

ItemDisplayTemplate