percentage in a grid

[Neider]

hi my my friends.

I´m wondering how can I edit some  percentage value in a cell of my grid just by typing a value for example:

if I write 2 in the cell, the cell put 2.00% not 200.00%.

And this is my grid column details:

<e-column field="AllocationPercentage" header-text="Tasa de asignación" allow-editing="true" edit-type="NumericEdit" 

                    numeric-edit-options="@new Syncfusion.JavaScript.Models.EditorProperties { DecimalPlaces = 2, ShowSpinButton=false, MinValue=0 }"></e-column>

[Vignesh Natarajan]

Hi Neider, 

 

Thanks for using Syncfusion products. 

 

Query: “if I write 2 in the cell, the cell put 2.00% not 200.00%.” 

 

From your query, we understand that you are facing issue while editing a percentage value in ejGrid.But it is default behavior of the NumericText box to display 2.00% when 2 is typed in numericText when decimalPlaces value is 2. So kindly share the following details which help us to validate the reported query. 

 

1. How do want to display the value in Grid cell after editing?
2. DecimalPlaces 2 denotes the values after the (.) operator. Are you mentioning that as the issue?.
3. If you want to display the 2 as 200% then typing 100 will become 10,000%. So it is not right behavior.
4. Kindly share more details regarding your requirement.
5. Share your essential studio version (xx.x.x.xx)

 

Regards, 

Vignesh Natarajan 

[Neider]

Hi, mi friends the problem is: when I put for example 2 in the cell, the cell show 200,0% after editing, I want that the cell show 2,0%, the only way to show is putting 0.2 and this is not the idea, for a best user experience is put 2 y the cell show 2%.

[Vignesh Natarajan]

Hi Neider, 

Thanks for the update. 

Query: when I put for example 2 in the cell, the cell show 200,0% after editing 

From the shared query we are able to understand that you have facing the issue will editing the percentage column. But we are unable reproduce the reported issue at our end. Please refer the below link, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionASPNETCoreApplication1-137099326.zip  

After referring the sample still facing the issue please get back to us with the following details. 

1. Share the Essential studio version(xx.x.x.xx).
2. Share the complete grid code example (both view and controller page)
3. How you showed the percentage value in the grid column (i.e. where you apply that format to the cell value). Please share that code.
4. Share the video demonstration of the issue.
5. If possible, reproduce the issue in the provided sample and revert back to us.

Regards, 

Vignesh Natarajan. 

 

[Neider]

Hi firends

I want that when I push Enter, the cell with value 6.00, this cell show 6.0%

the problem is that it does show 600.0% 

[Neider]

Hi firends

I want that when I push Enter, the cell with value 6.00, this cell show 6.0%

the problem is that it does show 600.0% 

this is my code.

<ej-grid id="ProductsGrid" create="onGridCreate" allow-selection="true" allow-paging="true" allow-filtering="true" height="400" width="@("100%")" cell-save="cellSave"

                 row-selected="rowSelected" row-deselected="rowDeselected" action-failure="updateFailure" action-complete="gridActionComplete"

                 row-selecting="rowSelecting"

                 locale="@(System.Globalization.CultureInfo.CurrentCulture.Name.ToString())" query-cell-info="queryCellInfo">

            <e-filter-settings filter-type="Excel" />

            <e-edit-settings allow-editing="true" edit-mode="@(EditMode.Batch)" show-confirm-dialog="true"></e-edit-settings>

            <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"update","cancel"}'></e-toolbar-settings>

            <e-page-settings page-size="200"></e-page-settings>

            <e-columns>

                <e-column field="" type="checkbox" header-text="@Localizer["Select"].Value"></e-column>

                <e-column field="IdProduct" header-text="@Localizer["Id Product"].Value" text-align="Left" is-primary-key="true"></e-column>

                <e-column field="ProductNumber" header-text="@Localizer["Product Number"].Value" text-align="Left" allow-editing="false"></e-column>

                <e-column field="Description" header-text="@Localizer["Description"].Value" text-align="Left" allow-editing="false"></e-column>

                <e-column field="ProductValue" header-text="@Localizer["Value"].Value" allow-editing="false" format="{0:N2}"></e-column>

                <e-column field="AvailableValue" header-text="Valor disponible" allow-editing="false" format="{0:N2}"></e-column>

                <e-column field="ValueToAssign" header-text="Valor a asignar" allow-editing="true" edit-type="NumericEdit" format="{0:N2}"

                          numeric-edit-options="@new Syncfusion.JavaScript.Models.EditorProperties { DecimalPlaces = 2, ShowSpinButton=false, MinValue=0 }"></e-column>

                <e-column field="AllocationPercentage" header-text="Tasa de asignación" allow-editing="true" edit-type="NumericEdit" format="{0:P1}"

                          numeric-edit-options="@new Syncfusion.JavaScript.Models.EditorProperties { DecimalPlaces = 2, ShowSpinButton=false, MinValue=0 }"></e-column>

                <e-column field="Allocate" header-text="@Localizer["Allocate"].Value" type="string" visible="false"></e-column>

            </e-columns>

        </ej-grid>

 function cellSave(args) {

            console.log(args);

            if (args.columnName == "ValueToAssign") {

                for (i = 0; i < args.model.currentViewData.length; i++) {

                    console.log(args.model.currentViewData[i].IdPortfolioProduct);

                    if (args.model.currentViewData[i].IsSelected == false && args.model.currentViewData[i].IdPortfolioProduct == args.rowData.IdPortfolioProduct) {

                        return;

                    }

                }

                var newvalue = args.value, format;// getting the new value

                var oldvalue = args.rowData.ValueToAssign;// getting the old value

                var extra = newvalue - oldvalue;//getting the difference in value

                var allocatedAmount = $("#allocatedAmountTB").ejNumericTextbox("getValue");

                var pendingAmount = $("#pendingAmountTB").ejNumericTextbox("getValue");

                 

                $("#allocatedAmountTB").ejNumericTextbox({ value: allocatedAmount + extra });

                $("#pendingAmountTB").ejNumericTextbox({ value: pendingAmount - extra });

                

            }

            if (args.columnName == "AllocationPercentage") {

                var gridObj = $("#ProductsGrid").data("ejGrid");

                var value = args.value;

                var newValue = value / 100;

                var colindex = gridObj.getColumnIndexByField("AllocationPercentage"); 

                gridObj.setCellText(0, colindex, newValue);                

            }

        }

[Sathyanarayanamoorthy Eswararao]

Hi Neider, 

Query : the problem is that it does show 600.0%  

 

According to your query we understand that while saving the record the value 6.0 is shown as 600% instead of 6.0%. To avoid the issue we suggest you to use the beforeBatchSave event like in the below code example. 

 

Refer the below code example 

 

 

<ej-grid id="ProductsGrid" datasource="ViewBag.datasource" allow-selection="true" allow-paging="true" before-batch-save="batchsave" allow-filtering="true" height="400" width="@("100%")" cell-save="cellSave" 

         row-selected="rowSelected" row-deselected="rowDeselected" action-failure="updateFailure" action-complete="gridActionComplete" 

         row-selecting="rowSelecting" 

         locale="@(System.Globalization.CultureInfo.CurrentCulture.Name.ToString())" query-cell-info="queryCellInfo"> 

    <e-filter-settings filter-type="Excel" /> 

    <e-edit-settings allow-editing="true" edit-mode="Batch" show-confirm-dialog="true"></e-edit-settings> 

    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"update","cancel"}'></e-toolbar-settings> 

    <e-page-settings page-size="200"></e-page-settings> 

    <e-columns> 

        <e-column field="" type="checkbox" width="50"></e-column> 

        <e-column field="OrderID" header-text="IdProduct" text-align="Left" is-primary-key="true"></e-column> 

        <e-column field="EmployeeID" header-text="Product Number" text-align="Left" allow-editing="false"></e-column> 

        <e-column field="CustomerID" header-text="Description" text-align="Left" allow-editing="false"></e-column> 

        <e-column field="Freight" header-text="Tasa de asignación" allow-editing="true" edit-type="NumericEdit" format="{0:P1}" 

                  numeric-edit-options="@new Syncfusion.JavaScript.Models.EditorProperties { DecimalPlaces = 2, ShowSpinButton=false, MinValue=0 }"></e-column> 

    </e-columns> 

</ej-grid> 

 

<script> 

    function batchsave(args) { 

        var changes = args.batchChanges.changed; 

        for (var i = 0; i < changes.length; i++) { 

            if (changes[i].Freight) { 

                args.batchChanges.changed[i].Freight = changes[i].Freight / 100; 

            } 

        } 

    } 

</script> 

 

Refer the below help documentation for more details. 

 

https://help.syncfusion.com/api/js/ejgrid#events:beforebatchsave 

 

Regards, 

Sathyanarayanamoorthy 

[JIjo]

try to use the format as below

format: "{0:n2}%"