Format percentage in NumericTextBox

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

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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>

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.

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US