Treeview expand down to selected node on load and click

[Mark]

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

[Dimitar Terziev]

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

 

 

[Mark]

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

[Dimitar Terziev]

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

 

 

[Mark]

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

[Dimitar Terziev]

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

 

 

[Mark]

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

[Dimitar Terziev]

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

 

 

[Mark]

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

[Dimitar Terziev]

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

 

 

[Mark]

Thanks Dimitar,

That worked perfectly!  Got there in the end!

Stephen