Reply To: Auto Show / Select Item in Tree

February 13, 2022 at 8:05 am #102867

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/