Treeview expand down to selected node on load and click

11 posts, 1 answers
  1. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 14 Aug 2015 Link to this post

    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

  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 18 Aug 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 18 Aug 2015 in reply to Dimitar Terziev Link to this post

    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

  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 19 Aug 2015 Link to this post

    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!
     
  6. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 19 Aug 2015 in reply to Dimitar Terziev Link to this post

    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

  7. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 21 Aug 2015 Link to this post

    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!
     
  8. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 24 Aug 2015 in reply to Dimitar Terziev Link to this post

    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

  9. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 26 Aug 2015 Link to this post

    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!
     
  10. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 26 Aug 2015 in reply to Dimitar Terziev Link to this post

    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

  11. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 27 Aug 2015 Link to this post

    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!
     
  12. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 02 Sep 2015 in reply to Dimitar Terziev Link to this post

    Thanks Dimitar,

    That worked perfectly!  Got there in the end!

    Stephen

Back to Top
Kendo UI is VS 2017 Ready