Format percentage in NumericTextBox
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
SIGN IN To post a reply.
4 Replies
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.
Hi again.
Attachment: TestWebApp_9b77ea12.zip
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
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.
SIGN IN To post a reply.
