ContextQMD
Back to Devexpress

DxTreeList.DataColumnFilterRowCellTemplate Property

blazor-devexpress-dot-blazor-dot-dxtreelist-22fe4c8b.md

latest11.8 KB
Original Source

DxTreeList.DataColumnFilterRowCellTemplate Property

Allows you to replace automatically generated editors with custom content in all filter row cells displayed for data columns.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[Parameter]
public RenderFragment<TreeListDataColumnFilterRowCellTemplateContext> DataColumnFilterRowCellTemplate { get; set; }

Property Value

TypeDescription
RenderFragment<TreeListDataColumnFilterRowCellTemplateContext>

Template content.

|

Remarks

Enable the ShowFilterRow option to activate a row that allows users to filter data. The filter row displays automatically generated in-place editors for all data columns. Editor types depend on data types of the corresponding column fields. You can customize settings of automatically generated editors, hide them, or replace them with other editors.

Read Tutorial: Filter Row

Place one or more editors in a column’s FilterRowCellTemplate to display custom content in the filter row cell. To define a custom template for all cells, define the TreeList’s DataColumnFilterRowCellTemplate. Both templates include the context parameter that has the following properties:

DataColumnAllows you to access the processed column.TreeListAllows you to access the TreeList and its extensive API.FilterCriteriaAllows you to apply filter criteria to the column.FilterRowValueAllows you to bind an editor value to a filter row value. Note that the editor should have a nullable value type.

Note

The TreeList does not render automatically generated editors in filter row cells if you define DataColumnFilterRowCellTemplate.

The following code snippet defines a common template for all filter row cells:

razor
@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites" ShowFilterRow="true">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2" FilterRowOperatorType="TreeListFilterRowOperatorType.LessOrEqual">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" FilterRowOperatorType="TreeListFilterRowOperatorType.LessOrEqual" />
        <DxTreeListDataColumn FieldName="Volume10pow9KM3" DisplayFormat="N2" FilterRowOperatorType="TreeListFilterRowOperatorType.LessOrEqual">
            <HeaderCaptionTemplate>Volume, 10<sup>9</sup> &#215; km<sup>3</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="SurfaceGravity" DisplayFormat="N2" FilterRowOperatorType="TreeListFilterRowOperatorType.LessOrEqual">
            <HeaderCaptionTemplate>Gravity, m/s<sup>2</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
    </Columns>
    <DataColumnFilterRowCellTemplate>
        @if (context.DataColumn.FieldName == "Name" || context.DataColumn.FieldName == "TypeOfObject") {
            <DxTextBox Text="@((string?)context.FilterRowValue)"
                       TextChanged="(string? v) => context.FilterRowValue = v"
                       ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
            </DxTextBox>
        }
        else {
            <DxSpinEdit Value="(double?)context.FilterRowValue"
                        ValueChanged="(double? v) => context.FilterRowValue = v"
                        ShowSpinButtons="false"
                        ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
                <Buttons>
                    <DxEditorButton IconCssClass="editor-icon editor-icon-caret-left"
                                    Tooltip="Decrement by 10"
                                    Position="@EditorButtonPosition.Left"
                                    Click="() => OnIncrementButtonClick(context, false)" />
                    <DxEditorButton IconCssClass="editor-icon editor-icon-caret-right"
                                    Tooltip="Increment by 10"
                                    Click="() => OnIncrementButtonClick(context, true)" />
                </Buttons>
            </DxSpinEdit>
        }
    </DataColumnFilterRowCellTemplate>
</DxTreeList>

@code {
    object TreeListData { get; set; }

    protected override async Task OnInitializedAsync() {
        TreeListData = SpaceObjectDataProvider.GenerateData();
    }
    void OnIncrementButtonClick(TreeListDataColumnFilterRowCellTemplateContext context, bool isIncrementButton) {
        var oldValue = context.FilterRowValue != null ? (double)context.FilterRowValue : 0;
        context.FilterRowValue = oldValue + (isIncrementButton ? 10 : -10);
    }
}
csharp
using System.Collections.Generic;

public class SpaceObject {
    public string Name { get; set; }
    public double MeanRadiusInKM { get; set; }
    public double Volume10pow9KM3 { get; set; }
    public double Mass10pow21kg { get; set; }
    public double Density { get; set; }
    public double SurfaceGravity { get; set; }
    public string TypeOfObject { get; set; }
    public List<SpaceObject> Satellites { get; set; }
    public SpaceObject(
        string name,
        double meanRadiusInKM,
        double volume10pow9KM3,
        double mass10pow21kg,
        double density,
        double surfaceGravity,
        string typeOfObject,
        List<SpaceObject> satellites = null
    ) {
        Name = name;
        MeanRadiusInKM = meanRadiusInKM;
        Volume10pow9KM3 = volume10pow9KM3;
        Mass10pow21kg = mass10pow21kg;
        Density = density;
        SurfaceGravity = surfaceGravity;
        TypeOfObject = typeOfObject;
        Satellites = satellites ?? new List<SpaceObject>();
    }
}
csharp
public class SpaceObjectDataProvider {
    public List<SpaceObject> GenerateData() {
        return new List<SpaceObject>() {
            new SpaceObject("Sun", 696000, 1412000000, 1989100000, 1.409, 274.0, "Star", new List<SpaceObject>() {
                new SpaceObject("Mercury", 2439.7, 60.83, 330.2, 5.43, 3.7, "Planet"),
                new SpaceObject("Venus", 6051.8, 928.43, 4868.5, 5.24, 8.872, "Planet"),
                new SpaceObject("Earth", 6371.0, 1083.21, 5973.6, 5.515, 9.78033, "Planet", new List<SpaceObject> () {
                    new SpaceObject("Moon", 1737.1, 21.958, 73.5, 3.3464, 1.625, "Satellite")
                }),
                new SpaceObject("Mars", 3390.0, 163.18, 641.85, 3.94, 3.7, "Planet"),
                new SpaceObject("Jupiter", 69911, 1431280, 1898600, 1.33, 24.79, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Ganymede", 2631.2, 76.30, 148.2, 1.936, 1.428, "Satellite"),
                    new SpaceObject("Callisto", 2410.3, 58.65, 107.6, 1.83, 1.23603, "Satellite"),
                    new SpaceObject("Io", 1821.5, 25.32, 89.3, 3.528, 1.797, "Satellite"),
                    new SpaceObject("Europa", 1561, 15.93, 48, 3.01, 1.316, "Satellite"),
                }),
                new SpaceObject("Saturn", 58232, 827130, 568460, 0.70, 10.445, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Titan", 2576, 71.52, 134.5, 1.88, 1.354, "Satellite"),
                    new SpaceObject("Rhea", 764.4, 1.87, 2.3166, 1.23, 0.26, "Satellite"),
                    new SpaceObject("Iapetus", 736, 1.55, 1.9739, 1.08, 0.223, "Satellite"),
                    new SpaceObject("Dione", 561.6, 0.73, 1.096, 1.48, 0.232, "Satellite"),
                    new SpaceObject("Tethys", 533, 0.624, 0.6173, 1.15, 0.145, "Satellite"),
                    new SpaceObject("Enceladus", 252.1, 0.067, 0.108, 1.61, 0.111, "Satellite"),
                    new SpaceObject("Mimas", 198.3, 0.033, 0.03749, 1.15, 0.06363, "Satellite")
                }),
                new SpaceObject("Uranus", 25362, 68340, 86832, 1.30, 8.87, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Titania", 788.9, 2.06, 3.526, 1.72, 0.378, "Satellite"),
                    new SpaceObject("Oberon", 761.4, 1.85, 3.014, 1.63, 0.347, "Satellite"),
                    new SpaceObject("Umbriel", 584.7, 0.84, 1.2, 1.4, 0.234, "Satellite"),
                    new SpaceObject("Ariel", 578.9, 0.81, 1.35, 1.67, 0.269, "Satellite"),
                    new SpaceObject("Miranda", 235.8, 0.055, 0.0659, 1.20, 0.07910375, "Satellite"),
                }),
                new SpaceObject("Neptune", 24622, 62540, 102430, 1.76, 11.15, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Triton", 1353.4, 10.38, 21.5, 2.061, 0.782, "Satellite"),
                    new SpaceObject("Proteus", 210, 0.038, 0.050, 1.3, 0.0666, "Satellite"),
                }),
                new SpaceObject("Eris", 1170, 7, 16.7, 2.25, 0.662, "Dwarf planet"),
                new SpaceObject("Pluto", 1153, 7.15, 13.105, 2.0, 0.61, "Dwarf planet"),
                new SpaceObject("Makemake", 710, 1.8, 3, 2.0, 0.4, "Dwarf planet"),
                new SpaceObject("Haumea", 575, 1.3, 4.006, 3, 0.44, "Dwarf planet"),
                new SpaceObject("Ceres", 475, 0.437, 0.95, 2.08, 0.27, "Dwarf planet"),
                new SpaceObject("Pallas", 266, 0.078, 0.211, 2.8, 0.2, "Asteroid"),
                new SpaceObject("Vesta", 264.6, 0.078, 0.262, 3.42, 0.251, "Asteroid")
            })
        };
    }
}
csharp
// ...
builder.Services.AddSingleton<SpaceObjectDataProvider>();
css
.editor-icon {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}
.editor-icon-caret-right {
    -webkit-mask-image: url("../images/icons/caret-right.svg");
    mask-image: url("../images/icons/caret-right.svg");
}
.editor-icon-caret-left {
    -webkit-mask-image: url("../images/icons/caret-left.svg");
    mask-image: url("../images/icons/caret-left.svg");
}

For additional information about templates in the TreeList component, refer to the following topic: Templates in Blazor TreeList.

Implements

DataColumnFilterRowCellTemplate

See Also

DxTreeList Class

DxTreeList Members

DevExpress.Blazor Namespace