Issue if number format - Dialog Edit

[Nuno Domingues]

Dear All,

I have an app with a data grid. Edit of the row is made via dialog edit.

The Grid is with Pt Culture, so numbers are recorded with a comma as a decimal separator.

Grid is working fine displaying information and dialog editing is also fine with the values inserted manually (there's an issue with calculated numbers but i'll get to that latter).

The problem is when the line is saved the information that goes to the server is incorrect, as if the number has decimals the decimals are not considered and the number is rounded. 

I was able to work arround this, with the following lines on the custum adaptor:

            update(dm, keyField, value, tableName) {

                debugger;

                this.updateType = 'update';

                this.updateKey = keyField;

                value.Qty = value.Qty.toLocaleString('de-DE', { minimumFractionDigits: 2 });

The remaining of the custum adaptor code is equal to the one on the documentation.

Another issue that i have is with calculated numbers. They do not assume the format on the dialog. The code i'm using to calculate is:

        function qtyCreate(args) {

            qtyElem = document.createElement('input');

            return qtyElem;

        }

        function qtyWrite(args) {

            qtyObj = new ej.inputs.NumericTextBox({

                placeholder: 'Quantidade',

                floatLabelType: 'Always',

                format: 'N2',

                value: args.rowData[args.column.field],

                change: function (args) {

                    calculateLine();

                }

            });

            qtyObj.appendTo(qtyElem);

        }

        function qtyDestroy() {

            qtyObj.destroy();

        }

        function qtyRead(args) {

            return qtyObj.value;

        }

        function priceCreate(args) {

            priceElem = document.createElement('input');

            return priceElem;

        }

        function priceWrite(args) {

            priceObj = new ej.inputs.NumericTextBox({

                placeholder: 'Preço Unitário',

                floatLabelType: 'Always',

                value: args.rowData[args.column.field],

                change: function (args) {

                    calculateLine();

                }

            });

            priceObj.appendTo(priceElem);

        }

        function priceDestroy() {

            priceObj.destroy();

        }

        function priceRead(args) {

            return priceObj.value;

        }

        function calculateLine() {

            var qty = document.getElementById('GridQty');

            var unitPrice = document.getElementById('GridUnitPrice');

            $("#GridGrossAmount").prop("readonly", true);

            $("#GridDiscountAmount").prop("readonly", true);

            grossAmount.value = realParseFloat(qty.value) * realParseFloat(unitPrice.value);

        }

realParseFloat is a jquery function that strips format from the values on the editor since they are in European number format.

The calculate is returning the correct values. However they come with Us format. If i try to format the number, the grid assumes it as a string and does not save properlly to the server.

An example if i place

grossAmount.value =  (realParseFloat(qty.value) * realParseFloat(unitPrice.value)).toLocaleString('de-DE', { minimumFractionDigits: 2 }); then the decimal part of the number is lost when it's sent to the server.

If you need any aditional information feel free to ask.

Kind regards

[Hemanthkumar S]

Hi Nuno Domingues,

Greetings from  Syncfusion support.

Based on your update, it seems that there are two issues you are facing in your Syncfusion ej2 grid implementation.

The first issue is related to decimal separators while saving data to the server. As you have mentioned that the grid is with the "Pt Culture", which is Portuguese culture, and numbers are recorded with a comma as a decimal separator. However, while saving the edited row, the decimals are rounded off. To fix this, you have added the following code in your custom adapter's update function:

 value.Qty = value.Qty.toLocaleString('de-DE', { minimumFractionDigits: 2 });

This code sets the decimal separator to the German format (comma), which has the same decimal separator as the Portuguese format, and ensures that the decimals are not rounded off.

The second issue is related to calculated numbers, where the grid assumes the number as a string if it's formatted using the toLocaleString method. You have mentioned that if you try to format the number using the toLocaleString method, the decimal part of the number is lost when it's sent to the server. To fix this issue, you can convert the number to a float before saving it to the server. You can use the parseFloat method to convert the formatted number to a float, as shown below:

 grossAmount.value = parseFloat((realParseFloat(qty.value) * realParseFloat(unitPrice.value)).toFixed(2));

This code first multiplies the qty and unitPrice values and rounds the result to two decimal places using the toFixed method. Then, it converts the result to a float using the parseFloat method, ensuring that the grid does not treat the result as a string.

If the above information is not helpful then we recommend you provide a video demonstration of the issue and version of the Syncfusion package you are using. If possible please provide us with a sample of the grid that reproduces the issue. This will assist us in better understanding and validating your query.

Regards,

Hemanth Kumar S