DxTextBoxSettings Class

Contains settings of an auto-generated text box editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Remarks

The DxTextBoxSettings class contains settings of auto-generated text editors displayed in the filter row, edit forms, and data rows during edit operations.

Auto-Generated Text Box in Filter Row and Edit Cells

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

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

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>

EmployeeService.cs

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

Employee.cs

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 edit form or popup edit form. Call the GetEditor(String) method to get the column editor in the edit form template.

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

<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();
    }
    //...
}

Runtime Customization

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

<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

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

ITextBoxSettings

IButtonEditSettings

ITextEditSettings

IEditSettings

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.BranchedRenderComponent

DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent

DxEditSettings

DxTextEditSettings

DxButtonEditSettings

DxTextBoxSettings