RadMenu Items Shifted

2 posts, 0 answers
  1. Steve
    Steve avatar
    24 posts
    Member since:
    Mar 2010

    Posted 21 Apr 2010 Link to this post

    I am building an ASP.NET website with various Telerik controls using .NET 3.5 and Telerik RadControls_for_ASP.NET_AJAX_2010_1_309_dev.msi.  When I expand the detail records for a row in a RadGrid, I am seeing some odd behavior with the RadMenu...in particular, the menu items shift to the right slightly:

    Menus OK

    Menus after viewing details in RadGrid

    In my masterpage I have a RadMenu that is common to all pages:

                            <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Office2007" Width="100%">  
                                <Items> 
                                    <telerik:RadMenuItem runat="server" NavigateUrl="~/Default.aspx" Text="Home"   
                                        ImageUrl="~/images/home.png">  
                                    </telerik:RadMenuItem> 
                                      
                                    <telerik:RadMenuItem runat="server"   
                                        Text="CU Management">  
                                        <Items> 
                                            <telerik:RadMenuItem runat="server" NavigateUrl="~/lstStock.aspx"    
                                                Text="Stock Items">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem runat="server" Text="Basics" NavigateUrl="~/lstBasics.aspx">  
                                                <Items> 
                                                    <telerik:RadMenuItem runat="server" NavigateUrl="~/lstBasics.aspx"   
                                                        Text="View Basics">  
                                                    </telerik:RadMenuItem> 
                                                    <telerik:RadMenuItem runat="server" NavigateUrl="~/frmBasic.aspx"   
                                                        Text="New Basic">  
                                                    </telerik:RadMenuItem> 
                                                </Items> 
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem runat="server" Text="Specs" NavigateUrl="~/lstSpecs.aspx">  
                                                <Items> 
                                                    <telerik:RadMenuItem runat="server" NavigateUrl="~/lstSpecs.aspx"   
                                                        Text="View Specs">  
                                                    </telerik:RadMenuItem> 
                                                    <telerik:RadMenuItem runat="server" NavigateUrl="~/frmSpec.aspx"   
                                                        Text="New Spec">  
                                                    </telerik:RadMenuItem> 
                                                </Items> 
                                            </telerik:RadMenuItem> 
                                        </Items> 
                                    </telerik:RadMenuItem> 
                                    <telerik:RadMenuItem runat="server" Text="Job Estimates" NavigateUrl="~/lstJobs.aspx">  
                                        <Items> 
                                            <telerik:RadMenuItem runat="server" NavigateUrl="~/lstJobs.aspx" Text="View">  
                                            </telerik:RadMenuItem> 
                                            <telerik:RadMenuItem runat="server" NavigateUrl="~/frmJob.aspx" Text="New">  
                                            </telerik:RadMenuItem>                                          
                                        </Items> 
                                    </telerik:RadMenuItem> 
                                </Items> 
                            </telerik:RadMenu> 
     

    In one of my pages I have a RadGrid that can display a detail grid for any particular row:

        <telerik:RadGrid ID="rgBasics" runat="server" Skin="Office2007"    
        onitemcommand="rgBasics_ItemCommand" AutoGenerateColumns="False"   
            GridLines="None" ondetailtabledatabind="rgBasics_DetailTableDataBind"    
            AllowPaging="true" PageSize="45">  
            <PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" /> 
                    <MasterTableView DataKeyNames="Id" Width="100%">  
                    <DetailTables > 
                     <telerik:GridTableView runat="server" SkinID="Vista" 
        Name="StockItems"    
        DataKeyNames="StockNumber"  Width="100%">  
            <ParentTableRelation>          
                <telerik:GridRelationFields DetailKeyField="BasicId" MasterKeyField="Id" /> 
            </ParentTableRelation>         
            <RowIndicatorColumn > 
                <HeaderStyle Width="20px" /> 
            </RowIndicatorColumn> 
            <ExpandCollapseColumn > 
                <HeaderStyle Width="20px" /> 
            </ExpandCollapseColumn> 
            <Columns> 
                    <telerik:GridTemplateColumn HeaderText="Id" ItemStyle-Width="15%"   
                                            Visible="false">  
                                            <ItemTemplate> 
                                                <asp:Label ID="rglbl_basic_id" runat="server" Text='<%#Eval("basicid") %>'></asp:Label> 
                                            </ItemTemplate> 
                                            <ItemStyle Width="50%" />                                             
                                        </telerik:GridTemplateColumn>   
                                          
                                        <telerik:GridTemplateColumn HeaderText="Stock Item">  
                                            <ItemTemplate> 
                                                <asp:Label ID="rglbl_desc" runat="server" Text='<%#Eval("Description") %>'></asp:Label> 
                                            </ItemTemplate> 
                                            <ItemStyle Width="50%" />                                         
                                        </telerik:GridTemplateColumn>   
                                          
                                        <telerik:GridTemplateColumn HeaderText="Quantity" ItemStyle-Width="15%" > 
                                            <ItemTemplate> 
                                                <asp:Label ID="rglbl_quantity" runat="server" Text='<%#Eval("Quantity") %>'></asp:Label> 
                                            </ItemTemplate> 
                                            <ItemStyle Width="15%" />                                              
                                        </telerik:GridTemplateColumn>                                        
                                          
                                         <telerik:GridTemplateColumn HeaderText="Stock Number" ItemStyle-Width="15%" > 
                                            <ItemTemplate> 
                                                <asp:Label ID="rglbl_sn" runat="server" Text='<%#Eval("StockNumber") %>'></asp:Label>                     </ItemTemplate> 
                                            <ItemStyle Width="15%" />                                                
                                        </telerik:GridTemplateColumn>       
                                          
                                        <telerik:GridTemplateColumn HeaderText="Cost" ItemStyle-Width="15%" > 
                                            <ItemTemplate> 
                                                <asp:Label ID="rglbl_cost" runat="server" Text='<%#Eval("SellPrice") %>'></asp:Label> 
                                            </ItemTemplate> 
                                            <ItemStyle Width="15%" />                                                 
                                        </telerik:GridTemplateColumn>                                    
                    </Columns>                  
            </telerik:GridTableView> 
                    </DetailTables> 
    <RowIndicatorColumn> 
    <HeaderStyle Width="20px"></HeaderStyle> 
    </RowIndicatorColumn> 
    <ExpandCollapseColumn> 
    <HeaderStyle Width="20px"></HeaderStyle> 
    </ExpandCollapseColumn> 
                    <Columns> 
                   <telerik:GridTemplateColumn HeaderText="View" ItemStyle-Width="5%">  
    <ItemTemplate> 
    <asp:LinkButton ID="lbSelect" runat="server" CommandArgument='<%#Eval("Id") %>'   
    CommandName="Select" Text="Select"></asp:LinkButton> 
    </ItemTemplate> 
        <ItemStyle Width="5%" /> 
    </telerik:GridTemplateColumn>    
       
                    <telerik:GridTemplateColumn HeaderText="Basic" ItemStyle-Width="15%" Visible="true">  
                                            <ItemTemplate> 
                                                <asp:Label ID="rglbl_cuname" runat="server" Text='<%#Eval("Name") %>'></asp:Label> 
                                            </ItemTemplate> 
                                            <ItemStyle Width="15%" />                                               
                                        </telerik:GridTemplateColumn>                                       
                                        
                                          
                                        <telerik:GridTemplateColumn HeaderText="Description"  > 
                                            <ItemTemplate> 
                                                <asp:Label ID="rglbl_description" runat="server" Text='<%#Eval("Description") %>'></asp:Label>   </ItemTemplate>    
                                        </telerik:GridTemplateColumn>                                          
                    </Columns>                  
                    </MasterTableView>                  
     
    <FilterMenu EnableTheming="True">  
    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
    </FilterMenu> 
        </telerik:RadGrid> 
     
  2. Steve
    Steve avatar
    24 posts
    Member since:
    Mar 2010

    Posted 21 Apr 2010 Link to this post

    I think I found the problem.  In my master page there are some styling overrides that apply padding.  The padding appears to get applied to my menu items when I display the detailed grid rows:

    .RadMenu .rmLink  
    {  
        padding: 0 0 0 25px;  
        outline: 0;  
        float: left;  
    }  
     
    and...
    .RadMenu .rmHorizontal .rmText  
    {  
        padding: 0 12px 1px 0;  
    }  
     
Back to Top