GridClientSelectColumn in Scrollable RadGrid

9 posts, 0 answers
  1. simon chen
    simon chen avatar
    6 posts
    Member since:
    Jul 2009

    Posted 23 Aug 2010 Link to this post

    When i use GridClientSelectColumn in a RadGrid and set it to allow scroll, it will get a scroll bar for the outer body.
    Detail please see the attach.

    Example code to get the issue:

    <telerik:RadFormDecorator ID="formdecorator" runat="server" DecoratedControls="All"
            ControlsToSkip="Zone" />
            <telerik:RadGrid ID="rgFr" runat="server" PageSize="50">   
        <MasterTableView DataKeyNames="A">
            <Columns>
                <telerik:GridClientSelectColumn ItemStyle-Width="20" />           
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="true" />
            <Scrolling AllowScroll="true" ScrollHeight="300" />
        </ClientSettings>

    In the code-behind:

     protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    var ds = new List<object>();
                    for (int i = 0; i < 100; i++)
                    {
                        ds.Add(new { A = "AA" });
                    }
                    this.rgFr.DataSource = ds;

                    this.rgFr.DataBind();
                }
            }


  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 26 Aug 2010 Link to this post

    Hi simon chen,

    This behavior comes from the way checkboxes are decorated. To avoid it, I would suggest to use the following style on the same page:
    input.rfdRealInput
    {
        display: none;
        display: block\9;
        position: static !important;
        float: right;
        outline: 0;
        width: 0;
    }



    Regards,
    Georgi Tunev
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. simon chen
    simon chen avatar
    6 posts
    Member since:
    Jul 2009

    Posted 26 Aug 2010 Link to this post

    Thanks for you help.
    When i use this style, it fix the scrollbar problem.But since i add the style, i can't check/uncheck it when i click on the checkbox.
  5. simon chen
    simon chen avatar
    6 posts
    Member since:
    Jul 2009

    Posted 26 Aug 2010 Link to this post

    i'm sorry. it's my mistake to make the checkbox disable, and the style you provide really work now.
    but i still have a little confusion about the code:
    display: none;
    display: block\9;
    what's the meaning of these 2 lines?
  6. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 27 Aug 2010 Link to this post

    Hi simon chen,

    The \9 string is an IE hack - this way all browsers will read display:none, while IE browsers will have display:block. More information on it is available on the Net.


    Best wishes,
    Georgi Tunev
    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
  7. Kevin
    Kevin avatar
    3 posts
    Member since:
    Sep 2009

    Posted 17 Sep 2010 Link to this post

    I had this same issue (with the scrollbar in the main browser window).  In addition, I had an issue where if I scrolled down in the RadGrid and clicked on a checkbox in the GridClientSelectColumn, it would cause the entire page to jump down (so every time I'd check a checkbox, the page would be jumping around).  Both these issues were resolved when I added the input.rfdRealInput style you posted to my CSS file.

    However, now my checkboxes are formatting strangely in IE 8 (they seem to have line breaks on top of the checkboxes).  In Firefox 3.5, the checkboxes don't display at all even though they're still there...if I click where the checkbox would be, it still selects the row.  I can select multiple rows by clicking where the checkbox should be on each line.  (The page behaved this way in Firefox even before I added the new style, so I wonder if it's a Firefox or CSS issue not necessarily caused by the rfdRealInput style.)  Please see attached screen snippets.

    My GridClientSelectColumn looks like:
    <telerik:GridClientSelectColumn HeaderStyle-Width="20px" HeaderStyle-VerticalAlign="Top" ItemStyle-VerticalAlign="Top"></telerik:GridClientSelectColumn>

    Do you know how I can fix it so the checkboxes appear normally (vertically aligned to the top with no extra line breaks)?  My biggest focus is getting it to work in IE.  However, it'd be nice to get it working in Firefox, too.

    Thanks!
  8. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 23 Sep 2010 Link to this post

    Hello Kevin,

    Here is an updated version of the CSS that works on our side when we tested your case - I hope this helps:

    input.rfdRealInput
    {
        display: none;
        display: block\9;
        position: static !important;
        float: right;
        outline: 0;
        width: 0;
        height: 0;
        margin-top: -5px;
    }


    Sincerely yours,
    Georgi Tunev
    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
  9. Amir
    Amir avatar
    12 posts
    Member since:
    Nov 2007

    Posted 07 Dec 2010 Link to this post

    Did you check the solution in opera?

    the checkboxes does not work in opera when add the given style. everything ok in internet explorer but the checkboxes not checked in opera!
  10. Amir
    Amir avatar
    12 posts
    Member since:
    Nov 2007

    Posted 07 Dec 2010 Link to this post

    I found a solution for all browsers

    input.rfdRealInput

     

     

    {
        display:block;
        position: static !important;
        float: right;
        outline: 0;
        width: 0;
        height: 0;
        margin-top: -5px;
        FILTER: alpha(opacity=0)
        -moz-opacity: 0
        opacity: 0;
    }

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017