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

Creating a rad sliding pane with context tree with context menu on cilent side

1 Answer 78 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Ron Orbas
Top achievements
Rank 1
Ron Orbas asked on 24 Mar 2009, 10:40 PM
Hi all,

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">&nbsp;</div></td><td class="slideHeaderIconWrapper"><div id="RAD_SPLITTER_SLIDING_PANE_DOCK_' + controlID + '" title="Dock" class="slideHeaderDockIcon">&nbsp;</div>' +

 

 

'</td><td class="slideHeaderIconWrapper"><div title="Collapse" id="RAD_SPLITTER_SLIDING_PANE_COLLAPSE_' + controlID + '" class="slideHeaderCollapseIcon">' +

 

 

'&nbsp;</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 ;)

 

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 30 Mar 2009, 01:59 PM
Hi Ron,

RadTreeView and RadContextMenu are server-side controls and cannot be created client-side like this.  You can only add nodes (items respectively) to them on the client.

Greetings,
Yana
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Tags
Ajax
Asked by
Ron Orbas
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or