Formating

[Nicolas Siatras]

Hi,

I have a grid with numbers double and long. Two questions... 

ONE:

How to format double numbers in a column, setting the maximum and minimum number of the decimals

SECOND:

Can i change the format on a single cell?

Regards,

Nikolas Siatras

[Balaji Marimuthu]

Hi Nikolas,

Thanks for contacting Syncfusion support.


Query:1 I have a grid with numbers double and long. Two questions... How to format double numbers in a column, setting the maximum and minimum number of the decimals

Format the numbers in a column using the format property in Grid columns and created a sample based on your requirement.
Jsplaygroundsample: http://jsplayground.syncfusion.com/uj0hvdwt

Refer to the Document and demo in following link.
http://help.syncfusion.com/js/grid/columns#formatting
http://js.syncfusion.com/demos/web/#!/azure/grid/columns/columnformatting

$("#Grid").ejGrid({

            // the datasource "window.gridData" is referred from jsondata.min.js

            dataSource: window.gridData,

            allowPaging: true,

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

            columns: [

                    { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },

                    { field: "CustomerID", headerText: 'Customer ID', width: 90 },

                    { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 80, format: "{0:n0}" },

                    { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 3 }, format: "{0:n2}", validationRules: { required: true, min: 10.2, max: 10000.000 }, width: 80 },

                    { field: "ShipName", headerText: 'Ship Name', width: 150 },

                    { field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 90 }

            ]

           
});

You can set the number of decimal places while editing a record using the decimalPaces property in editParams. Refer to the help document and code example as below.
http://help.syncfusion.com/js/api/ejgrid#members:columns-editparams

            columns: [

                    . . .

                    { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 3 }, format: "{0:n2}", validationRules: { required: true, min: 10.2, max: 10000.000 }, width: 80 },

            ]

The minimum and maximum number of decimal places set by enabling the validation rules property in Grid. Refer to the Document: http://help.syncfusion.com/js/grid/editing#validation

  columns: [

                    . . .

                    { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 3 }, format: "{0:n2}", validationRules: { required: true, min: 10.2, max: 10000.000 }, width: 80 },

            ]

Query:2 Can i change the format on a single cell?

Yes, you can change the format on a single cell using queryCellInfo event in Grid which triggered every time a request is made to access particular cell information, element and data.

$("#Grid").ejGrid({

            // the datasource "window.gridData" is referred from jsondata.min.js

            dataSource: window.gridData,

           

            columns: [

                   

                    . . . .

                    { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 3 }, format: "{0:n2}", validationRules: { required: true, min: 10.2, max: 10000.000 }, width: 80 },

            ],

            queryCellInfo: function (args) {

                var value = args.text.replace(",", "");

                var $element = $(args.cell);

                if (args.column.headerText == "Freight" && parseFloat(value) == 32.38)

                    $element.text(Globalize.format(parseFloat(value), "n6"));

            }
});

Refer to the Help Document and Demo in following link.
http://help.syncfusion.com/js/api/ejgrid#events:querycellinfo
http://js.syncfusion.com/demos/web/#!/azure/grid/ConditionalFormatting

Regards,
Balaii Marimuthu