RadTreeView Problems

[Bader]

Hello,

I have a problems with the radtreeview control:
1) Please view the page http://www.telerik.com/help/aspnet-ajax/ajax-ajax.html. You can see that by opeining the page, the radtreeview expands in order to show the appropriate node (Marked in red in the attached screen shot), how can I do that? Is there any sample code which demonstrate how to do that?

2) Some of the radtreeview have the value of "Folder" and other nodes have a value of "Document". Is there any way to drag and drop "Document" nodes into "Folder" nodes? Is there any sample code which demonstrate how to do that?

3) In the attached screen-shot the root node is invisible? How can I do that?

Here is my radtreeview code:

<asp:SqlDataSource ID="QAGuideSqlDataSource" runat="server"
                    ConnectionString="<%$ ConnectionStrings:GuidesConnectionString %>"
                    SelectCommand="SELECT [SerID], ([Type] + '~/Guides/Pages/' + [Path] + '.aspx') as TypeAndFullPath, [ParentID], [Title], [Type] FROM [QAGuide] order by [Type],[Title]"></asp:SqlDataSource>
                <telerik:RadTreeView ID="QAGuideRadTreeView" runat="server" OnNodeClick="QAGuideRadTreeView_NodeClick" DataValueField="Type"
                    DataSourceID="QAGuideSqlDataSource" DataFieldParentID="ParentID" DataFieldID="SerID" DataTextField="Title" >
                    <DataBindings>
                        <telerik:RadTreeNodeBinding Depth="0" Expanded="true" />
                    </DataBindings>
                </telerik:RadTreeView>

Please, I need your help in order to handle the above issues.
It is very appreciated to send me a sample code.

Regards,
Bader

[Shinu]

Hello Bader,

Try setting the following CSS in order to show the  node in red color.
CSS:

<style type="text/css">
.RadTreeView_Default .rtSelected .rtIn
 {
   background-image:none !important;
   background-color:red !important;
 }
</style>

Try setting EnableDragAndDrop to True and  EnableDragAndDropBetweenNodes to True inorder to Drag and Drop between Nodes.
aspx:

<telerik:RadTreeView ID="QAGuideRadTreeView" runat="server" DataValueField="Type"
DataSourceID="QAGuideSqlDataSource" DataFieldParentID="ParentID" DataFieldID="SerID" DataTextField="Title"
EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="true">
   <DataBindings>
         <telerik:RadTreeNodeBinding Depth="0" Expanded="true" />
   </DataBindings>
</telerik:RadTreeView>

Thanks,
Shinu.

[Bader]

Hello,

Thank you very much for your reply. Unfortunatily it is not solves the probelm. Here is my deep explaination:
1) Please view the page http://www.telerik.com/help/aspnet-ajax/ajax-ajax.html. You can see that by opeining the page, the radtreeview expands in order to show the appropriate node (Marked in red in the attached screen shot), how can I do that? Is there any sample code which demonstrate how to do that?, I mean, How can I enforce the radtreeview to expand to the appropriate item according the page url? Is the page contains some hidden fields that are responsible for exapnding the radtreeview while the page is loading?

2) Some of the radtreeview have the value of "Folder" and other nodes have a value of "Document". Is there any way to drag and drop "Document" nodes into "Folder" nodes? Is there any sample code which demonstrate how to do that? Thats right, I need enable drag and drop between nodes, but sense the nodes are displaying the database table content, I need to make chnages in the databse too by dragging and dropping (I need to do that using c# code, because I may have to add further functionality while dragging and dropping nodes in the future)

3) In the attached screen-shot the root node is invisible? How can I do that? for every radtreeview there is a root node. I need not to display the root node to the users, How can I do that?

Here is my radtreeview code:

<asp:SqlDataSource ID="QAGuideSqlDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:GuidesConnectionString %>"
SelectCommand="SELECT [SerID], ([Type] + '~/Guides/Pages/' + [Path] + '.aspx') as TypeAndFullPath, [ParentID], [Title], [Type] FROM [QAGuide] order by [Type],[Title]"></asp:SqlDataSource>
<telerik:RadTreeView ID="QAGuideRadTreeView" runat="server" OnNodeClick="QAGuideRadTreeView_NodeClick" DataValueField="Type"
DataSourceID="QAGuideSqlDataSource" DataFieldParentID="ParentID" DataFieldID="SerID" DataTextField="Title" >
<DataBindings>
<telerik:RadTreeNodeBinding Depth="0" Expanded="true" />
</DataBindings>
</telerik:RadTreeView>

Please, I need your help in order to handle the above issues.
It is very appreciated to send me a sample code.

Regards,
Bader

[Plamen]

Hi Bader,

1) You can handle onNodeClick event and pass some specific value to the desired window where you would like to use it. Here is an example that shows the text field but you could use any other:

protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs e)
{
Response.Write(e.Node.Text);
}

2) You can set different values to the nodes on different depth:

<DataBindings>
<telerik:RadTreeNodeBinding TextField="Text" />
<telerik:RadTreeNodeBinding Depth="0" Checkable="false" TextField="Text" Expanded="true"
CssClass="rootNode" />
<telerik:RadTreeNodeBinding Depth="1" Checkable="true" TextField="Text" Expanded="true"
CssClass="rootNode" />
<telerik:RadTreeNodeBinding Depth="2" TextField="Text" Expanded="false"
CssClass="rootNode" />
</DataBindings>

3) You can handle NodeDataBound event and tag the desired node by setting its CssClass property:

protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)
{
if (e.Node.Text=="Politics")
{
e.Node.CssClass = "hide";
}
}

Hope this will help.

Regards,
Plamen Zdravkov
the Telerik team

[Bader]

Hello,

Thank you for your help, Unfortunately, It doesn't solve my problems yet.

1) Depending your your code, I think I found an alternate solution. Sense that all nodes are retrieved from database, how can I get the parents Ids (Please view the attached image RadTreeView_ParentsIds.png for demonestration)

2) How can I drag and drop nodes within the same radtreeview using server side (c# code)?

3) If I implement your idea of hiding the root node, the user still see the root node Expand/Collapse icon, the user is not intended to see the expand/collopse icon of the root node (Please, view the attached image RadTreeView_InvisibleRootNode.png for demonestration). In the required situation the root node children will behave as root nodes and are allways displayed (The root node must be invisible).

Please, I need your help,
It is very appreciated to send me the modified code.

Regards,
Bader

[Plamen]

Hello Bader,

1)You could use the "ParentNode" property as shown in the sample code below:

protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)
   {
      RadTreeNode node=e.Node;
       if (e.Node.Text == "Football")
       {
           while (node.Parent!=RadTreeView1)
           {
               Response.Write(node.Text);
               node = node.ParentNode;
           }
       }
   }

2)Please refer to the following help topic Drag and Drop In Between Nodes.

3)Here is the code that should hide the arrow:

.rtFirst .rtMinus
   {
     display:none !important;
       }

Kind regards,
Plamen Zdravkov
the Telerik team

[Bader]

Hello,

Thank you for your reply,

The first problem is solved,
The second problem, I will check soon,
The third problem, it NOT solved yet. I want to change my question. Is there a way to display all nodes of radtreeview except for the root node? I don't want to hide it (visibilty = hidden, because it seems that the node still exist), that is not the requirements. The requirements is set visible = false for the root node and to set visible = true for all children nodes.

Please, I need your help,
It is very appreciated to send me the modified code.

Regards,
Bader

[Plamen]

Hello Bader,

Please consult with this forum post where the same issue is discussed.

Greetings,
Plamen Zdravkov
the Telerik team

[Bader]

Hi,

I have a question regarding setting an ImageUrl and ExpandedImageUrl properties on the treeview control, but the images displays well only on Depth = 0. I'm using the following RadComboBoxSelectedIndexChangedEventArgs event that sets the RadTreeView datasource :

protected void GuidesListRadComboBox_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

{

//DisplayGuideCtgrsAndDocuments method Sets the GuideRadTreeView datasource

GuidesDB.DisplayGuideCtgrsAndDocuments(GuideRadTreeView, GuidesListRadComboBox.SelectedValue.ToString());

           
foreach (RadTreeNode node in GuideRadTreeView.Nodes)

{

//GetGuideRecordType is a method that gets the Type field of the node (From Datatable object)

switch (GuidesDB.GetGuideRecordType(GuidesListRadComboBox.SelectedValue.ToString(), node.Value).Trim())

{

case "Category":

{

node.ImageUrl = "~/Guides/General/Design/Imgs/Icons/CategoriesAndDocuments/dir.gif";

node.ExpandedImageUrl = "~/Guides/General/Design/Imgs/Icons/CategoriesAndDocuments/dir_open.gif";

break;

}

case "Document":

{

node.ImageUrl = "~/Guides/General/Design/Imgs/Icons/CategoriesAndDocuments/file.gif";

break;

}

}

}

}


Here is the control:

<telerik:RadTreeView ID="GuideRadTreeView" runat="server" OnNodeClick="GuideRadTreeView_NodeClick" Skin="Sunset" DataValueField="SerID"  TabIndex="3"
                    DataFieldParentID="ParentID" DataFieldID="SerID" DataTextField="Title" OnNodeDataBound="GuideRadTreeView_NodeDataBound" >
                    <DataBindings>
                        <telerik:RadTreeNodeBinding Depth="0" Expanded="true" />
                    </DataBindings>
                </telerik:RadTreeView>

Unfortunately, it set the images only on Depth 0.
How can I set the ImageUrl for all depths?

Please, I need you help

Regards,
Bader

[Plamen]

Hello Bader,

 
You can try to use GuideRadTreeView.GetAllNodes() instead of GuideRadTreeView.Nodes that gets only the children.

Hope this will help.

Regards,
Plamen Zdravkov
the Telerik team

[Bader]

Hi,

Thank you very much, it is working,

Can you please help me in hiding the RadTreeView nodes lines (Selected in red in the attached screen-shot)?
I need to view only the nodes images, and by clicking on the node image the node should be expandes\Collapsed.

Regards,
Bader

[Princy]

Hello,

Try setting ShowLineImages property of RadTreeView as false.
ASPX:

<telerik:RadTreeView ID="RadTreeView1" runat="server" ShowLineImages="false" >
    <Nodes>
       ... ... ...
   </Nodes>
</telerik:RadTreeView>

Thanks,
Princy.

[Bader]

Hi,

Thank you very much, it is working,

How can I view only the nodes images, and by clicking on the node image (The book image and not by clicking he -/+) the node should be expandes\Collapsed. I mean, that how can I hide the "-" and the "+"?

Regards,
Bader

[Plamen]

Hello Bader,

 
You can use the following css:

.rtPlus,.rtMinus
  {
     display:none   !important;
  }

Greetings,
Plamen Zdravkov
the Telerik team

[Bader]

Hi,

Thank you very much, The Plus and Minus are hidden now, but, how can I open the expand a category and close it by clicking it (Only one click and by double-click). For example, please view the treeview at: http://www.telerik.com/help/aspnet-ajax/introduction.html?

Regards,
Bader

[Princy]

Hello,

I suppose you need to set two images on expand and collapse button. Try the following CSS.
CSS:

  .rtPlus
    {
     background:url('../Images/image1.gif') ! important;
    }
 .rtMinus
    {
     background:url('../Images/image2.gif') ! important;
    }

Thanks,
Princy.

[Bader]

Hi,

Thank you very much for the CSS, but it is not solving the problem,
Please, take a look again at http://www.telerik.com/help/aspnet-ajax/introduction.html. As you can see, that the user can click (one click) the category item and the category expanded and by clicking it again, the category collapsed. And there is no need to click the Plus and Minus icons.

Can you please help me solving this issue?

Regards,
Bader

[Princy]

Hello,

Try the following javascript.
JS:

function OnClientNodeClicked(sender, args)
 {
   var node = args.get_node();
   node.toggle();
 }

Thanks,
Princy.