Search code examples
javascriptasp.net-mvcrazorgijgo-treeview

Remove checkbox from parent node in TreeView from

I am using Gijgo library (https://gijgo.com/tree/demos/material-design-treeview-checkbox) to display items in tree. I do not want to have checkbox beside the parent node (marked red in the image). Can anyone help me with this please?

This is how I am displaying the tree structure:

        var tree2 = $('#tree').tree({
            uiLibrary: 'bootstrap4',
            dataSource: '/products/getcategoriestree/' + get_configurator_id(),
            iconsLibrary: 'fontawesome',
            primaryKey: 'id',
            checkboxes: true,                
            icons: {
                expand: '<i class="fa fa-chevron-right"></i>',
                collapse: '<i class="fa fa-chevron-down"></i>'
            }, dataBound: function (e) {
                tree2.expandAll();
            }
        });

I tried using nodeDataBound function to iterate each node, and I can grab each parent item for which I do not want to have checkbox, but I am not sure how to remove checkbox from specific nodes.

        tree2.on('nodeDataBound', function (e, node, id, record) {                
            if (record["children"] != null) {
                console.log("PARENT Record");
                console.log(record);
                console.log(node);
                node.enableCheckBox = false;
            }
        });

enter image description here

P.S. I can't change the library, it's part of legacy code.

Solution

  • You could use CSS override the existing style:

    <style>
   div[data-type="tree"] > ul > li[data-role="node"] > div[data-role="wrapper"] > span[data-role="checkbox"] {
      display: none !important;
   }
</style>

    You could also use querySelectorAll in JavaScript to do something similar. I'm using a more generic selector here (like in the CSS example), but you could likely use the callback parameters (e, node, id, record) in order to specifically select which elements you wish to remove.

    tree2.on('nodeDataBound', function (e, node, id, record) {            
    const elements = document.querySelectorAll(`div[data-type="tree"] > ul > li[data-role="node"] > div[data-role="wrapper"] > span[data-role="checkbox"]`);
    elements.forEach((el) => el.remove());       
});