CODEWITHSUNDEEP
jqueryjqgrid
Harke
Harke

Reputation: 1289

How to add class to a cell in jqgrid

I have the following colModel,

    colModel:[
                        {name:'alertid',index:'alertid', width:0, align:'left', sortable:false,hidden:true, resizable:false},
                        {name:'name',index:'name', width:12, sortable:false,  resizable:false, classes:'colCell'},
                        {name:'alerttype',index:'alerttype', width:0, align:'left', sortable:false, hidden:true, resizable:false}
                ],

and the class:

    .colCell {
            padding-left: 15px
        }

But the class is not being applied to the cell.

What am I doing wrong? Is the 'classes' option only available from certain versions?

The jqgrid that I am using is 4.1.1.

Upvotes: 1

Views: 12083

Answers (2)

Oleg
Oleg

Reputation: 221997

The reason is the priority of applying CSS styles. If you would open demo like youth in Internet Explorer, starts Developer Tools by pressing of F12 and then choose the cell (by Ctrl+B) where the colCell was not applied you will see something like the following

enter image description here

So more specific CSS rule on .ui-jqgrid tr.jqgrow td overwrite your CSS rule. So you need just change your rule to for example

.ui-jqgrid tr.jqgrow td.colCell {
    padding-left: 15px;
}

Now it will applied as expected. See the demo (column "Clients" has left padding 15px):

enter image description here

Upvotes: 3

Gábor Plesz
Gábor Plesz

Reputation: 1223

This is another solution to the coloring: Adding a CSS class to a column

If the 'classes' parameter you want to use, you might need to! 'Important' but use:

http://www.trirand.com/blog/?page_id=393/help/jqgrid-set-a-fixed-background-color-for-an-entire-column/

Upvotes: 0

Related Questions