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

Treeview expand down to selected node on load and click

10 Answers 1185 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 14 Aug 2015, 04:47 PM

Hi there,

 I need a hand on how to achieve this.  I have a page with a dynamically loaded treeview working fine on the left, and content on the right based on the tree view node that has been clicked.  When the content on the right is saved, it needs to reload both that content and the treeview - because the treeview might change based on the right content save.  I'm doing a full page reload, passing through the selected treeview node ID in the URL.

On reloading, I need the selected ID node to be selected still (this is working fine), but also I need :-
- the treeview to be expanded down to that node so that the selected node is visible to the user
- to trigger the click even of that node such that the content on the right is reloaded from that event as currently

How can I achieve this?  I can't find any loaded/rendered event to work with (I tried the page document.ready event but the treeview isn't available to the DOM at that point so threw an error, and also the dataBound event of the treeview but that didn't seem to trigger either, it just did nothing).

Any help would be appreciated.

Thanks, Mark

10 Answers, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 18 Aug 2015, 07:22 AM
Hi,

In order to achieve the desired functionality you should subscribe to the dataBound event of the treeview widget and to use the expandTo method in order to expand the parents of a given child node.

Regards,
Dimitar Terziev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 18 Aug 2015, 08:49 AM

Hi Dimitar,

The databound event isn't being fired.  Is this because it's bound to server side data?  Currently it is bound to a property in my MVC viewbag (as this was the example I created the code based off).  Is there a different way of populating my treeview from an MVC controller action result and have the DataBound event still fire?  Here's my view code...

@*SURVEY BY LOCATION TREE VIEW*@
                <h1 onclick="$('#TreeViewSurveyByLocation').slideToggle();">Survey By Location</h1>
                @( Html.Kendo().TreeView()
                    .Name("TreeViewSurveyByLocation")
                    .HtmlAttributes(new { @class = "alignleft" })
                    .Events(events => events.Select("onSelectSurveyByLocation").DataBound("onDataBoundSurveyByLocation"))
                    .BindTo((IEnumerable<TEAMSPortalV2.Models.NodeViewModel>)ViewBag.TreeSurveyByLocation, (NavigationBindingFactory<TreeViewItem> mappings) =>
                    {
                        mappings.For<TEAMSPortalV2.Models.NodeViewModel>(binding => binding.ItemDataBound((item, node) =>
                        {
                            item.Id = node.Id.ToString();
                            item.Text = node.NodeHTML;
                            item.Expanded = node.Expanded;
                            item.Encoded = false;
                            item.Selected = (node.Id.ToString() == Request.QueryString["Item"] && Request.QueryString["Tree"] == "TreeViewSurveyByLocation" ? true : false);
                        })
                        .Children(node => node.Children));
                    })
                ) 

And the corresponding JS :-

    // select a node on the survey by location tree view
    function onSelectSurveyByLocation(e) {
        ​alert('this is hit fine');
    }

    // databound event on the survey by location tree view
    function onDataBoundSurveyByLocation(e) {
        alert('this doesnt get hit');
    }​

Thanks,  Mark

0
Dimitar Terziev
Telerik team
answered on 19 Aug 2015, 03:16 PM
Hi Mark,

Please excuse me for not noticing that you have already tried the dataBound event, which is indeed not fired when the treeview's html is served from the server. I have used one of our online demos to make a sample utilizing the document ready event and it seems to be working properly on my end, here is a video. Could you share the implementation that you were using ?

Regards,
Dimitar Terziev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 19 Aug 2015, 03:54 PM

Hi Dimitar,

 Still no luck - if I subscribe to document.ready() event as per the video you sent, the DOM doesn't recognise the treeview - it comes back as undefined (see the alert in the code below).  Here's my JS and view code :-

<script>
    $(document).ready(function () {
        var treeview = $('#TreeViewSurveyByLocation').data('kendoTreeView');
        alert(treeview);   // returns undefined
    });​

</script>

<h1 onclick="$('#TreeViewSurveyByLocation').slideToggle();">Survey By Location</h1>
                @( Html.Kendo().TreeView()
                    .Name("TreeViewSurveyByLocation")
                    .HtmlAttributes(new { @class = "alignleft" })
                    .Events(events => events.Select("onSelectSurveyByLocation"))
                    .BindTo((IEnumerable<Models.NodeViewModel>)ViewBag.TreeSurveyByLocation, (NavigationBindingFactory<TreeViewItem> mappings) =>
                    {
                        mappings.For<TEAMSPortalV2.Models.NodeViewModel>(binding => binding.ItemDataBound((item, node) =>
                        {
                            item.Id = node.Id.ToString();
                            item.Text = node.NodeHTML;
                            item.Expanded = node.Expanded;
                            item.Encoded = false;
                            item.Selected = (node.Id.ToString() == Request.QueryString["Item"] && Request.QueryString["Tree"] == "TreeViewSurveyByLocation" ? true : false);
                        })
                        .Children(node => node.Children));
                    })
                )

Also, is there an ID equivalent to the findByText method you demonstrated in the video you sent?

Thanks, Mark

0
Dimitar Terziev
Telerik team
answered on 21 Aug 2015, 07:06 AM
Hello Mark,

Please move the script declaration after the TreeView's declaration (preferably at the bottom of the page) as in the video which I have provided. 
Regarding the API of the TreeView, please refer to our online documentation for more information on the matter.

Regards,
Dimitar Terziev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 24 Aug 2015, 12:01 PM

Hi Dimitar,

I've had partial success. I managed to get it working searching by text - using these lines :-

 $(document).ready(function () {
        var treeview = $('#TreeViewSurveyByLocation').data('kendoTreeView');

         var nodeElement = treeview.findByText("10/1 - Void ");   //  WORKS!!!
         var node = treeview.dataItem(nodeElement);
         treeview.expandTo(node);
         treeview.select(nodeElement);
   .......

I've now tried to find the same element by ID using the documentation and also referring to this article - http://www.telerik.com/forums/find-node-by-id - but it doesn't work.  My ID is a string rather than a number - not sure if that matters or not??  Here's the JS I'm using...

 <script>

    $(document).ready(function () {
        var treeview = $('#TreeViewSurveyByLocation').data('kendoTreeView');
        var dataSource = treeview.dataSource;
        var dataItem = dataSource.get("RM8675"); 
        var node = treeview.findByUid(dataItem.uid);  // if I alert node it returns [object] so seems to have found something??
        treeview.expandTo(node);
        treeview.select(nodeElement);
    .......

Any ideas of how I can fix this?  I need to expand by ID instead of text because multiple nodes have the same text content.  I've also attached an image of the  markup generated of the node I'm trying to expand to.

Thanks, Mark

0
Dimitar Terziev
Telerik team
answered on 26 Aug 2015, 06:50 AM
Hello Mark,

In order to expand a give node base on its data-id attribute, you could first reference the dom element via jquery using the following selector:
$('#TreeViewSurveyByLocation').find('li[data-id="RM8675"]');

Once you have reference to the dom element its data-uid attribute could be extracted via the following code:
$('#TreeViewSurveyByLocation').find('li[data-id="RM8675"]').attr('data-uid');


Regards,
Dimitar Terziev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 26 Aug 2015, 08:45 AM

Hi Dimitar,

The jQuery you posted selects the node fine, and I have successfully used that to select the node - the node is now highlighted in the tree view.  However, it did not expand to it (so the issue is definitely with the expandTo method it seems).  Any ideas?  My javascript is below..

$(document).ready(function () {
        var treeview = $('#TreeViewSurveyByLocation').data('kendoTreeView');
        var uid = $('#TreeViewSurveyByLocation').find('li[data-id="RM8675"]').attr('data-uid');
        var mynode = treeview.findByUid(uid);
        treeview.select(mynode);
        treeview.expandTo(mynode);
.........

Thanks, Mark

0
Accepted
Dimitar Terziev
Telerik team
answered on 27 Aug 2015, 05:00 PM
Hi Mark,

The expandTo method accepts  kendo.data.Node parameter, not a dom element. Please change your code as following:
$(document).ready(function () {
        var treeview = $('#TreeViewSurveyByLocation').data('kendoTreeView');
        var nodeElement = $('#TreeViewSurveyByLocation').find('li[data-id="RM8675"]');
        var node= treeview.dataItem(nodeElement);
        treeview.select(nodeElement);
        treeview.expandTo(node);


Regards,
Dimitar Terziev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 02 Sep 2015, 01:47 PM

Thanks Dimitar,

That worked perfectly!  Got there in the end!

Stephen

Tags
TreeView
Asked by
Mark
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Mark
Top achievements
Rank 1
Share this question
or