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.
Unfortunately, activation email could not send to your email. Please try again.

Formating

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 04:48 AM

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.

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.

;