Step property EditorSettings for GridColumn not being applied

[Jose]

Cell Edit Types in Blazor DataGrid Component | Syncfusion

I am following the example above. It seems like something simple, but all I am trying to do is set the Step size to increase/decrease the increment size by .01. However, when I test the spin button, it will continue to increase by 1.0, not .01

Is there an additional step I am missing?

code:

  <GridColumn Field=@nameof(Program.Rate) HeaderText="Rate" EditType="EditType.NumericEdit" Type="ColumnType.Number" Format="P2" EditorSettings="@FreightEditParams" ValidationRules="@(new ValidationRules{ Required= true } )"/>

    public IEditorSettings FreightEditParams = new NumericEditCellParams

    {

         Params = new NumericTextBoxModel<object>() { Step = 0.01M, ShowSpinButton = true }

    };

[Balamurugan Lakshmanan]

Hi Jose,

Greeting from Syncfusion Support.

From your query, we understood that you are facing an issue with step property  in EditorSettings for GridColumn. We have prepared the simple sample as per your shared code snippet. Kindly refer the attached sample file, video demo and code snippet to resolve your issues.

 @page "/"

 

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Inputs

 

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Rate" EditType="EditType.NumericEdit" Type="ColumnType.Number" Format="P2" EditorSettings="@FreightEditParams" ValidationRules="@(new ValidationRules{ Required= true } )"></GridColumn>

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

    public List<Order> Orders { get; set; }

 

    public IEditorSettings FreightEditParams = new NumericEditCellParams

 

        {

 

            Params = new NumericTextBoxModel<object>() { Step = 0.01M, ShowSpinButton = true }

 

        };

 

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 75).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),

            ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

        public string ShipCountry { get; set; }

    }

    }

Sample : https://blazorplayground.syncfusion.com/embed/hNrqNPZUqlOoLMih?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please get back to us if you have further queries.

Regards,

Bala.

Attachment: VideoDemo_612d03a.zip

[Jose]

This is exactly what I did, however, using the spin button will increase/decrease the decimal by a whole number rather than .01

[Balamurugan Lakshmanan]

Hi Jose,

We would like to clarify that by default when the format(“P2”) is applied it will multiply the entered input into 100. This is the default behavior.

However, you can customize the value by using ValueChange Event handler of SfNumericTextBox. Here in the below code we have divided the value by 100 and reassigned the value to the argument value and context to achieve the desired result. Kindly check the below attached code snippet and sample for your clarification.

 @page "/"

 

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Inputs

 

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Rate" EditType="EditType.NumericEdit" Format="P2" Type="ColumnType.Number" ValidationRules="@(new ValidationRules{ Required= true } )">

            <EditTemplate>

                @{

                    var Context = (context as Order);

                    <SfNumericTextBox TValue="double?" Step="0.01" ShowSpinButton="true"  ID="Freight" @bind-Value="@(Context.Freight)">

                        <NumericTextBoxEvents TValue="double?" ValueChange="@(args=>ValueChangeHandler(args,Context ))"></NumericTextBoxEvents>

                    </SfNumericTextBox>

                }

            </EditTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

    public List<Order> Orders { get; set; }

 

    private void ValueChangeHandler(ChangeEventArgs<double?> args, Order data)

    {

        args.Value = args.Value / 100;

        data.Freight = args.Value;

 

        // Here you can customize your code

    }

 

    //public IEditorSettings FreightEditParams = new NumericEditCellParams

 

    //    {

 

    //        Params = new NumericTextBoxModel<object>() { Step = 0.01M, ShowSpinButton = true }

 

    //    };

 

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 75).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),

            ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

        public string ShipCountry { get; set; }

    }

    }

Please get back to us if you have further queries.

Attachment: BlazorApp1_4b586878.zip