JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Menu & Tree › Auto Show / Select Item in Tree

Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • February 13, 2022 at 6:15 am #102865
    Kristopher Hill
    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.