DxTextBoxSettings Class

Contains settings of an auto-generated text box editor.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxTextBoxSettings :
    DxButtonEditSettings,
    ITextBoxSettings,
    IButtonEditSettings,
    ITextEditSettings,
    IEditSettings

Remarks

The DxTextBoxSettings class contains settings of auto-generated text editors displayed in edit cells, filter row, inline, and pop-up edit forms.

Auto-Generated Text Box in Filter Row and Edit Cells

Grid and TreeList components automatically generate editors for columns based on their data types. For the String type, they generate the text box editor. Use properties of the DxTextBoxSettings class to customize settings of auto-generated text box editors. To apply these settings, specify a DxTextBoxSettings object in a column’s EditSettings property.

Note that if you specify text box settings for a column containing non-string values, these settings have no effect and the component renders a read-only text box editor.

Razor
EmployeeService.cs
Employee.cs

razor

@inject EmployeeService EmployeeData

<DxGrid Data="@employees" PageSize="4" ShowFilterRow="true"
        EditMode="GridEditMode.EditRow" KeyFieldName="ID">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" >
            <EditSettings>
                <DxTextBoxSettings ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="LastName" >
            <EditSettings>
                <DxTextBoxSettings ShowValidationIcon="true" NullText="Type a name" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Email" />
    </Columns>
</DxGrid>

csharp

public class EmployeeService {
    public Task<Employee[]> GetData() {
        List<Employee> employee = new List<Employee>();

        employee.Add(new Employee() { ID = 00156, FirstName = "Nancy", LastName = "Davolio", BirthDate = new DateTime(1978, 08, 12), HireDate= new DateTime(2002, 10, 01), Email= "[email protected]" });
        employee.Add(new Employee() { ID = 01200, FirstName = "Andrew", LastName = "Fuller", BirthDate = new DateTime(1974, 02, 11), HireDate = new DateTime(2002, 06, 21), Email= "[email protected]" });
        employee.Add(new Employee() { ID = 00567, FirstName = "Janet", LastName = "Leverling", BirthDate = new DateTime(1985, 06, 30), HireDate = new DateTime(2010, 07, 17), Email= "[email protected]" });
        employee.Add(new Employee() { ID = 00168, FirstName = "Margaret", LastName = "Peacock", BirthDate = new DateTime(1990, 12, 25), HireDate = new DateTime(2014, 11, 09), Email= "[email protected]" });
        employee.Add(new Employee() { ID = 01290, FirstName = "Steven", LastName = "Buchanan", BirthDate = new DateTime(1995, 03, 05), HireDate = new DateTime(2020, 01, 13), Email = "[email protected]" });
        employee.Add(new Employee() { ID = 00938, FirstName = "Michael", LastName = "Suyama", BirthDate = new DateTime(1987, 02, 28), HireDate = new DateTime(2018, 03, 22), Email= "[email protected]" });
        employee.Add(new Employee() { ID = 01098, FirstName = "Robert", LastName = "King", BirthDate = new DateTime(1992, 11, 08), HireDate = new DateTime(2018, 12, 15), Email= "[email protected]" });
        employee.Add(new Employee() { ID = 03027, FirstName = "Laura", LastName = "Callahan", BirthDate = new DateTime(1991, 10, 18), HireDate = new DateTime(2015, 11, 03), Email= "[email protected]" });
        employee.Add(new Employee() { ID = 00633, FirstName = "Anne", LastName = "Dodsworth", BirthDate = new DateTime(1983, 01, 21), HireDate = new DateTime(2004, 08, 21), Email= "[email protected]" });
            return Task.FromResult(employee.ToArray());
    }
}

csharp

public class Employee {
    public int ID { get; set; }
    [Required]
    public string? FirstName { get; set; }
    [Required]
    public string? LastName { get; set; }
    public DateTime? BirthDate { get; set; }
    public DateTime? HireDate { get; set; }
    public string? Email { get; set; }
    public string? Notes { get; set; }
}

Auto-Generated Text Box in Edit Forms

You can display an auto-generated column editor in the inline or pop-up edit form. Call the GetEditor method to get the column editor in the edit form template.

Razor
CSS

razor

<DxGrid Data="@employees" PageSize="4" KeyFieldName="ID"
        EditMode="GridEditMode.EditForm">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" >
            <EditSettings>
                <DxTextBoxSettings CssClass="gray-style" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="LastName" >
            <EditSettings>
                <DxTextBoxSettings CssClass="gray-style" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Email" />
        <DxGridDataColumn FieldName="Notes" Visible="false" >
            <EditSettings>
                <DxMemoSettings Rows="3" ResizeMode="MemoResizeMode.Disabled" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout >
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("BirthDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="E-mail:" ColSpanMd="12">
                @EditFormContext.GetEditor("Email")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Notes:" ColSpanMd="12">
                @EditFormContext.GetEditor("Notes")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    Employee[]? employees;
    protected override async Task OnInitializedAsync() {
        employees = await EmployeeData.GetData();
    }
    //...
}

css

.gray-style {
    border-width: 1px;
    border-color: gray;
    background-color: #ECECEC;
}

Runtime Customization

At runtime, call the GetColumnEditSettings method to access settings of a text box in the specified column. The following code snippet dynamically disables the editor.

razor

<DxGrid @ref="grid" Data="@employees" KeyFieldName="ID" EditMode="GridEditMode.EditRow" >
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Email" />
    </Columns>
</DxGrid>
<DxButton Text="Disable the Name" Click="Button_Click" />

@code {
    IGrid grid { get; set; }
    Employee[]? employees;
    protected override async Task OnInitializedAsync() {
        employees = await EmployeeData.GetData();
    }
    void Button_Click() {
        var firstNameEditSettings = grid.GetColumnEditSettings<ITextBoxSettings>("FirstName");
        var lastNameEditSettings = grid.GetColumnEditSettings<ITextBoxSettings>("LastName");
        grid.BeginUpdate();
        firstNameEditSettings.Enabled = false;
        lastNameEditSettings.Enabled = false;
        grid.EndUpdate();
    }
}

Implements

Inheritance

Object ComponentBase DevExpress.Blazor.Internal.BranchedRenderComponent DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent DxEditSettings DxTextEditSettings DxButtonEditSettings DxTextBoxSettings