Can I fix the inconsitency of a cell's format when editing a row?

[Jose]

The data being pulled from the database is a decimal. I used the P4 format to multiply the data into percentage format with 4 decimal places. However, when I edit the row, the cell's revert back to their original format, with 2 decimal places/ How can I fix this?

Code:

    <div class="content-wrapper">

        <div class="row" style="margin-right: 0.2em; margin-top: 1em;">

            <h4 style="margin-top: 0.2em; font-weight:bold">Interest Products</h4>

            <SfGrid ID="Grid" TValue="Program" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update" ,"Cancel" })" AllowPaging="true">

                <SfDataManager Url="@(Configuration["HostName"] + "/Program")" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

                <GridEvents TValue="Program"></GridEvents>

                <GridPageSettings PageSize="8"></GridPageSettings>

                <GridEditSettings NewRowPosition="NewRowPosition.Bottom" AllowAdding="true" AllowDeleting="true" AllowEditing="true"/>

                </GridEditSettings>

                <GridColumns>

                    <GridColumn Field=@nameof(Program.RecordId) HeaderText="RecordId" Visible="false" IsPrimaryKey="true" AllowEditing="false" ValidationRules="@(new ValidationRules { Required = true})" />

                    <GridColumn Field=@nameof(Program.Title) HeaderText="Title" EditType="EditType.DefaultEdit" />

                    <GridColumn Field=@nameof(Program.BaseRate) HeaderText="Base Rate" EditType="EditType.DefaultEdit" Type="ColumnType.String" Format="P4" ValidationRules="@(new ValidationRules{ Required= true })" />

                    <GridColumn Field=@nameof(Program.BonusRate) HeaderText="Bonus Rate" EditType="EditType.DefaultEdit" Format="P4" ValidationRules="@(new ValidationRules{ Required= true })" />

                    <GridColumn Field=@nameof(Program.SecondaryRate) HeaderText="Secondary Rate" EditType="EditType.NumericEdit" Format="P4" />

                </GridColumns>

            </SfGrid>

        </div>

    </div>

[Balamurugan Lakshmanan]

Hi Jose,

Greeting from Syncfusion Support.

From your query, we understood that you need to set the Format="P4" in edited state also. We have prepared the simple sample as per your requirement. Kindly refer the below attached code snippet and sample file for your reference.

 @page "/"

 

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.Grids

@using System.ComponentModel.DataAnnotations;

@using Syncfusion.Blazor.Inputs

 

<SfGrid TValue="Order"  Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update" ,"Cancel" })" AllowPaging="true">

    <SfDataManager Url=https://ej2services.syncfusion.com/production/web-services/api/Orders Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

    <GridPageSettings PageSize="8"></GridPageSettings>

   

     <GridEditSettings NewRowPosition="NewRowPosition.Bottom" AllowAdding="true" AllowDeleting="true" AllowEditing="true"/>               

    <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="150"></GridColumn>

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

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="@IsFormat" ValidationRules="@(new ValidationRules{ Required= true })" TextAlign="TextAlign.Right" Width="120">

            <EditTemplate>

                <SfNumericTextBox TValue="double?" Format="@IsFormat" ID="Freight" @bind-Value="@((context as Order).Freight)"></SfNumericTextBox>

            </EditTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    public string IsFormat { get; set; } = "P4";

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

 

   

}

Please get back to us if you have further queries.

Regards,

Bala.

Attachment: BlazorApp1_6bc94182.zip

[Jose]

I have a question. This solution seems to work, however, when I enter a value to save, it multiplies that value by 100. Is that because the GridColumn Format is set to P4 as well?

Database value: .05

Table value (no edit -display): 5%

Table value(edit mode): 5%

Table value when I press enter: 500%

I want it to stay as 5%

My controller method is responsible for dividing whatever the user puts in by 100 in case you are wondering about extra details of the code

[Monisha Saravanan]

Hi Jose,

We have prepared an simple sample which inputs (0.05) value by default and we could not able to replicate the reported issue at our end on pressing enter from the edited row. Kindly refer the below attached sample and video demo for your reference and get back to us with the below details if we have done any mistake in replication or if we misunderstood your query.

     

1. Share us the entire Grid code snippet.
2. Share us the video demonstration of the issue.
3. If possible kindly share us a simple issue replicating sample at your end.

The above requested details would be very helpful for us to validate the reported issue at our end.

Attachment: BlazorApp1_e6a679cf.zip

[Jose]

As you can see, when I want to increase from 1.23% to 3.33%, and press enter, the following happens. My backend is responsible for dividing what we put in by 100, so a user should type in any percentage they want, but doing so multiplies the entry by 100 using the first solution above.

[Monisha Saravanan]

Hi Jose,

We could able to reproduce the reported behavior at our end. We would like to clarify that by default when the format(“P4”) 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.

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

      <GridPageSettings PageSize="8"></GridPageSettings>

   

     <GridEditSettings NewRowPosition="NewRowPosition.Bottom" AllowAdding="true" AllowDeleting="true" AllowEditing="true"/>               

    <GridColumns>

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

            <EditTemplate>

                @{

                    var Context = (context as Order);

                <SfNumericTextBox TValue="decimal?" Format="@IsFormat" ID="Freight" @bind-Value="@(Context.Freight)">

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

                </SfNumericTextBox>

                }

            </EditTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    public string IsFormat { get; set; } = "P4";

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

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

    {

        args.Value = args.Value / 100;

        data.Freight = args.Value;

      

        // Here you can customize your code

    }

   

}

 

Please let us know if you have any concerns.

Regards,

Monisha

Attachment: BlazorApp1_34133961.zip