CODEWITHSUNDEEP
javascriptjquerytreeviewfuelux
Yina
Yina

Reputation: 31

How to preselect items within a Fuel UX treeview?

so I've implemented the treeview of Fuel UX within my website. Whenever it's loaded, I need to reselect the items I want manually. Is there a possibility to preselect certain items after each reload?

Thanks in advance!

Upvotes: 3

Views: 2785

Answers (3)

Алексей Шевченко
Алексей Шевченко

Reputation: 26

I make if for ASP.NET MVC. I use a dynamic tree. At first I received a route for selected item

[{
    "id": 1,  // parent category
    "name": "Все категории",
}, {
    "id": 56,  //  1-st sub category
    "name": "Для дома",
}, {
    "id": 63,  //  item
    "name": "Домашние растения",
}]

Then it need to switch off Async request for Ajax in dataSource function: 'async':false

This is all code:

    @{
                    var jsonSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
                    string catRoute = jsonSerializer.Serialize(ViewBag.catRoute);
                }
                var catRoute = $.parseJSON('@Html.Raw(catRoute)'); // this is object of item route 


                function dynamicDataSource(openedParentData, callback) {
                    var childNodesArray = [];

                    $.ajax({
                        'type': 'post',
                        'url': '@Url.Action("getFuelUxTree", "Category", new { area = "Root" })',
                        'data': openedParentData,
                        'async':false   //  switch off ajax request
                    })
                    .done(function (data) {
                        childNodesArray = data;
                        lastTree = data;
                        callback({
                            data: childNodesArray
                        });

                    });
                }

                $('#categoryTree').tree({
                    dataSource: dynamicDataSource,
                    multiSelect: false,
                    folderSelect: false
                });

//  iterate all route items and open category
                for (var i = 0; i < catRoute.length; i++) {
                    $('li#'+catRoute[i].id+' button', '#categoryTree').click();
                }

Upvotes: 0

ThCC
ThCC

Reputation: 141

I was in the same situation since yesterday and could now solve the problem with the solution below. Just explaining that I used the methods present on the button "select nested Test Item 1" on this page. Here's the solution:

var preSelectFolder = function ($treeEl, folder, $parentEl) {
            var $elParent = $parentEl || $treeEl;
            if (folder.type == "folder") {
                var $folderEl = $elParent.find("div.tree-folder-name").filter(function (_, treeFolder) {
                    return $(treeFolder).text() == folder.name;
                }).parent();
                $treeEl.one("loaded", function () {
                    $.each(folder.children, function (i, item) {
                        preSelectFolder($treeEl, item, $folderEl.parent());
                    });
                });
                $treeEl.tree("selectFolder", $folderEl);
            }
            else {
                preSelectItem($treeEl, folder, $elParent);
            }
        };

        var preSelectItem = function ($treeEl, item, $parentEl) {
            var $elParent = $parentEl || $treeEl;
            if (item.type == "item") {
                var $itemEl = $elParent.find("div.tree-item-name").filter(function (_, treeItem) {
                    return $(treeItem).text() == item.name && !$(treeItem).parent().is(".tree-selected");
                }).parent();
                var itemId = $($itemEl).data() != null ? $($itemEl).data().id : "";
                if (itemId == item.id)
                    $treeEl.tree("selectItem", $itemEl);
            }
            else if (item.type == "folder") {
                preSelectFolder($treeEl, item, $elParent);
            }
        };

And in the event of 'loaded' I use this code:

element.on('loaded', function (e) {
            angular.forEach(scope.items, function (item) {
                preSelectItem($("#BuildTree"), item);
            });
        });

I use AngularJs so just replace "angular.forEach" for each function of Jquery and "scope.items" are items that should be pre-selected. In my case the items are in the following format:

[
    { name: 'Dir 1', type: 'folder', id: 'D1' },
    { name: 'Dir 2', type: 'folder', id: 'D2' },
    { name: 'Item 1', type: 'item', id: 'i1' },
    { name: 'Item 2', type: 'item', id: 'i2' }
]

Hope that helps.

Upvotes: 2

Adam Alexander
Adam Alexander

Reputation: 15180

If by manually, you mean you're actually clicking on the items again there should be a way to do this more programmatically.

I haven't tested it, but if you call $('#MyTree').tree('selectItem', $el) where $el is a .tree-item element, that should select the item.

It would be nice for your datasource to be able to tell the tree which items are selected. I see you've posted the feature request to https://fuelux.uservoice.com/forums/181290-general/suggestions/4097231-add-preselect-option-for-treeview which is great - anyone else reading this who agrees it would be useful should vote there.

Upvotes: 0

Related Questions