TreeView not rendering when context menu on same page

3 posts, 0 answers
  1. Laine
    Laine avatar
    2 posts
    Member since:
    Jul 2011

    Posted 05 Jul 2011 Link to this post

    I have a TreeView control that renders correctly on my page (style gets applied). However, if I add a context menu to the page my style does not get loaded for the TreeView (it renders as bullet points).

    Note: My context menu is for a different control on the page, not for the treeview.

    I am assuming this has something to do with both controls using the <ul> element, how can I have both controls on the same page without this rendering issue?

    <telerik:RadContextMenu ID="cm1" runat="server" >
        <Items>
            <telerik:RadMenuItem  Value="EDIT" ImageUrl="~/images/edit.gif"></telerik:RadMenuItem>
            <telerik:RadMenuItem Value="DELETE" ImageUrl="~/images/delete.gif"></telerik:RadMenuItem>
        </Items
        <Targets>
            <telerik:ContextMenuControlTarget ControlID="lbtnAddNewRule" />
        </Targets>
    </telerik:RadContextMenu>
    <asp:LinkButton ID="lbtnAddNewRule" runat="server"></asp:LinkButton>
    <telerik:RadTreeView runat="server" ID="tvSelectedUsersA"  Width="200px" Height="200px"  Skin="Default">
     </telerik:RadTreeView>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Jul 2011 Link to this post

    Hello Laine,

    I cannot reproduce the issue at my end. Here is the sample code which worked as expected at my end.
    aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="FromXML.aspx.cs" Inherits="TreeView_FromXML" %>
     
    <%@ 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">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <telerik:RadContextMenu ID="cm1" runat="server">
                <Items>
                    <telerik:RadMenuItem Value="EDIT" ImageUrl="../Images/tabSelected.jpg">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Value="DELETE" ImageUrl="../Images/Refresh.gif">
                    </telerik:RadMenuItem>
                </Items>
                <Targets>
                    <telerik:ContextMenuControlTarget ControlID="lbtnAddNewRule" />
                </Targets>
            </telerik:RadContextMenu>
            <asp:LinkButton ID="lbtnAddNewRule" runat="server">Hai</asp:LinkButton>
            <br />
            <br />
            <br />
            <telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="WebBlue" DataFieldID="CustomerID"
                DataTextField="CompanyName" DataSourceID="XmlDataSource1" OnNodeDataBound="RadTreeView1_NodeDataBound">
            </telerik:RadTreeView>
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~\RadTextBox\XMLFile.xml"
                XPath="/Customers/Customer"></asp:XmlDataSource>
        </div>
        </form>
    </body>
    </html>

    Thanks,
    Shinu.
  3. Laine
    Laine avatar
    2 posts
    Member since:
    Jul 2011

    Posted 07 Jul 2011 Link to this post

    Hi Shinu,

    After further inverstigation my issue is actually being caused by having a DateTimePicker control and a TreeView control on the same User Control (both loaded by an Ajax Request). Below is the code for my User Control:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
          <table>
            <tr>
              <td>
                 <telerik:RadDateTimePicker  ID="dtpStartDate" AutoPostBack="true" 
                   runat="server" Width="200px" 
                   DateInput-Enabled="False">
                 </telerik:RadDateTimePicker >
              </td>
             </tr>
             <tr>
                <td>
                  <telerik:RadTreeView runat="server" ID="tvSelectedUsersA" 
                     Width="200px" Height="200px"
                      SelectionMode="Multiple"
                       BorderColor="#666666" BorderStyle="Solid" BorderWidth="1" >
                     </telerik:RadTreeView>
                  </td>
                </tr>
               </table>
    </ContentTemplate> 
    </asp:UpdatePanel>


    My user control is being called from another page and is wrapped in a tooltip:

    <telerik:RadToolTip ID="ttNotesDetails" runat="server" Position="Center" 
       Width="510" RelativeTo="BrowserWindow" 
       ShowEvent="FromCode" HideDelay="300" 
       ShowDelay="300" AutoCloseDelay="0" 
       TargetControlID="ddlTextBox" HideEvent="FromCode" 
       Animation="None" 
       Modal="true" style="z-index:1000;"  >   
         
    <myControl:MyUserControl ID="MyUserControl" runat="server"" />
      
    </telerik:RadToolTip>

    See image1.png for resulting rendering of the controls (treeview has not rendered correctly)

    If I change the order of thecontrols in my user control (put the treeview first and datetime picker afterwards)  I get different UI rendering where my treeview renders correctly but I lose all skin rendering for my datetime picker (including buttons, popup calendar etc.) example code:
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"
        <ContentTemplate
          <table
             <tr
                <td
                  <telerik:RadTreeView runat="server" ID="tvSelectedUsersA" 
                     Width="200px" Height="200px"
                      SelectionMode="Multiple"
                       BorderColor="#666666" BorderStyle="Solid" BorderWidth="1"
                     </telerik:RadTreeView
                  </td
                </tr
                <tr
              <td
                 <telerik:RadDateTimePicker  ID="dtpStartDate" AutoPostBack="true" 
                   runat="server" Width="200px" 
                   DateInput-Enabled="False"
                 </telerik:RadDateTimePicker
              </td
             </tr
          </table>
    </ContentTemplate
    </asp:UpdatePanel>
    See image2.png for resulting rendering of the controls (treeview has rendered correctly, datetimepicker has lost buttons and skin)
Back to Top