CODEWITHSUNDEEP
javascriptjquerycsskendo-uikendo-grid
Lyly
Lyly

Reputation: 726

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

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
$("#grid1 k-grid   td").addClass("GridTd ");// faied

I debug with firebug and find that the td style is used by default style(.k-grid td),not GridTd Style.

 .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;}

Upvotes: 0

Views: 1422

Answers (2)

Lorien
Lorien

Reputation: 160

I had the same issue, I'm using the kendo MVC wrapper. Here's how I handled it:

@(Html.Kendo().Grid<Model>()
    .Name("MyGrid")
    .HtmlAttributes(new { @class = "k-grid-MyGrid" } )

    ...(Imagine the rest of the grid)
)

Then in css reference like this:

<style type="text/css">
    .k-grid-MyGrid td {
        white-space: nowrap;
    }
</style>

Hope that helps you.

Upvotes: 0

Clyde Lobo
Clyde Lobo

Reputation: 9174

If the two rules are in the same order as per your code sample

Then this has to do with the specificity of css

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

One solution is to specify the css by using the .css() jQuery function

http://api.jquery.com/css/

Example

$("#grid1 td").css({  "color":"red", "padding": "0"});

Upvotes: 1

Related Questions