I want to have format comma igGrid. This is an image.
Thank you for advice.
Hello Sulada,
By default format is taken from the regional settings object which in JavaScript can be accessed with:
$.ig.regional.defaults
For these settings to take effect for number columns you need to configure igGrid.options.autoFormat option to "dateandnumber". If you're using EN regional settings then the group separator by default is "," which should work for you.
Here is an example:
$(".selector").igGrid({ autoGenerateColumns: false, autoFormat: "dateandnumber", columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", format: "number" }, { headerText: "SafetyStockLevel", key: "SafetyStockLevel", dataType: "number", width: "200px" } ] });
You still have the option to configure the formatting on per column basis by using igGrid.options.columns.format option like this:
$(".selector").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "SafetyStockLevel", key: "SafetyStockLevel", dataType: "number", width: "200px", format: "###,###,###.##" } ] });
Hope this helps,Martin PavlovInfragistics, Inc.
Hello Martin Pavlov,Thank you for advice. I try to do as you. I enter code (format: "number" or format: "###,###,###.##") go down. It has worked.
And I have one more question. If I want to be in the red rectangle on the right. What do I have to do.Before that I used text-align: right; At <style> But what happens is that every column is all right.I want the first column on the left and on the right column 2,3.
Thank you.
Hello Saluda,
Let me know if you have further questions regarding this subject.
Best regards,Martin PavlovInfragistics, Inc.
Can you inspect a cell (with browser developer tools) within a number column with applied columnCssClass and see whether this class is applied to it.
The columnCssClass is introduced in Ignite UI 15.1 so if you have a lower version this approach will not work for you.
An alternative approach is to use column template like this:
{ headerText: "SafetyStockLevel", key: "SafetyStockLevel", dataType: "number", width: "200px",
format: "###,###,###.##",
template: "<div style='text-align:right;'>${SafetyStockLevel}</div>"}
Hello Martin,Thank you for advice.I added code:
columnCssClass: "align-right" and
.align-right { text-align:right; } in <style>
It did not happen. Numbers still left same.
Use the columnCssClass property to add a class to the column cells and in the class apply text alignment right.
There is an example:
.align-right { text-align:right; } $(".selector").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "SafetyStockLevel", key: "SafetyStockLevel", dataType: "number", width: "200px", format: "###,###,###.##", columnCssClass: "align-right"} ] });
Hope this helps, Martin Pavlov Infragistics, Inc.