DxSpinEditSettings Class

Contains settings of an auto-generated spin editor.

Assembly: DevExpress.Blazor.v24.2.dll

Declaration

public class DxSpinEditSettings :
    DxButtonEditSettings,
    ISpinEditSettings,
    IButtonEditSettings,
    ITextEditSettings,
    IEditSettings

Remarks

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

Auto-Generated Spin Editor in Filter Row and Edit Cells

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

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

In the following code snippet, the Grid renders spin editors for ProductID, UnitPrice, and UnitsInOrder columns. The ProductID column’s markup contains the DxSpinEditSettings object that customizes the auto-generated editor.

<DxGrid Data="@products" 
        ShowFilterRow="true" 
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductID" >
            <EditSettings>
                <DxSpinEditSettings ShowSpinButtons="false" ReadOnly="true" NullText="Type the ID" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
    </Columns>
</DxGrid>

public class ProductService {
    public Task<Product[]> GetData() {
        List<Product> products = new List<Product>();

        products.Add(new Product() { ProductID = 1, ProductName = "Chai", UnitPrice = 19, UnitsInOrder = 20 });
        products.Add(new Product() { ProductID = 2, ProductName = "Chang", UnitPrice = 19, UnitsInOrder = 40 });
        products.Add(new Product() { ProductID = 3, ProductName = "Aniseed Syrup", UnitPrice = 10, UnitsInOrder = 70 });
        products.Add(new Product() { ProductID = 4, ProductName = "Chef Anton's Cajun Seasoning", UnitPrice = 22, UnitsInOrder = 12 });
        products.Add(new Product() { ProductID = 5, ProductName = "Chef Anton's Gumbo Mix", UnitPrice = 21.35m, UnitsInOrder = 16 });
        products.Add(new Product() { ProductID = 6, ProductName = "Grandma's Boysenberry Spread", UnitPrice = 25, UnitsInOrder = 20 });
        products.Add(new Product() { ProductID = 7, ProductName = "Uncle Bob's Organic Dried Pears", UnitPrice = 30, UnitsInOrder = 24 });
        products.Add(new Product() { ProductID = 8, ProductName = "Northwoods Cranberry Sauce", UnitPrice = 40, UnitsInOrder = 18 });
        products.Add(new Product() { ProductID = 9, ProductName = "Mishi Kobe Niku", UnitPrice = 97, UnitsInOrder = 32 });
        products.Add(new Product() { ProductID = 10, ProductName = "Ikura", UnitPrice = 31, UnitsInOrder = 10 });
        products.Add(new Product() { ProductID = 11, ProductName = "Queso Cabrales", UnitPrice = 21, UnitsInOrder = 30 });
        products.Add(new Product() { ProductID = 12, ProductName = "Queso Manchego La Pastora", UnitPrice = 38, UnitsInOrder = 10 });

        return Task.FromResult(products.ToArray());
    }
}

public class Product {
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public decimal? UnitPrice { get; set; }
    public short? UnitsInOrder { get; set; }
}

Modified Editors

Auto-Generated Spin Editor 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.

<DxGrid Data="@products" 
        ShowFilterRow="true">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductID" >
            <EditSettings>
                <DxSpinEditSettings ShowSpinButtons="false" ReadOnly="true" NullText="Type the ID" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout >
            <DxFormLayoutItem Caption="Product ID:" ColSpanMd="6">
                @EditFormContext.GetEditor("ProductID")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Product Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("ProductName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Unit Price:" ColSpanMd="6">
                @EditFormContext.GetEditor("UnitPrice")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Units In Order:" ColSpanMd="6">
                @EditFormContext.GetEditor("UnitsInOrder")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

Editors in Edit Form

Runtime Customization

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

<DxGrid @ref="grid" Data="@products" EditMode="GridEditMode.EditRow" >
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductID" />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
    </Columns>
</DxGrid>
<DxButton Text="Disable the ID" Click="Button_Click" />

@code {
    IGrid grid { get; set; }
    private Product[]? products;
    protected override async Task OnInitializedAsync() {
        products = await ProductData.GetData();
    }
    void Button_Click() {
        var settings = grid.GetColumnEditSettings<ISpinEditSettings>("ProductID");
        grid.BeginUpdate();
        settings.Enabled = false;
        grid.EndUpdate();
    }
}