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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Format percentage in NumericTextBox

Thread ID:

Created:

Updated:

Platform:

Replies:

148698 Oct 30,2019 03:37 PM UTC Nov 4,2019 08:42 AM UTC ASP.NET Core - EJ 2 4
loading
Tags: DataGrid
Stefan
Asked On October 30, 2019 03:37 PM UTC

Hi

I'm using NumericTextBox in a grid (mode="Batch") and want a percentage format in edit mode. You can see the result in the image below.  The NumericTextBox should display 230% not 2,3.

If I change mode="Normal" it works in edit mode but after editing the format is incorrect.

I have attached a sample application. 

Regards,

/S



Attachment: TestWebApp_9fcb5593.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 31, 2019 01:53 PM UTC

Hi Stefan, 

Greetings from Syncfusion support. 
 
We analyzed your query and found that, the default behavior of the numeric text box is rejecting the “%” symbol when it was focused. In inline editing mode also, when the frieght column is focused the “%” symbol will faded out. We have attached some screenshots for your reference. Kindly refer this. 

When start for inline editing:  
 
    

 
When we focusing on fright column % gone from the numeric textbox 
 
 



Please get back to us if you need further assistance 

Regards, 
Thavasianand S. 


Stefan
Replied On October 31, 2019 03:10 PM UTC

Hi again.

That's not the problem! If you look at my screenshots you see that the value displayed in the numeric textbox is 2,3 it should be 230. After editing the value is 23 000%
Run the attached code and you can see this behavior. We use  sv-SE culture with "," as decimal separator.







Attachment: TestWebApp_9b77ea12.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 1, 2019 04:19 PM UTC

Hi Stefan, 
 
We are able to reproduce the behavior from our end and We have forwarded your query to corresponding development team. Once we get the details about this scenario and we will update you the same. 
 
Regards, 
Thavasianand S 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 4, 2019 08:42 AM UTC

Hi Stefan, 

We have prepared a custom sample for your requirement at our end. 

By default, Value will be displayed in numeric Textbox with corresponding to the format . but if focus the numeric input, input will be rejecting the “%” symbol. So this kind of case you have to use custom format. 


For your case format, p0 shows the value with multiplication of 100 and if edit this value its show the default value only(focus State). Like below image. 

 


We achieved your requirement using cellEditType (read, write, create, destroy) and blur. You have to pass the numeric value in write function. For more information about cell Edit refer to this link

Here if edit the required column we maintain the value with corresponding format like below image. 

 

Please refer the below code block and sample link. 


<ejs-grid id="Grid" allowPaging="true" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})"> 
 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings> 
 
    <e-grid-columns> 
. . . .  
        <e-grid-column allowSorting="true" field="Freight" headerText="Freight" validationRules="@(new { required=true})" Format="p0" textAlign="Right" editType="numericedit" width="120" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
<script> 
 
    var elem; 
    var dObj; 
    function create(args) { 
        elem = document.createElement('input'); 
        return elem; 
    } 
 
    function write(args) { 
        debugger 
        dObj = new ej.inputs.NumericTextBox({ 
            value: args.rowData.Freight * 100,  // maintain the value in format 
            format: "p0", 
            step: 10, 
            min: 0, 
            max: 6000 
 
        }); 
        dObj.appendTo(elem); 
        document.getElementById('GridFreight').addEventListener('blur', formBlur); 
    } 
 
    function destroy() { 
        dObj.destroy(); 
    } 
 
    function read(args) { 
        return dObj.value; 
    } 
    formBlur = function () { 
       this.ej2_instances[0].value = this.ej2_instances[0].value / 100; 
    } 
</script> 

 
Regards, 
Thavasianand S. 


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