We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Formating

Thread ID:

Created:

Updated:

Platform:

Replies:

120920 Oct 27,2015 08:52 PM UTC Oct 28,2015 08:48 AM UTC JavaScript 1
loading
Tags: ejGrid
Nicolas Siatras
Asked On October 27, 2015 08:52 PM UTC

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 [Syncfusion]
Replied On October 28, 2015 08:48 AM UTC

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;