DxTreeListDataColumn.EditSettings Property

Allows you to customize the editor associated with this column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.Grid.v26.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment EditSettings { get; set; }

Property Value

Type	Description
RenderFragment	Cell editor settings.

Remarks

The TreeList component generates and configures cell editors for columns based on associated data types. The component automatically displays column editors in the filter row and in data rows during edit operations. You can also place these editors in the edit form or pop-up edit form.

Editor Settings vs Cell Edit Template

You can customize cell editors using editor settings or a cell template. Choose between these options based your scenario:

Task	Recommended Option
Display a standard cell editor[1]	Editor Settings
Customize standard editor appearance or behavior[1]	Editor Settings
Use any DevExpress or third-party component as a cell editor	Cell Edit Template
Implement advanced data binding	Cell Edit Template
Handle editor events	Cell Edit Template
Add custom buttons to an editor	Cell Edit Template
Focus an editor programmatically	Cell Edit Template

Configure Editor Settings

Declare an object that contains editor settings in the <EditSettings> tag. This is how you can customize the default editor or replace it with another editor. If the editor does not support the associated data type, the TreeList replaces it with a read-only text box.

The table below list classes that define cell editor settings and the corresponding data types:

Editor Settings	Generated for Data Types	Supported Data Types
DxCheckBoxSettings[2]	Boolean	All data types
DxComboBoxSettings	Enum	All data types
DxDateEditSettings	DateOnly, DateTime, DateTimeOffset	DateOnly, DateTime, DateTimeOffset
DxMaskedInputSettings	Never generated	Numeric, String, TimeSpan, TimeOnly, DateTime, DateOnly, DateTimeOffset
DxMemoSettings	Never generated	String
DxSpinEditSettings	Numeric	Numeric
DxTextBoxSettings	String	String
DxTimeEditSettings	TimeOnly	TimeOnly, TimeSpan, DateTime

Handle the TreeList’s CustomizeFilterRowEditor event to customize editors in the filter row. The CustomizeDataRowEditor event allows you to customize editors displayed in data rows, edit forms, or pop-up edit forms. At runtime, call the GetColumnEditSettings<T>(String) to access and customize editor settings.

Example

In the following code snippet, the Task column’s markup contains the DxTextBoxSettings object that customizes the automatically generated editor.

Razor

@inject EmployeeTaskService EmployeeTaskService

<DxTreeList Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId" ShowFilterRow="true">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Caption="Task" Width="40%">
            <EditSettings>
                <DxTextBoxSettings NullText="Type a search string"
                                   ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Never" />
            </EditSettings>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="EmployeeName"  />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
</DxTreeList>

@code {
    List<EmployeeTask> TreeListData { get; set; }

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
}

EmployeeTask.cs

public class EmployeeTask {
    public int Id { get; set; }
    public int ParentId { get; set; }
    public string Name { get; set; }
    public string EmployeeName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime DueDate { get; set; }
    public int Progress { get; set; }
    public EmployeeTask() { }
    public EmployeeTask(
        int id,
        int parentId,
        string name,
        string employeeName,
        DateTime startDate,
        DateTime dueDate,
        int progress
        )
    {
        Id = id;
        ParentId = parentId;
        Name = name;
        EmployeeName = employeeName;
        StartDate = startDate;
        DueDate = dueDate;
        Progress = progress;
    }
}

EmployeeTaskService.cs

public class EmployeeTaskService {
    public List<EmployeeTask> GenerateData() {
        return new List<EmployeeTask>() {
            new EmployeeTask(1, 0, "Simplify & Clarify Product Messaging", "John Heart", new DateTime(2018, 4, 3), new DateTime(2018, 4, 14), 14),
            new EmployeeTask(2, 1, "Prepare Financial Reports", "Samantha Bright", new DateTime(2018, 4, 3), new DateTime(2018, 4, 7), 17),
            new EmployeeTask(3, 1, "Prepare Marketing Plan", "Arthur Miller", new DateTime(2018, 4, 7), new DateTime(2018, 4, 14), 11),
            new EmployeeTask(4, 0, "Create Action Plan to Improve Customer Engagement", "Robert Reagan", new DateTime(2017, 8, 8), new DateTime(2018, 4, 8), 23),
            new EmployeeTask(5, 4, "Update Personnel Files", "Greta Sims", new DateTime(2017, 8, 8), new DateTime(2017, 10, 18), 100),
            new EmployeeTask(6, 4, "Review Health Insurance Options", "Brett Wade", new DateTime(2017, 9, 27), new DateTime(2017, 11, 10), 37),
            new EmployeeTask(7, 4, "Choose Between PPO and HMO Health Plan", "Sandra Johnson", new DateTime(2017, 12, 13), new DateTime(2018, 3, 23), 17),
            new EmployeeTask(8, 4, "Update Google Adwords Strategy", "Ed Holmes", new DateTime(2017, 8, 23), new DateTime(2017, 12, 23), 45),
            new EmployeeTask(9, 4, "Create New Brochure Design", "Barb Banks", new DateTime(2018, 1, 3), new DateTime(2018, 3, 14), 17),
            new EmployeeTask(10, 4, "Obtain Price Quote for New Brochure", "Kevin Carter", new DateTime(2018, 2, 1), new DateTime(2018, 3, 15), 18),
            new EmployeeTask(11, 4, "Brochure Design Review", "Cindy Stanwick", new DateTime(2017, 8, 22), new DateTime(2017, 10, 28), 4),
            new EmployeeTask(12, 4, "Review Website Redesign Strategy", "Sammy Hill", new DateTime(2017, 9, 16), new DateTime(2018, 3, 6), 73),
            new EmployeeTask(13, 4, "Roll Out New Website", "Davey Jones", new DateTime(2017, 11, 7), new DateTime(2018, 2, 6), 9),
            new EmployeeTask(14, 4, "Update Sales/Marketing Strategy", "Victor Norris", new DateTime(2017, 12, 13), new DateTime(2018, 4, 2), 5),
            new EmployeeTask(15, 4, "Update Sales/Revenue Report", "Mary Stern", new DateTime(2017, 12, 25), new DateTime(2018, 4, 2), 4),
            new EmployeeTask(16, 4, "Direct vs Online Sales Comparison Report", "Robin Cosworth", new DateTime(2018, 1, 2), new DateTime(2018, 3, 20), 14),
            new EmployeeTask(17, 4, "Review Sales Report and Approve Modifications", "Kelly Rodriguez", new DateTime(2017, 9, 4), new DateTime(2017, 10, 30), 8),
            new EmployeeTask(18, 4, "Update R&D Strategy", "James Anderson", new DateTime(2017, 11, 13), new DateTime(2017, 12, 4), 12),
            new EmployeeTask(19, 4, "Discuss Updated R&D Strategy", "Antony Remmen", new DateTime(2017, 10, 29), new DateTime(2017, 12, 31), 14),
            new EmployeeTask(20, 4, "Update QA Strategy", "Olivia Peyton", new DateTime(2017, 10, 31), new DateTime(2017, 11, 2), 18),
            new EmployeeTask(21, 4, "Schedule Training Events", "Taylor Riley", new DateTime(2017, 11, 19), new DateTime(2018, 4, 7), 21),
            new EmployeeTask(22, 4, "Approve Hiring of John Jeffers", "Amelia Harper", new DateTime(2018, 1, 7), new DateTime(2018, 4, 8), 10),
            new EmployeeTask(23, 0, "Increase Average Subscription Price", "Wally Hobbs", new DateTime(2017, 8, 9), new DateTime(2017, 9, 13), 96),
            new EmployeeTask(24, 23, "Update Non-Compete Agreements", "Brad Jameson", new DateTime(2017, 8, 9), new DateTime(2017, 9, 3), 96),
            new EmployeeTask(25, 23, "Update Employee Records with New NDA", "Karen Goodson", new DateTime(2017, 8, 23), new DateTime(2018, 9, 10), 100)
        };
    }
}

Program.cs

// ...
builder.Services.AddSingleton<EmployeeTaskService>();

Implements

EditSettings

EditSettings

Footnotes

1. Standard editors include DevExpress Blazor CheckBox, ComboBox, Date Edit, Masked Input, Memo, Spin Edit, Text Box, and TimeEdit components.

2. The TreeList replaces a checkbox editor with a combo box in the filter row.