Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Radio buttons and checkboxes bug

2 Answers 73 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Deyan
Top achievements
Rank 1
Deyan asked on 22 Mar 2011, 04:07 PM

I have simple page:

1 grid with many rows (for scrolling), formdecorator and a checkbox on each row.

When you make a scroll and click at checkbox or radio button then page make scrolling or disappears.

If I avoid them from decorating everything is OK.

P.S For another controls this not happens

Here is the code:

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    <style runat="server">
        html, body, form
        {
            overflow:hidden;
            height:100%;
        }
        .scroll
        {
            overflow:scroll;
            height:100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="True">
    </telerik:RadSkinManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
    </div>
    <div class="scroll">
    <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView>
            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridTemplateColumn HeaderText="Checkox">
                <ItemTemplate>
                <asp:CheckBox ID="chk" runat="server" />
                </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="text" FilterControlAltText="Filter column1 column"
                    HeaderText="Text" UniqueName="column1">
                </telerik:GridBoundColumn>
            </Columns>
            <EditFormSettings>
                <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                </EditColumn>
            </EditFormSettings>
        </MasterTableView>
        <FilterMenu EnableImageSprites="False">
        </FilterMenu>
        <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
        </HeaderContextMenu>
    </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

Code Behind

public partial class Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
  
    }
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        List<string> items = new List<string>();
        for(int i = 1; i <= 200; i++)
        {
            items.Add(string.Format("Item {0}", i));
        }
        RadGrid1.DataSource = items;
    }
}

2 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 23 Mar 2011, 09:00 AM
Hello Deyan,

Adding the following CSS (marked in yellow) in the head section of your document, will fix the problem:

<style id="Style1" runat="server" type="text/css">
        html, body, form
        {
            overflow: hidden;
            height: 100%;
        }
        .scroll
        {
            overflow: scroll;
            height: 100%;
        }
        input.rfdRealInput
        {
            display: none;
            display: block\9;
            position: static;
            float: right;
            outline: 0;
            width: 0;
        }
    </style>


Regards,
Bojo
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Deyan
Top achievements
Rank 1
answered on 23 Mar 2011, 01:57 PM
10x it worked :)
Tags
FormDecorator
Asked by
Deyan
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Deyan
Top achievements
Rank 1
Share this question
or