TreeView nested in RadPane

[Reid]

I have a RadPanel that hosts a few items.  One of the items is a Help section where I am trying to simulate the standard help format with a Splitter showing two panels, a left and a right.  The left has a RadTreeView and the right has an asp:Literal control.

My plan is to load a hierarcy of help topics based on a URL that is recorded in the help table.  So the table has a ParentID column that will hold a value or not. This sets up the grouping of the tree view nodes
.
I also want to have JavaScript load the content of the selected help topic (RadTreeNode) into the literal control's text property when the node is clicked.  Researching it on this site had given me the JavaScript via a RadScript block to respond to click events, focus, etc.

This is a MVC application with a Master Page and the View is displaying an MVC user control that is wrapping the Help process.  So the RadPanelBar displays the help section item as a user control.  All the JavaScript and styles are in the UserControl markup.

So I am not able to do the following things in JavaScript:

1. Get the Literal Control instance (this is nested in a RadPane.
2. Get the RadTreeView instance.
3. Get the selected node.
4. Get the object databound to the node.
5. Set the Text property of the Literal Control to the "Content" property of my help business object.

 

This is the only thing I have been successful with to get the Literal object...

function onNodeClicking(sender, args)
 {
    alert("OnClientNodeClicking: " + args.get_node().get_text()); <-- works
    var literalContent = $('#helpContentHolder');  <-- returns generic object, how to cast?
    var tree = <%= ctrlHelpRadTreeView.ClientID %>;  <-- returns HTMLDivElement  ??
  }

All the client side events below are in place and working...

<telerik:RadTreeView ID="ctrlHelpRadTreeView" runat="server" CheckBoxes="True" AllowNodeEditing="True"
                EnableDragAndDrop="true" OnClientNodeClicking="onNodeClicking" OnClientNodeChecking="onNodeChecking"
                OnClientMouseOver="onMouseOver" OnClientMouseOut="onMouseOut" OnClientNodeEditStart="onEditStart"
                OnClientNodeEditing="onEditing" OnClientNodeEdited="onEdited" OnClientNodeDragStart="onNodeDragStart"
                OnClientNodeDropping="onNodeDropping" OnClientNodeExpanded="onNodeExpanded" OnClientNodeCollapsed="onNodeCollapsed"
                OnClientNodeAnimationEnd="onNodeAnimationEnd" OnClientLoad="onLoad" BeforeClientClick="BeforeClientClickHandler"  Width="100%"
                Height="250px" Style="border: 1px solid #CBE7F5;">
     .........
</telerik:RadTreeView>

So the handler I am anticipating and have been working with is the OnNodeClicked.
Can anyone shed some light on how I get the literal and set it's text to the databound object in the TreeView?

The attached file shows how I am adapting it from a demo here on the site.  The TreeView is not databound at this time.  The image is intended to show the two panes side by side (again, inside the user control).  The Literal control is visible in the right panel inside the user control.

Thanks!

Reid

[Dimitar Terziev]

Hello Reid,

In case you need a reference to the RadTreeView you should use the "sender" input parameter of the onNodeClicking event handler function. You don't need this row:

var tree = <%= ctrlHelpRadTreeView.ClientID %>;  <-- returns HTMLDivElement  ??

On how to get reference to the "helpContentHolder", my suggestion is to use the:

document.getElementById()

Since you are developing MVC application, my suggestion is to try our MVC controls.

All the best,
Dimitar Terziev
the Telerik team

[Reid]

Hello Dimitar,

Thank you for the response.  Ok the sender param is the ticket there.

I have not upgraded to the latest version for financial reasons.  I intend to as soon as I can.

Do you know how to extract the business object that is databound to the TreeView using JavaScript?
Also, I am able to get the ViewData[] using this code for binding the TreeView.

$(document).ready(function(){
          //debugger
           <%
            ctrlHelpRadTreeView.DataSource = ViewData["HelpContent"];
            ctrlHelpRadTreeView.DataFieldID = "PrimaryKey";
            ctrlHelpRadTreeView.DataFieldParentID = "ParentContentFK";
            ctrlHelpRadTreeView.DataTextField = "ContentTitle";
            ctrlHelpRadTreeView.DataBind();
             %>
        });

For some reason in another user control being displayed in the RadPane that same code does not work for a RadCalendar.  I understand that we do not databind the calendar in the same way, and you have to work with the SelectedDates property to fill the calendar with RadDates.  I have been unable get this working.

I am going to post a thread in the RadCalendar forum about this.

Thanks!

Reid

[Dimitar Terziev]

Hi Reid,

What you have provided as a code snippet, is not supported in general. You could not execute a server-side code in the document ready event handler function.

Could you specify what do you want to achieve, since from what you have provided it seems to me that you want to bind the RadTreeView on the client-side which is not a supported scenario.

As I've mentioned in my previous post, in case you are developing MVC application, then you should use MVC control, not the one for ASP.NET AJAX.

Regards,
Dimitar Terziev
the Telerik team

[Reid]

Hi,

Ok the RadTreeView is working.  The data is being provded by a JavaScript enabled web services and is working with the databinding below.  The hierarchy is intact and it works.

I need to upgrade to a more recent version of the controls to get the MVC controls.  Can't afford it right now.  Probably by next month.


Thanks,
Reid