Format percentage in NumericTextBox

[Stefan]

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]

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]

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]

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]

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. 

More information about formats refer https://ej2.syncfusion.com/javascript/documentation/common/internationalization/?no-cache=1#custom-formats 

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> 

Sample link: https://www.syncfusion.com/downloads/support/forum/148698/ze/Grid_Format_Sample-1389347310 

 

Regards, 

Thavasianand S.