RadButton in Grid NestedViewTemplate

7 posts, 1 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 29 Jan 2011 Link to this post

    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
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 31 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 31 Jan 2011 Link to this post

    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.
  5. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 31 Jan 2011 Link to this post

    @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
  6. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 31 Jan 2011 Link to this post

    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.
  7. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 31 Jan 2011 Link to this post

    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
  8. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 31 Jan 2011 Link to this post

    Works in IE6/7 too.

    Cool.

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