How to right align content of a iggrid

http://jsfiddle.net/rxb3xmjt/11/

In the above example,Currently values of Quantity is aligned to left in example

How can all the values of Quantity in iggrid  be aligned to right?.

Hello Akhi,

Thank you for posting in our community.

Changing text alignment of igGrid`s headers or cells can be accomplished by setting the text-align property in the css classes applied to these elements. For example:

th.ui-iggrid-header:nth-child(3){

           text-align: right !important;
 }
 .ui-iggrid .ui-iggrid-tablebody td:nth-child(3) {

           text-align: right !important;
 }

 

 

Your modified fiddle is available here. I changed the css classes applied to the Quantity column in order to set the text-align option to right.

Please let me know if you need any further assistance with this matter.

Hi Vasya,

Thank you for the reply.I believe you are hard coding 3rd column. 

How can i dynamically right align columns with "Quantity"  in example to right align.

Please provide a working copy

Can we do this in columns: attribute of iggrid?..where all "Quantity" columns can be right aligned?

I am looking for the contents of the column "quantity" to be right aligned..Can it be done on an event?.

Please provide solution.

Hello Akhi,

In order to select only the “Quantity” column the css selector can be modified. Each th has an id containing the column key. If the selector is modified in order to match only values that has an id ending with “Quantity” the new style is going to be applied only to these columns. For example:

th.ui-iggrid-header[id$=Quantity]{
           text-align: right !important;
}

Your modified fiddle is available here.

Additionally, igGrid has two options that can be used foe applying styles to cells and headers:

• columnCssClass – space-separated list of CSS classes to be applied on the data cells of this column
• headerCssClass – space separated list of CSS classes to be applied to the header cell of this column

$(".selector").igGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product Name", key: "Name", dataType: "string", headerCssClass: "headerCss", columnCssClass: "colCss" }
    ]
});

Please let me know if you need any further assistance with this matter.

Thank you Vasya!!.Appreciate your help

Hello Akhi,

I am glad that you find my suggestion helpful.

Thank you for using Infragistics components.