We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

percentage in a grid

Thread ID:

Created:

Updated:

Platform:

Replies:

142913 Feb 25,2019 08:31 PM UTC Mar 27,2021 06:21 PM UTC ASP.NET Core 7
loading
Tags: Grid
Neider
Asked On February 25, 2019 08:31 PM UTC

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 [Syncfusion]
Replied On February 26, 2019 05:42 AM UTC

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
Replied On February 26, 2019 08:24 PM UTC

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 [Syncfusion]
Replied On February 27, 2019 12:17 PM UTC

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, 


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
Replied On March 1, 2019 10:09 PM UTC

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
Replied On March 1, 2019 10:31 PM UTC

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 [Syncfusion]
Replied On March 4, 2019 05:46 PM UTC

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. 
 
 
Regards, 
Sathyanarayanamoorthy 


JIjo
Replied On March 27, 2021 06:21 PM UTC

try to use the format as below

format: "{0:n2}%"

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon