Programmatically expand and select a child node...

8 posts, 0 answers
  1. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 16 Mar Link to this post

    Here is the code I am using to create the TreeView...

    01.@(Html.Kendo().TreeView()
    02.        .Name("CategoryTree")
    03.        .TemplateId("TreeViewTemplate")
    04.        .HtmlAttributes(new { })
    05.        .DataTextField("Description")
    06.        .AutoScroll(false)
    07.        .LoadOnDemand(true)
    08.        .Events(e => e.Select("_CategoryChooserView_OnCategorySelected"))
    09.        .Events(e => e.Expand("_CategoryChooserView_OnCategoryExpand"))
    10.        .Events(e => e.Collapse("_CategoryChooserView_OnCategoryCollapsed"))
    11.        .Animation(true)
    12.        //.DataSpriteCssClassField("DataSpriteCSSClass")
    13.        .DataSource(d => d
    14.            .Model(m => m
    15.                .Id("CategoryCode")
    16.                .HasChildren("HasChildren")
    17.            )
    18.            .Read(read => read.Action("ListSubCategories", "Services"))
    19.            .Events(e => e.RequestEnd("_CategoryChooserView_OnCategoryRequestEnd"))
    20.            .Events(e => e.RequestStart("_CategoryChooserView_OnCategoryRequestStart"))
    21.    ))


    After the Treeview is instantiated, I want to call a JavaScript function like this one to expand and select a particular node.  The node is not necessarily a top level node - it could be quite a ways down in the hierarchy.

    01.function _CategoryChooserView_SelectNode(CategoryCode)
    02.{
    03. 
    04.    if (CategoryCode.length > 0)
    05.    {
    06.        var TreeView = $("#CategoryTree").data("kendoTreeView");
    07.        var DataItem = TreeView.dataSource.get(CategoryCode);
    08. 
    09.        if (DataItem)
    10.        {
    11.            var Node = treeview.findByUid(DataItem.uid);
    12.            treeview.select(Node);
    13. 
    14.            ScrollElementToScrollableParent(Node);
    15.        }
    16.    }
    17.}

    The problem is that DataItem (line 7) comes back undefined every time, no matter what I feed "get()" method.  It seems to me that with a client side Treeview that fetches its data from a remote source upon expansion of a node, this can never be possible.

    How can I programmatically expand and work my way down to the node I want selected?  I somehow need to expand each node down to the target node.  Is it even possible?

    I pulled some of this from an example located here: http://www.telerik.com/forums/programatically-select-a-tree-node
  2. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 16 Mar in reply to Ken De Vries Link to this post

    Here is the Template I am using for the TreeView...

    1.<script id="TreeViewTemplate" type="text/kendo-ui-template">
    2.    <div id="CategoryChooserDiv_#:item.CategoryCode#" style="line-height:7px;">
    3.        <span id="CategoryChooserSpan_#:item.CategoryCode#" style="color:blue;">#: item.Description #</span>
    4.    </div>
    5.</script>

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 18 Mar in reply to Ken De Vries Link to this post

    Now I am trying the method discussed here: Expand Path

    It does not work either when used like this...

    01.function _CategoryChooserView_SelectNode(TaxonomyCode)
    02.{
    03. 
    04.    if (TaxonomyCode.length >= 3)
    05.    {
    06. 
    07.        var TreeView = $("#CategoryTree").data("kendoTreeView");
    08.        var TaxonomyPath = new Array();
    09.        var TargetCategory = TaxonomyCode.substring(TaxonomyCode.length, TaxonomyCode.length - 3);
    10. 
    11.        while (true)
    12.        {
    13.            var CategoryCode = TaxonomyCode.substring(0, 3);
    14. 
    15.            if (CategoryCode.length == 3)
    16.            {
    17.                TaxonomyPath.push(CategoryCode);
    18.                TaxonomyCode = TaxonomyCode.replace(CategoryCode, "");
    19. 
    20.            }
    21.            else
    22.                break;
    23. 
    24.        }
    25. 
    26.        if (TaxonomyPath.length > 0)
    27.        {
    28. 
    29.            TreeView.expandPath(TaxonomyPath);
    30.            var DataItem = TreeView.dataSource.get(TargetCategory);
    31. 
    32.            if (DataItem)
    33.            {
    34.                var Node = TreeView.findByUid(DataItem.uid);
    35.                if (Node.length)
    36.                {
    37.                    TreeView.select(Node);
    38. 
    39.                    ScrollElementToScrollableParent(Node);
    40.                }
    41.            }
    42.        }
    43. 
    44.    }
    45.}

     

    Is anyone out there?

  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Mar Link to this post

    Hello,

    Since the children are loaded asynchronously on demand you need to use the expandPath complete callback to get the item. Also, note that you should wait for the root elements to be loaded in order for the expandPath method to work - example.

    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 21 Mar in reply to Daniel Link to this post

    Daniel,

    Here is what I have tried based on your example...

    01.function _CategoryChooserView_SelectNode(TaxonomyCode)
    02.{
    03. 
    04.    if (TaxonomyCode.length >= 3)
    05.    {
    06.        debugger;
    07. 
    08.        var TreeView = $("#CategoryTree").data("kendoTreeView");
    09.        var TaxonomyPath = new Array();
    10.        var TargetCategory = TaxonomyCode.substring(TaxonomyCode.length, TaxonomyCode.length - 3);
    11. 
    12.        while (true)
    13.        {
    14.            var CategoryCode = TaxonomyCode.substring(0, 3);
    15. 
    16.            if (CategoryCode.length == 3)
    17.            {
    18.                TaxonomyPath.push(CategoryCode);
    19.                TaxonomyCode = TaxonomyCode.replace(CategoryCode, "");
    20. 
    21.            }
    22.            else
    23.                break;
    24. 
    25.        }
    26. 
    27.        if (TaxonomyPath.length > 0)
    28.        {
    29. 
    30. 
    31.            TreeView.expandPath(TaxonomyPath,
    32.                function ()
    33.                {
    34.                    debugger;
    35. 
    36.                    var DataItem = TreeView.dataSource.get(TargetCategory);
    37. 
    38.                    if (DataItem)
    39.                    {
    40.                        var Node = TreeView.findByUid(DataItem.uid);
    41.                        if (Node.length)
    42.                        {
    43.                            TreeView.select(Node);
    44. 
    45.                            ScrollElementToScrollableParent(Node);
    46.                        }
    47.                    }
    48. 
    49.                });
    50.        }
    51.    }
    52.}

     

    The incoming Taxonomy code is a string consisting of substrings indicating the category of component. For example "001002" is the taxonomy code for a subset of valves like this: "001" = Valves, "002" = Check Valves.  The category ID to expand in this case would be "002" (TargetCategory variable).  The last three digits of the Taxonomy Code is the ID of the leaf level category to be selected.

    The problem is that on line 36 above, DataItem is coming back undefined.  The function in lines 31 & 32 is getting called but ExpandPath does not seem to be fetching the data, even if the callback function is being executed.

    I have tried this a number of ways, none of which work.

  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 23 Mar Link to this post

    Hi,

    The code looks correct. Could you provide a runnable sample that demonstrates the problem or the code used to call the _CategoryChooserView_SelectNode function and a sample of the data so I can try to replicate it on my side?

    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 24 Mar in reply to Daniel Link to this post

    Daniel,

    OK, I have this almost working.  It was actually sort of working before but it was not expanding the first ID in the list.  In other words, if I manually expand the top-level node in the list, the Tree View will then expand and select the leaf level target node.

    My question is now: Why is the TreeView not expanding the first node in the branch containing the target?

    To be honest, I am beginning to think this is way too much hoop-jumping for such a simple task and am looking for an alternative representation for my category structure - cascading dropdowns or something.  I am also beginning to think that MVC is just a pain in the butt.  I feel like I have to do too much work in MVC to get something simple to work.

  9. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 28 Mar Link to this post

    Hi,

    The first node in the list seems to be expanded in the example from my initial reply. Can you modify it so that it demonstrates the issue or provide a runnable sample in which the method does not work if the first node is not expanded?

    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready