Help with Grid Header formatting

6 posts, 0 answers
  1. Luke Kasper
    Luke Kasper avatar
    18 posts
    Member since:
    Mar 2010

    Posted 19 Oct 2010 Link to this post

    All,

    I'm having an issue with my RadGrid header row.  The headers for the rows appear correctly sized, however for any screen real estate to the right of my furthest right header, I get funky results.  I attached a screenshot.

    I think the fix will probably be something to the grid.css file, but I just can't seem to figure it out.  Is there something I'm missing on this?

    Thank you!
  2. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 20 Oct 2010 Link to this post

    This public anywhere to look at?

    Have you tried combing through the CSS styling on that element using Firebug?...that's where I'd start :)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Luke Kasper
    Luke Kasper avatar
    18 posts
    Member since:
    Mar 2010

    Posted 20 Oct 2010 Link to this post

    Unfortunately, no, it's not public anywhere and I'm really limited on what I can show.

    I've attached a screenshot of what IE Developer Toolbar shows for the style of the header bar.  Hopefully this helps...
  5. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 20 Oct 2010 Link to this post

    Ahhh, IE Developer toolbar is your problem :)

    Install Firefox, then Install the Firebug addon...you'll find the bad style in minutes compared to IE Dev Bar.  Not even in the same ballpark in terms of debugging.
  6. Luke Kasper
    Luke Kasper avatar
    18 posts
    Member since:
    Mar 2010

    Posted 20 Oct 2010 Link to this post

    Here's the Firebug output.  Funny enough, it shows correctly in Firefox by default, but I was able to replicate it.  Is this helpful?
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Oct 2010 Link to this post

    Hello Luke,

    When using scrolling with static headers, there is some empty space above the vertical scrollbar. By default it is filled with a background image, which is aligned if the header row is single-lined. Unfortunately, the background image cannot expand automatically to match any header row height.

    In your case you can do one of the following:

    1) Replace the background image with the one intended for double-lined header rows by setting

    <telerik:RadGrid  CssClass="rgTwoLines" />

    This will work if the header font size and vertical paddings have not been changed.


    2) Remove the background image by setting

    <telerik:RadGrid  CssClass="rgNoScrollImage" />


    3) Create and apply a custom background image, adjusted to match the header row height in your specific scenario. The custom image should be set like this:

    ASPX

    <telerik:RadGrid  CssClass="MyCustomScrollImage" />


    CSS

    div.MyCustomScrollImage  .rgHeaderDiv
    {
           background:0 0 repeat-x  url("...............") ;
    }


    Best wishes,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017