This is a migrated thread and some comments may be shown as answers.

RadButton in Grid NestedViewTemplate

6 Answers 52 Views
Button
This is a migrated thread and some comments may be shown as answers.
Stuart Hemming
Top achievements
Rank 2
Stuart Hemming asked on 29 Jan 2011, 12:06 PM
Using this markup...
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!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>
    </head>
    <body>
        <form id="form1"
              runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1"
                                      runat="server">
            </telerik:RadScriptManager>
            <div>
                <telerik:RadGrid ID="RadGrid1"
                                 runat="server"
                                 GridLines="None"
                                 DataSourceID="SQLData">
                    <MasterTableView AutoGenerateColumns="false">
                        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </ExpandCollapseColumn>
 
                        <Columns>
                            <telerik:GridBoundColumn UniqueName="ID" DataField="ProductID" HeaderText="ID" />
                            <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name" />
                        </Columns>
                        <NestedViewTemplate>
                            <asp:Label runat="server" ID="lblProductNumber" Text='<%#Eval("ProductNumber")%>' />
                            <telerik:RadButton runat="server" ID="btn" Text="Alarm" Icon-PrimaryIconUrl="~/Images/alarm-clock.png" />
                        </NestedViewTemplate>
                    </MasterTableView>
                    <ClientSettings Scrolling-UseStaticHeaders="true" Scrolling-AllowScroll="true" />
                </telerik:RadGrid>
 
                <asp:SqlDataSource runat="server"
                                   ID="SQLData"
                                   ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString2 %>"
                                   SelectCommand="SELECT * FROM [Production].[Product]"/>
            </div>
        </form>
    </body>
</html>

open the page in IE8. Expand a row. See the button. Scroll the grid and see the button scroll.

Now do the same thing in IE7/IE8+Compatability mode. The button doesn't scroll. I suspect that this may be related to this issue but im unsure how I might go about solving it in this case.

Any pointers would be appreciated.

-- 
Stuart

6 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 31 Jan 2011, 02:53 PM
Hello Stuart,

I had the same situation with the RadTreeList control, when I enabled scrolling, the RadButtons would not scroll. The thing that solved it was setting position:relative on the RadTreeList and the RadButtons began to scroll, instead of remaining fixed on the page.

I'm guessing the same fix would work for the RadGrid, since when I examine the the RadGrid using the IE Developer Tool, the default position is set to static.

I hope that helps.
0
Pero
Telerik team
answered on 31 Jan 2011, 03:17 PM
Hello Stuart,

This is a known issue of the control, and it is explained in the following help article: http://www.telerik.com/help/aspnet-ajax/radbutton-known-issues-ie6-ie7.html.

Kind regards,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Stuart Hemming
Top achievements
Rank 2
answered on 31 Jan 2011, 03:27 PM
@Cori: Setting the grid to position:relative makes no difference.

@Pero: You have simply supplied me with a link to the article that I referred to in my original post. And that fix doesn't appear to work.

-- 
Stuart
0
Accepted
Pero
Telerik team
answered on 31 Jan 2011, 04:06 PM
Hi Stuart,

Please excuse me, I didn't notice the link. I tested your code and setting position: relative to the <div/> containing the RadGrid's data seems to resolve the issue. Here is the modified code:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        /* IE7 */
        * + html .RadGrid .rgDataDiv
        {
            position: relative;
        }
        /* IE6 */
        *html .RadGrid .rgDataDiv
        {
            position: relative;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div>
        <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" OnNeedDataSource="RadGrid1_NeedDataSource">
            <MasterTableView AutoGenerateColumns="false">
                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn UniqueName="ID" DataField="ProductID" HeaderText="ID" />
                    <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name" />
                </Columns>
                <NestedViewTemplate>
                    <asp:Label runat="server" ID="lblProductNumber" Text='Grid Label - Product Number' />
                    <telerik:RadButton runat="server" ID="btn" Text="Alarm" />
                </NestedViewTemplate>
            </MasterTableView>
            <ClientSettings Scrolling-UseStaticHeaders="true" Scrolling-AllowScroll="true" />
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>


Best wishes,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Stuart Hemming
Top achievements
Rank 2
answered on 31 Jan 2011, 04:10 PM
Pero,

Nice one.

I was setting the prosition:relative on the wrong bit.

That works a treat in IE8+compatability mode. I'll get my colleagues to check it out in IE6/7.

-- 
Stuart
0
Stuart Hemming
Top achievements
Rank 2
answered on 31 Jan 2011, 07:56 PM
Works in IE6/7 too.

Cool.

-- 
Stuart
Tags
Button
Asked by
Stuart Hemming
Top achievements
Rank 2
Answers by
Cori
Top achievements
Rank 2
Pero
Telerik team
Stuart Hemming
Top achievements
Rank 2
Share this question
or