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

TreeView not rendering when context menu on same page

2 Answers 200 Views

TreeView

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

Laine asked on 05 Jul 2011, 08:29 PM

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 Answers, 1 is accepted

answered on 06 Jul 2011, 10:35 AM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<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.

answered on 07 Jul 2011, 05:44 PM

image1.png

image2.png

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)