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

RadMenu Items Shifted

1 Answer 68 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 2
Steve asked on 21 Apr 2010, 11:30 PM
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> 
 

1 Answer, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 2
answered on 22 Apr 2010, 12:28 AM
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;  
}  
 
Tags
Menu
Asked by
Steve
Top achievements
Rank 2
Answers by
Steve
Top achievements
Rank 2
Share this question
or