kenodui treeview scroll to node issue

I have a tab strip with two tabs. In the first tab I have a search text box and grid to show search results. When the user has found the item using the search box, they select the item in the grid and it switches tabs to the treeview and selects the item in the treeview (all these components are kendo ui mvc).

The search is working and the the treeview item is selected, however, it has not scrolled down to the item position in the view. Here is the code I have, but cannot get the scrolling working. I am using the jquery plugin scrollto.

Index.cshtml:

<body>
    <div class="container-fluid">
        <section style="padding-top:10px;"></section>
        <div style="float:left; position:fixed">
            @(Html.Kendo().TabStrip()
                .Name("tabstrip")
                .Events(events => events
                    .Activate("onTabActivate")
                )
                .Items(tabstrip =>
                {
                    tabstrip.Add().Text("Search")
                        .Selected(false)
                        .Content(@<text>
                            <div>
                                <div style="padding-bottom:5px; padding-bottom:5px;">
                                    <input type="text" class="clearable" id="search" name="search" placeholder="Enter a Account Name or Number" />
                                </div>
                                @(Html.Kendo().Grid<SageEMS.CRM.WebApp.DataService.AccountTreeItem>()
                                        .Name("searchGrid")
                                        .Events(events => events
                                            .Change("onGridSelect"))
                                        .Columns(columns =>
                                        {
                                            columns.Bound(acc => acc.AccountName);
                                        })
                                         .DataSource(dataSource => dataSource
                                                                        .Ajax()
                                                                        .Model(model => model.Id(w => w.Account))
                                                                        .ServerOperation(false)
                                                                        .Read(read => read.Action("LoadSearchResult", "Home").Data("searchAccounts"))
                                        )
                                     .Pageable()
                                     .Selectable()
                                )
                            </div>
                        </text>);
                    tabstrip.Add().Text("Accounts")
                    .Selected(false)
                    .Content(@<text>
                        <div class='k-scrollable' style='height: 400px; overflow: auto;'>
                            @(Html.Kendo().TreeView()
                                .Name("treeview")

                                .Events(events => events
                                    .Expand("onExpand")
                                    .Select("onTreeviewSelect"))
                                .DataTextField("AccountName")
                                .DataSource(dataSource => dataSource
                                    .Model(m => m
                                    .Id("Account")
                                    .HasChildren("HasChildren"))
                                    .Read(read => read.Action("LoadAccountTree", "Home").Data("loadChildren"))
                                )
                            ))
                        </div>
                    </text>);

                })
            )
        </div>

        <div id="dvSections" style="padding-left:450px;">
            @{Html.RenderPartial("Sections", Model);}
</div>

</div>
<script>
    var _selectedAccount = null;
    var _selectedTrackingItem = null;
    var _searchValue;
    var _selectedGridItem = null;

    var $search = $('#search');
    var $treeview = $("#treeview");
    var $searchGrid = $("#searchGrid");
    var $txtSelectedAccount = $('#txtSelectedAccount');
    var $tabstrip = $("#tabstrip");

    $search.on('change keyup copy paste cut', function () {
        // set delay for fast typing
        setTimeout(function () {
            _searchValue = $('#search').val();
            $searchGrid.data("kendoGrid").dataSource.read();
        }, 500);
    });

    $(function () {

        $txtSelectedAccount.text("All");
        $treeview.select(".k-first");
    });

    function searchAccounts() {
        if (_searchValue) {
            return {
                searchTerm: _searchValue
            };
        }
    }

    function onExpand(e) {

        _selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
        $txtSelectedAccount.text(this.text(e.node));
    }

    function loadChildren() {

        if (_selectedAccount) {
            return {
                id: _selectedAccount
            };
        }
    }

    function onTabActivate(e) {

        var tab = $(e.item).find("> .k-link").text();

        if (tab == "Search")
            $search.focus();

        if (tab == "Accounts") {

            if (_selectedGridItem == null) return;

            var dataItem = getTreeItem(_selectedGridItem.id);

            if (dataItem)
                selectNodeInTree(dataItem);
        }
    }

    function onTreeviewSelect(e) {

        _selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
        $txtSelectedAccount.text(this.text(e.node));
    }

    function onGridSelect(e) {

        var grid = $searchGrid.data("kendoGrid");
        _selectedGridItem = grid.dataItem(grid.select());

        var tabStrip = $tabstrip.kendoTabStrip().data("kendoTabStrip");
        tabStrip.select(1); 

        // Get the tree item and select it
        var dataItem = getTreeItem(_selectedGridItem.id);

        if (dataItem)
            selectNodeInTree(dataItem);
        else
            findExpandSearch(_selectedGridItem.id);
    }

    function getTreeItem(id) {

        var treeView = $treeview.data('kendoTreeView');
        var dataSource = treeView.dataSource;
        var dataItem = dataSource.get(id);

        return dataItem;
    }

    function findExpandSearch(id) {

        // item is not loaded in treeview yet, find parent and trigger load children and search again
        var url = "@Url.Action("LoadTreePath")";
        $.ajax({
            url: url,
            type: "POST",
            data: JSON.stringify({ id: id }),
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            cache: false,
            success: function (data) {
                if (data && data.length > 1) {

                    $.each(data, function (index, value) {
                        _selectedAccount = value;
                        loadChildren();
                    });

                    var dataItem = getTreeItem(data[0]);

                    if (dataItem)
                        selectNodeInTree(dataItem);
                }
            },
            error: function (error, h, status) {
                alert(error.responseText);
            }
        });
    }

    function selectNodeInTree(item) {

        var treeView = $treeview.data("kendoTreeView");
        var node = treeView.findByUid(item.uid);

        if (node) {
            treeView.select(node);
            treeView.trigger("select", { node: node });
            treeView.element.closest(".k-scrollable").scrollTo(treeView.select(), 450);
        }
        else
           alert('Account not found in tree.');
    }  
</script>
<script src="../../Content/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

I have used the following sample as a guide:

http://dojo.telerik.com/uYutu/23

Any suggestions appreciated, thanks in advance.

Upvotes: 0

Answers (2)

Steve Cha

Reputation: 1

I had a similar problem in my Treeview setup which was close to yours and was using the scrollTo() much as described in Lars Höppner’s solution.

My problem turned out to be a height style that was being applied to my treeview. Having any height defined on the treeview breaks the scrollTo() operation. Once I removed the offending css class it worked fine. Something to check for.

Upvotes: 0

Lars Höppner

Reputation: 18402

The example you posted works by scrolling the splitter's k-pane. The tabstrip you're creating your tree in doesn't have a k-scrollable, so you need to create your own scrollable container:

<div class='scrollable' style='height: 300px; overflow: auto;'>
    <div id="treeview-left"></div>
</div>

and then scroll it

tree.element.closest(".scrollable").scrollTo(tree.select(), 150)

Also, I think triggering the select event shouldn't be necessary since the select method will do that for you.

(demo)

Upvotes: 2

kenodui treeview scroll to node issue

Answers (2)

Related Questions