This is a migrated thread and some comments may be shown as answers.

How to style the td in only one grid when my page have two grids?

1 Answer 770 Views
Grid
This is a migrated thread and some comments may be shown as answers.
vae
Top achievements
Rank 1
vae asked on 19 Sep 2013, 08:14 AM
 My page have two grids called grid1,grid2,I only want to style the grid1,not grid2.I use the css style in the header like  this,but  it seems that both grid changed.
.k-grid td {
color:red;
  padding: 0px;
   }

I try to write like this,but failed.
.GridTd {
color:red;
  padding: 0px;
    }
$("#grid1 td").addClass("GridTd "); //failed,I debug with firebug and find that the td style is used by default style(.k-grid td),not GridTd Style.
$("#grid1 k-grid   td").addClass("GridTd ");// faied


.k-grid td {    border-style: solid;    border-width: 0 0 0 1px;    line-height: 1.6em;    overflow: hidden;  
 padding: 0.4em 0.6em;   text-overflow: ellipsis;    vertical-align: middle;}.
GridTd {  color:red;   padding: 0;}

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Sep 2013, 10:54 AM
Hello Vae,

There are several problems in the provided implementation.

1. The following statement will work only if executed in (or after) the Grid's dataBound event. Otherwise it will be executed before the data cells have been rendered:

$("#grid1 td").addClass("GridTd");

2. The following selector is invalid, because the k-grid CSS class is missing a dot and is treated like a non-existent HTML element:

$("#grid1 k-grid  td").addClass("GridTd ");


3. The following CSS rule will not work, because its selector has a lower specificty (.GridTd - 1 class) than the default Grid style selector (.k-grid td, i.e. 1 class + 1 HTML element)

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/


.GridTd
{
   colorred;
   padding: 0px;
}


Finally, there is no need to use Javascript at all to achieve the desired behavior. This will do the job:

#grid1 td {
   colorred;
   padding: 0px;
}

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
vae
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or