[Solved] Client-side cell styling

[FinallyInSeattle]

I'm trying to duplicate the appearance of an invalid cell on the client-side (same appearance as a blank Required field).  In the OnSave event, I'm basically doing this:

if (!data.IsValid)

    skuCell.addClass("product-client-side-error");

else

    skuCell.removeClass("product-client-side-error");

Style is:

    .product-client-side-error
    {
        border:2px; 
        border-color:red; 
        border-style:solid
    }

When I examine the page using the IE Developer Tools, I do see that the cell does have the class assigned to it correctly.   However, the actual border styling is being overridden by the ".t-grid td" setting.  How can I apply a css class to set the border of the cell red in this situation?

[Dimo]

Hi Lori,

The specificity of the ".t-grid td" selector is higher than the one of your selector ".product-client-side-error", that's why your border styles are currently overridden.

I recommend you to get familiar with the concepts of CSS specificity, inheritance and cascade. These are fundamentals of CSS and knowing about them will considerably facilitate your work.

http://css.maxdesign.com.au/

Apart from all text information in the various sections, there are three video presentations on the home page. The information about specificity is in the third presentation, starting from slide 50. I recommend you to watch the whole first and third presentations to gain better understanding how CSS works and how conflicting styles are applied by the browser.

Here is one more article on the matter:

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

You can find a "cheat-sheet" of the above at:

http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg

All the best,
Dimo
the Telerik team