Expand mode and Navigation issues

[Bader]

Hello,

I have three problems:.
1) I'm buiding a webpage which functioning as Telerik ASP.NET AJAX Documentation (http://www.telerik.com/help/aspnet-ajax/introduction.html ).
In the above page, by clicking each node of the radtreeview, the required page opens and the RadTreeView still in Expand mode (Please view the attached screen-shot RadTreeView1.png).
In my case, by clicking any node the required page opens but the RadTreeview collapse (Please view the attached screen-shots RadTreeView1-RequiredSituation.png and RadTreeView1-NotRequiredSituation.png in order to get a better understanding of the problem).

Here is my code:

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="700px">
                       <telerik:RadPane ID="LeftPane" runat="server" Width="250px"  Scrolling="Both">
                           <asp:Panel ID="QAGuidePanel" runat="server" Width="100%" HorizontalAlign="Left">
                                <asp:SqlDataSource ID="QAGuideSqlDataSource" runat="server"
                                    ConnectionString="<%$ ConnectionStrings:GuidesConnectionString %>"
                                    SelectCommand="SELECT [SerID], ('~/QA/Pages/' + [Path] + '.aspx') as FullPath, [ParentID], [Title] FROM [QAGuide]"></asp:SqlDataSource>
                                <telerik:RadTreeView ID="QAGuideRadTreeView" runat="server"
                                    DataSourceID="QAGuideSqlDataSource" DataNavigateUrlField="FullPath" DataFieldParentID="ParentID" DataFieldID="SerID" DataTextField="Title" >
                                    <DataBindings>
                                        <telerik:RadTreeNodeBinding Depth="0" Expanded="true" />
                                    </DataBindings>
                                </telerik:RadTreeView>
                            </asp:Panel>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar>
                        <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">
                            <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">
                                <telerik:RadPane ID="Radpane2" runat="server">
                                    <div style="padding: 5px">
                                        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

                                        </asp:ContentPlaceHolder>
                                        <asp:Panel ID="ContentPanel" style="margin:10px;" HorizontalAlign="Left" runat="server">
                                            <asp:Label ID="SerIDLabel" Visible="false" runat="server" ></asp:Label>
                                            <asp:SqlDataSource ID="ContentSqlDataSource" runat="server"
                                                ConnectionString="<%$ ConnectionStrings:GuidesConnectionString %>"
                                                SelectCommand="SELECT * FROM [QAGuide] WHERE ([SerID] = @SerID)">
                                                <SelectParameters>
                                                    <asp:ControlParameter ControlID="SerIDLabel" Name="SerID"
                                                        PropertyName="Text" Type="Int64"  />
                                                </SelectParameters>
                                            </asp:SqlDataSource>
                                            <asp:FormView ID="ContentFormView" runat="server" Visible="true" Width="100%" DataKeyNames="SerID"
                                                DataSourceID="ContentSqlDataSource">
                                                <ItemTemplate>
                                                     <asp:Label ID="TitleLabel" SkinID="HeaderText" runat="server" Text='<%# Eval("Title") %>' />
                                                     <br /><br />
                                                     <asp:Label ID="TextCnsrtLabel" runat="server" Text='<%# Eval("Cntnt") %>' ></asp:Label>
                                                </ItemTemplate>
                                            </asp:FormView>
                                        </asp:Panel>
                                    </div>
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPane>
                    </telerik:RadSplitter>

2) How can I hide the root node (In this case the QA node)?

3) According to my above code, by clicking each node, the browser will navigate to the required page. But some of the nodes are not intended to view a specific page (Defined as a folder and not as document) exactly as http://www.telerik.com/help/aspnet-ajax/introduction.html . How can I prevent navigation by clicking such node?

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

Regards,
Bader

[Plamen]

Hello Bader,

1. You can have a look at our Use DataBindings to Create a Hiearchical TreeView  that explains how you can use the DataBindings.

2. If you want to hide some of the nodes you can set "ForeColor=White" or set a "CssClass=hide" and use this css:

.hide
    {
        visibility:hidden !important;
        }

3. When setting the NavigationUrl you can set a condition of the count of the nodes.

You can also have a look at our Directory Structure demo.

Hope this is helpful.

Best wishes,

Plamen Zdravkov
the Telerik team

[Bader]

Hi,

Thank you for your reply,

I still have a problems. You can see that the radtreeview that I'm using retrieves data from the database.

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

I want to indicate that by clicking any node, a new guide page opens (Not still in the same page).
How can I control the depth property in the above case?
How can Hide the root node in the above case (How can I implement the css class that you posted)?

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

Regards,
Bader

[Plamen]

Hi Bader,

1)You can handle the 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 the NodeDataBound event and recognize the desired node:
 

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

Hope this will helps.

Kind regards,
Plamen Zdravkov
the Telerik team