Wide Grid

3 posts, 1 answers
  1. sircutbreaker
    sircutbreaker avatar
    111 posts
    Member since:
    Oct 2007

    Posted 21 Jul 2009 Link to this post

    I have a user configurable radgrid... and there are about 30 columns... When the grid renders, you are able to scroll over and see all the columns, but after the width of the screen, the border of the grid ends... and the rest of the columns are to the right of it, outside the border..

    Here is a link to a screen shot of this:
    http://img.skitch.com/20090721-cr1a1xi9b74habmtdg27wn7jyw.jpg

    Since there are multiple views and the user is able to configure them.. the grid can be anywhere between 1-30 columns.. So I cannot set the width of the grid as it changes.

    How to have the grid render correctly is my goal here.

    Thanks

    Jeff



  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Jul 2009 Link to this post

    Hi Jeff,

    Obviously, the RadGrid data cannot fit in the control's boundaries. By default, the RadGrid control's width is 100%, which is applied according to the control's parent element. The topmost RadGrid tag is a <div> and <div>s do not expand horizontally if they cannot enclose their content.

    Your options are:

    1) Enabled RadGrid scrolling
    or
    2) remove the right border with CSS:

    div.RadGrid_SkinName
    {
            border-right:0;
    }

    or
    3) float the RadGrid control. Floated elements expand as much as required to enclose their content. You should clear the float right after the RadGrid control.

    <telerik:RadGrid style="float:left"  />
    <div style="clear:both"><!-- --></div>



    All the best,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JamesD
    JamesD avatar
    23 posts
    Member since:
    Nov 2005

    Posted 13 Feb 2014 in reply to Dimo Link to this post


    .k-grid { /* or whatever the exact class is for wrapper div */
    min-width: 100%;
    display: inline-block;
    }
Back to Top