GridClientSelectColumn in Scrollable RadGrid

[simon chen]

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();
            }
        }

[Georgi Tunev]

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

[simon chen]

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.

[simon chen]

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?


[Georgi Tunev]

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

[Kevin]

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!

[Georgi Tunev]

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

[Amir]

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!

[Amir]

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;
}