Wijmo UI for the Web
Add Check Boxes
Wijmo User Guide > Widgets > Tree > Tree Features > Add Check Boxes
Show All
Hide All

Building on the Quick Start example, you can add check boxes to your tree nodes using the showCheckBoxes option. In addition to the usual checked and unchecked states, you can allow a third state, indeterminate, that shows a square in a parent item's checkbox when there is a mix of states for related child items. To enable this, set the allowTriState option to true.

  1. In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which shows check boxes. 

    Drop down and copy script to paste in <head> section

    Script
    Copy Code 
    <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#tree").wijtree({
            showCheckBoxes: true,
            allowTriState: true
        });
    });
</script>
  2. No changes are necessary in the <body> section of your HTML file. The basic <ul> tag is sufficient to create the tree.
  3. Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Click Tree Node 1 and check one of its child nodes to see the indeterminate state.
See Also

Reference

wijtree API
showCheckBoxes Option
allowTriState Option
wijtreenode Class

Widgets

Tree

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page