[Solved] Frustration with Styles!!!!

[EricB]

Dear Telerik,

  I love the fact that you've minimized your CSS, but you've gone way too far with it.  I'm becoming frustrated because of the way the styles are implemented.

Here is an example of why the way I believe you may be doing this incorrectly:

On a page I have a Tab Sheet, each page of course happens to use CSS class t-link.

In one of these tabs I have a grid that has an awful lot of information in it....  In order to make the data fit within the grid a bit better I've changed the font size to x-small and this begins my problem.

I want to change the style for just the GRID not every extension on the page!!!!!

So my first pass though was to put in a hacky CSS override to the telerik styles on just the page that requires the smaller font size in the grid.  Bingo, this worked, but unfortunately the Tabs were also affected.

Next we have some custom work being done on the column headers to support the ability for multiple column headers in a single column to control sorting for hybrid values.  The Office 2007 style does not underline hyperlinks, yet our custom code is using ActionLink like so:

 

 

 

columns.Template(model =>

{

%>


<%= model.OriginCityStateForDisplay%>

<br />

<%= model.DestinationCityStateForDisplay%>

<br />

<%

}

).Title(Html.ActionLink("Origin", "SearchResults?orderBy=OriginCityStateForDisplay-asc").ToHtmlString() + "<br/>" +

Html.ActionLink("Destination", "SearchResults?orderBy=DestinationCityStateForDisplay-asc").ToHtmlString())

.HeaderHtmlAttributes(new { @class = "customSortField" })

.Width(125);

So of course this column shows up as a normal hyperlink with an underline, where as the other native columns that use the default sort method do not...  The fix should be simply to add text-decoration: underline to the t-link style, but unfortunately this is also affecting the tab sheet that grid is hosted in, frustrating and not at all desirable.

I am not pleased with how difficult styles are to manage and am hopeful that you provide ways to control styles at a finer level PER extension without affecting the others on the page.

Sure, I could put some jQuery code in to add the styles I need, or perhaps actionlink all the column headers, but I've found myself having to find work arounds for doing things, for example forcing column headers to be able to wrap.  The Telerik extensions are supposed to cut development time, not extend it.

Please, re-consider how you're working with styles here because I'm finding it terribly difficult to deal with when I need super fine control over specific extensions.

Thanks,
Eric

[Atanas Korchev]

Hi EricB,

I am afraid we cannot change the way styling is implemented. Such a change would require major modifications in our server and client-side code which we cannot incorporate without breaking a lot of existing customer projects. Not to mention the fact that there are users who are comfortable with the current approach.

What we can do is extend the Visual Style Builder in the future so it allows finer customizations per component level.

As a workaround I can suggest to apply a css class to your grid and set the required styles through there. Here is an example:

<style type="text/css">
.myGrid
{
    font: 14px/22px blue Arial;
}

</style>
<%= Html.Telerik().Grid<EditableProduct>()
        .Name("Grid")
        .HtmlAttributes(new{@class = "myGrid"})

You can also use the !important CSS modifier in order to override rules from the theme.

I hope this helps,
Atanas Korchev
the Telerik team

[EricB]

Ok, I completely understand your response... And I would LOVE to see the Style Builder enhanced to provide finer control over each extension, that would be fantastic!

BTW: For what it's worth the Telerik extensions are fantastic.

Also, I tried your suggested work around before posting my rant and it does not seem to work, though I started a new project and it works there, so no idea why that is happening.  I am even using the IE Developer Tool Bar and the CSS class is being applied to the grid but the font size is not changing.

I'm working around it by making every column that needs to be sortable a custom template column as I no longer have time to work around this.

Thanks,
Eric

[rahul]

This actually worked for me.
However how do I change the header and footer font style?