Reload/Refresh Tree w/ New Parameters

6 posts, 1 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 01 Feb Link to this post

    I've got an existing tree we're looking to replace w/ the Kendo TreeView. I've got most of it working, but I'm having issues w/ one particular use case.

    Referring to the attached image, we load a tree view by default when the page is loaded. Then the user can choose to change the context of the tree - for example, showing items w/ various statuses, as shown in the filter button dropdown. In our current solution we remove the tree (the entire div) completely and re-create it from scratch by appending on a new, empty div and calling the tree init again.

    I'm hoping we won't need to do this w/ the Kendo version, but I can't figure out how to refresh the tree while modifying the parameters passed to the datasource. I was able to get the general refresh button (bottom left) working by doing a read on the datasource, but it keeps the original parameters. We have similar functionaly tied to the dropdown above the tree (Users [by surname]), where they can change the whole tree, rather than just the parameters. For example, they could switch it to Users [by organization] or Users [by given name].

    My current init for the TreeView:

    function getTree(type, status) {   
        var url = page_init[type].tree_data;
         
        //if status is passed in, append it to the url
        if (typeof(status) != 'undefined') {
            url += status;
        }
         
        //set up the tree
        var tree_datasource = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: url,
                    dataType: "json"
                }
            },
            schema: {
                type: "json",
                data: "Entries",
                model: {              
                    id: "ID"
                }
            }
        });
         
        $("#nav_tree").kendoTreeView({
            loadOnDemand: false,
            dataSource: tree_datasource,
            dataTextField: "Text"
        });
    }

    And the existing function calls for changing the full tree (dropdown, #tree_select) and filter (button, #tree_filter)

    $("#tree_select").on("change", function (event) {
        event.preventDefault();
        getTree(this.value, 'active');
    });

    <ul id="tree_filter" class="dropdown-menu dropdown-menu-filter">
        <li onclick="getTree($('##tree_select').val(), 'active')">Active</li>
        <li onclick="getTree($('##tree_select').val(), 'inactive')">Inactive</li>
        <li onclick="getTree($('##tree_select').val(), 'all')">All</li>
    </ul>
  2. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 02 Feb in reply to Ashleigh L Link to this post

    FYI I've created a support ticket for this issue, so no response is required to this post.
  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 03 Feb Link to this post

    Hello Shimmoril,

    You can use the .data() method of the DataSource (the HierarchicalDataSource inherits all of the methods of the DataSource) to change the data set, based on some conditions and/or events. In the described scenario execute the data() method on changing of the Active/Inactive/All filter value.

    $("#treeview").data("kendoTreeView").dataSource.data(data1);

    I hope this helps.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 03 Feb in reply to Dimo Link to this post

    Sorry, I'm not following how this is supposed to work.

    When the Active/Inactive/All options are clicked, it executes the getTree() function, included in my original post. Based on the type and/or status passed in to the function, the URL for the datasource is created, and then the datasource is initialized.

    The set example in the API link you provided shows how to set the data items, without calling a function, which is not what I need.

  6. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 04 Feb Link to this post

    Hello shimmoril,

    Sorry about the misunderstanding.

    If the read url will change, then use the setDataSource() method of the TreeView and pass all the new DataSource configuration options there.

    https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/treeview.md#setdatasource

    If the URL will not change and you only need to pass custom parameters, then use the data configuration property of read to define a function, which will pass these parameters. When the TreeView needs to be reloaded, call the read() method of its DataSource instance.

    https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/data/datasource.md#transportreaddata-objectfunction

    $("#treeview").data("kendoTreeView").dataSource.read();


    In both cases described above, there will be no need to completely destroy and recreate the TreeView.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 04 Feb in reply to Dimo Link to this post

    That works perfectly, thanks Dimo.

    For reference, I removed the datasource from the tree init and set it afterwards instead:

    tree_datasource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: url,
                dataType: "json"
            }
        },
        schema: {
            type: "json",
            data: "Entries",
            model: {              
                id: "ID"
            }
        }
    });
     
    $("#nav_tree").kendoTreeView({
        loadOnDemand: false,
        dataTextField: "Text",
    });
     
    $("#nav_tree").data("kendoTreeView").setDataSource(tree_datasource);

Back to Top
Kendo UI is VS 2017 Ready