Show More and Show Less for tree View Control

[Ubahariya]

Team,

I want to add "show more" and "show less" for RadTreeView control. Please let me know If there is any property for the same or kindly suggest a way to achieve as attached images.

Please find attached!

Thanks & Regards
Ubahariya

[Plamen]

Hi Ubahariya,

I am sending you a sample project that shows one way you can implement this scenario.

Hope this will be helpful. If you have further questions, please let me know.

Greetings,
Plamen Zdravkov
the Telerik team

[Ubahariya]

Thanks Plamen!

I have seen the code. But, I wanted to achieve it from client-side since I am loading huge amount of data and I will be having around 10 tree view controls in my aspx page.

Is there any possbility?

Thanks & Regards
Ubahariya

[Plamen]

Hello Ubahariya,

I cannot think of any other way how to achieve this functionality on the client. In this case we usually recommend using RadTreeView scrolling.

Hope this is helpful. If you think of some way yourself please share it with the community.

Regards, Plamen Zdravkov
the Telerik team

[Ubahariya]

Thanks a lot  Plamen Zdravkov! 

I don’t find any solution to do it from client side. I did it from server side itself as u suggested.

Now I have another clarification on TreeView Node Expand/Collapse Mode.

I have two div tags in my aspx page.

One is for “RadTreeView” and

another one is for “Show More” Link.

Here I want to set it to “Visible: false” for Show More link while clicking on radtreeview node "collapse"  and set to visible: true while clicking on radtreeview node expand from client side. (PFA an Image for more clarity)

I could do it from server side. But, not able to do it from client side.

Is there any way to do it from client side? 

<div id="divTopics">

            <telerik:RadTreeView ID="RadTreeView1Topics" runat="server" DataTextField="Topics"

                Skin="Test" EnableEmbeddedSkins="false" DataFieldID="CategoryID" DataFieldParentID="TopLevelTopicsID"

                DataSource="<%# Layer.Topics %>" ShowLineImages="false" DataValueField="TopicsID"

                OnNodeClick="RadTreeViewTopics_NodeClick" OnNodeDataBound="RadTreeViewTopics_NodeDataBound"

                OnClientNodeClicking="OnClientNodeClickingHandler">

                <DataBindings>

                    <telerik:RadTreeNodeBinding ExpandMode="ClientSide" Expanded="true" Depth="0" />

                </DataBindings>

            </telerik:RadTreeView>

        </div>

        <div id="divTopicsShowMore" class="TopicsShowMore" runat="server">

            <asp:LinkButton ID="LinkButtonShowMoreTopics" runat="server" Text="Show More..."

                OnClick="LinkButtonShowMoreTopics_Click" ForeColor="#0000CC"></asp:LinkButton>

        </div>

Thanks & Regards

Uba

[Plamen]

Hi Ubahariya,

 
I will recommend you to use the RadButton as in the code I sent you. Here is the code that I used in order to hide and show the button:

</telerik:RadScriptManager>
   <script type="text/javascript">
       function OnClientNodeExpanding(sender, args) {

           var $ = $telerik.$;
           var button = $find("<%= LinkButtonShowMoreTopics.ClientID %>");
           button.set_visible(true);
       }

       function OnClientNodeCollapsing(sender, args) {
           var $ = $telerik.$;
           var button = $find("<%= LinkButtonShowMoreTopics.ClientID %>");
           button.set_visible(false);
       }
   </script>
   <div>
       <telerik:RadTreeView ID="RadTreeView2" runat="server" DataSourceID="XmlDataSource1"
           OnClientNodeExpanding="OnClientNodeExpanding" OnClientNodeCollapsing="OnClientNodeCollapsing"
           OnNodeDataBound="RadTreeView2_NodeDataBound">
           <DataBindings>
               <telerik:RadTreeNodeBinding DataMember="Node" TextField="Text" ExpandedField="Expanded" />
           </DataBindings>
       </telerik:RadTreeView>
       <asp:XmlDataSource runat="server" ID="XmlDataSource1" DataFile="TreeView.xml" XPath="/Tree/Node" />
       <telerik:RadButton runat="server" ID="LinkButtonShowMoreTopics" Text="More" OnClick="RadButton1_Click">
       </telerik:RadButton>
   </div>

Hope this will be helpful.

Greetings,
Plamen Zdravkov
the Telerik team

[Ubahariya]

Thanks a Lot Plamen Zdravkov!

Its working great.