Auto Show / Select Item in Tree - Smart UI Components

This topic has 1 reply, 2 voices, and was last updated 2 years, 9 months ago by admin.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts

February 13, 2022 at 6:15 am #102865

Participant

I can set a tree item as selected but it seems like it requires you to manually expand everything for it to be visible. Is there a way to set an item in the tree as selected and the tree expand without having to traverse the tree and expand each parent? I tried ensureVisible but that doesn’t appear to work. If not please add to capabilities for this, not sure what the desire to select a node but not have it expanded would be.

Thank you.

February 13, 2022 at 8:05 am #102867

admin

Keymaster

Hi Kristopher,

Thank you for writing.

We tried to reproduce that:

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Tree Selection Modes</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="../../../source/styles/jqx.default.css" />
    <link rel="stylesheet" type="text/css" href="../../../styles/demos.css" />

    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="../../../source/webcomponents-lite.js"></script>
</head>

<body class="viewport">
    <smart-tree id="tree" selection-mode="zeroAndOne">
        <smart-tree-item>Home</smart-tree-item>
        <smart-tree-item>Education</smart-tree-item>
        <smart-tree-item>Financial services</smart-tree-item>
        <smart-tree-item>Government</smart-tree-item>
        <smart-tree-item disabled>Manufacturing</smart-tree-item>
        <smart-tree-items-group>
            Communities
            <smart-tree-item>Partners</smart-tree-item>
            <smart-tree-items-group>
                By resource
                <smart-tree-item id="tv">TV</smart-tree-item>
                <smart-tree-item>Experience Design</smart-tree-item>
            </smart-tree-items-group>
        </smart-tree-items-group>
    </smart-tree>
 
    <!-- scripts -->
    <script type="module" src="../../../source/modules/smart.tree.js"></script>
    <script type="module" src="index.js"></script>

</body>

</html>

index.js

window.onload = function () {
const tree = document.querySelector(‘smart-tree’);

tree.select(‘tv’);
tree.ensureVisible(‘tv’);
};

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.