I am trying to create a sliding pane that contains a rad treeview with a context menu. Here is how I'm doing it:
function CreateContextMenu()
{
var ContextMenu = '<div class="RadMenu RadMenu_Default rmContextMenu RadMenu_Default_Context "><ul class="rmActive rmVertical rmGroup rmLevel1">';
ContextMenu +=
'<li class="rmItem rmFirst"><a href="#" class="rmLink "><img alt="" src="images/ResearchTools/TreeView/FolderCollapse.gif" class="rmLeftImage" /><span class="rmText">Add Index</span></a></li><li class="rmItem"><a href="#" class="rmLink ">';
ContextMenu +=
'<img alt="" src="images/ResearchTools/TreeView/Document.png" class="rmLeftImage" /><span class="rmText">Add Question</span></a></li><li class="rmItem"><a href="#" class="rmLink "><img alt="" src="images/ResearchTools/SurveyDetail/Edit.gif"';
ContextMenu +=
' class="rmLeftImage" /><span class="rmText">Rename</span></a></li><li class="rmItem rmLast"><a href="#" class="rmLink "><img alt="" src="images/ResearchTools/SurveyDetail/Delete.gif" class="rmLeftImage" /><span class="rmText">Delete</span></a></li>';
ContextMenu +=
'</ul></div>';
return ContextMenu;
}
function CreateEmptyTree(TreeID, TabName)
{
var EmptyTree = '<div class="NoOverFlow"><div id="' + TreeID + '" title="' + TabName + ' Tree" class="RadTreeView RadTreeView_Default NoOverFlow" style="overflow:auto;height:100%;width:240px;"><ul class="rtUL rtLines"></ul>';
EmptyTree +=
'<div id="' + TreeID + '_RadTreeViewContextMenu1">' + CreateContextMenu() + '<input id="' + TreeID + '_RadTreeViewContextMenu1_ClientState" ';
EmptyTree +=
'name="' + TreeID + '_RadTreeViewContextMenu1_ClientState" type="hidden" /></div><input id="' + TreeID + '_ClientState" ';
EmptyTree +=
'name="' + TreeID + '_ClientState" type="hidden" /></div></div>';
return EmptyTree;
}
function CreateElement(TabName, HierarchyID)
{
//var newNode = new Telerik.Web.UI.RadTreeView();
var controlID = 'SurveyDetailUC1_' + TabName + HierarchyID;
var treeID = 'SurveyDetailUC1_HierarchyTree' + TabName + HierarchyID;
var tabContainer = document.createElement('DIV');
tabContainer.className =
'paneTabText';
tabContainer.id =
'RAD_SLIDING_PANE_TAB_' + controlID;
tabContainer.title = TabName;
tabContainer.style.width =
'21px';
var paneTabTextElement = document.createElement('SPAN');
paneTabTextElement.className =
'paneTabText';
paneTabTextElement.id =
'RAD_SLIDING_PANE_TEXT_' + controlID;
paneTabTextElement.innerHTML = TabName;
tabContainer.appendChild(paneTabTextElement);
var slidingPaneMainDiv = document.createElement('DIV');
slidingPaneMainDiv.id = controlID;
slidingPaneMainDiv.style.zIndex =
'2000';
slidingPaneMainDiv.className =
'RadSplitter_Default';
slidingPaneMainDiv.innerHTML =
'<table class="slideContainer" cellpadding="0" cellspacing="0" style="width: 1px;height: 1px"><tr class="slideHeader">' +
'<td><table cellpadding="0" cellspacing="0" style="width: 100%; table-layout: fixed;"><tr><td class="slideTitleContainer">' +
'<div class="slideTitle" style="overflow: hidden;" id="RAD_SPLITTER_SLIDING_TITLE_' + controlID + '"></div>' +
'</td><td class="slideHeaderIconWrapper"><div id="RAD_SPLITTER_SLIDING_PANE_UNDOCK_' + controlID + '" class="slideHeaderUndockIcon"' +
'title="Undock"> </div></td><td class="slideHeaderIconWrapper"><div id="RAD_SPLITTER_SLIDING_PANE_DOCK_' + controlID + '" title="Dock" class="slideHeaderDockIcon"> </div>' +
'</td><td class="slideHeaderIconWrapper"><div title="Collapse" id="RAD_SPLITTER_SLIDING_PANE_COLLAPSE_' + controlID + '" class="slideHeaderCollapseIcon">' +
' </div></td></tr></table></td><td rowspan="2" id="RAD_SPLITTER_SLIDING_ZONE_RESIZE_' + controlID + '" style="font-size: 1px;' +
'line-height: 1px;" class="slideContainerResize" title="Resize"><div style="width: 4px;"></div></td></tr><tr><td align="left">' +
'<div class="TreeBackground" id="RAD_SLIDING_PANE_CONTENT_' + controlID + '" style="overflow: auto;width: 1px; height: 1px">' + CreateEmptyTree(treeID, TabName) +
'</div></td></tr></table>';
var TreeSlidingZoneLeft = '<%= TreeSlidingZoneLeft.ClientID %>';
$get(
'RAD_SLIDING_ZONE_PANES_CONTAINER_' + TreeSlidingZoneLeft).appendChild(slidingPaneMainDiv);
$get(
'RAD_SLIDING_ZONE_PANES_CONTAINER_' + TreeSlidingZoneLeft).innerHTML += '<input id="' + controlID + '_ClientState" name="' + controlID + '_ClientState" type="hidden" />';
$get(
'RAD_SLIDING_ZONE_TABS_CONTAINER_' + TreeSlidingZoneLeft).appendChild(tabContainer);
Telerik.Web.UI.RadTreeView._preInitialize(treeID,
"0");
var contextMenu = $create(Telerik.Web.UI.RadContextMenu, {
"_flow":0,"_skin":"Default",
"clientStateFieldID":treeID + "_RadTreeViewContextMenu1_ClientState",
"collapseAnimation":"{\"type\":12,\"duration\":200}",
"itemData":[{"postBack":0,"value":"Add Index"},{"postBack":0,"value":"Add Question"},{"postBack":0,"value":"Rename"},{"postBack":0,"value":"Delete"}]}
,
null, null, $get(treeID + "_RadTreeViewContextMenu1"));
var treeView = $create(Telerik.Web.UI.RadTreeView,
{
"_scrollPosition":0,"_selectedValue":"","_skin":"Default"
,
"_uniqueId":"SurveyDetailUC1$HierarchyTree" + TabName,"allowNodeEditing":true,
"clientStateFieldID":treeID + "_ClientState",
"collapseAnimation":"{\"duration\":200}",
"contextMenuIDs":[treeID + "_RadTreeViewContextMenu1", "RadTreeViewContextMenu1"],
"enableDragAndDrop":true,"expandAnimation":"{\"duration\":200}","nodeData":[],"selectedIndexes":[]},
{
"contextMenuItemClicked":contextMenuItemClicked,"contextMenuShowing":contextMenuShowing,"nodeClicked":OnNodeClicked,"nodeCollapsed":ShowCollapseImage,"nodeDragging":onNodeDragging,"nodeDropping":onNodeDropping,"nodeEditing":OnNodeEditing,"nodeExpanded":ShowExpandImage}
,
null, $get(treeID));
treeView._ContextMenus = [contextMenu];
var slideProps1 = {"_index":0,"_scrollLeft":0,"_scrollTop":0,"clientStateFieldID": controlID + "_ClientState","title":TabName,"width":"240px"};
var slideProps2 = {"parent":TreeSlidingZoneLeft,"parentPane":"<%= TreePane.ClientID %>","splitter":"<%= WebSplitter.ClientID %>"};
var slidingPane = $create(Telerik.Web.UI.RadSlidingPane, slideProps1 , {"expanded":PaneExpanded}, slideProps2 , $get(controlID));
addEditDeleteButtonsToTab(slidingPane, TabName);
$find(TreeSlidingZoneLeft)._addPane(slidingPane);
}
function addEditDeleteButtonsToTab(slidingPane, TabName)
{
slidingPane.set_title(TabName + CreateEditDeleteButtonUnicode(TabName));
slidingPane.GetTabContainer().title = TabName;
}
...
...
<telerik:RadPane ID="TreePane" Width="22px" BorderColor="#e2e2e2" Height="100%" runat="server">
<telerik:RadSlidingZone SlideDuration="10" ID="TreeSlidingZoneLeft" runat="server" Width="22px">
</telerik:RadSlidingZone>
</telerik:RadPane>
The pane gets created and the empty tree is also within the pane. I am able to add node to it and once a node (or nodes) are added, I can right click and see the context menu.
But the context menu items are not working, It seems like contextMenuItemClicked is not being triggered.
Can somebody help me with this. I can also send a sample project if requested. Thanks ;)