Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Bharathi P
155
Add / remove the css on igtree node click event
posted

I want to apply the checkbox css to igtree on node click event. How can i achieve this? Please guide me.

I have used below code

nodeClick: function (evt, ui) {
// $('.customClass').removeClass('customClass'); // Remove the class from the previous element it has been applied to

// if (ui.element.hasClass('ui-igtree-node-nochildren')) // if the node is a leaf node apply the class

ui.element.addClass('ui-igcheckbox-small .ui-icon,.ui-igcheckbox-normal .ui-icon,.ui-iggrid th .ui-igcheckbox-normal.ui-state-default .ui-icon,.ui-igcombo-checkbox .ui-icon{background-image: url(../images/tickTrue.png)!important;width:17px;height:17px;position:absolute');

//}
}

Parents
No Data
Reply
  • 10685
    Suggested Answer
    Offline posted

    Hello Bharathi, 

    Please notice, the existing functionality implemented for enabling/disabling the checkboxes is the checkboxMode option. However it can be set only at initialization. What is more, using this option it ensures additional span elements are rendered in the HTML for the purpose of the checkboxes visualization. If these span elements are not existing, changing the css styles used for styling will not be enough to have the checkboxes visible again.

    Because of this, I suggest you to initially enable the checkboxes at initialization and later, upon an appropriate events for you hide and show this checkboxes again.

    For example when the igTree is rendered with the checkboxes, it is possible to get collection of the span elements and hide all at once. This will be applied for the leaf nodes as well. 

    var spanElements = $("span[data-role='checkbox']")
    spanElements.css("display", "none"); 

    Additionally, you could use for example jQuery toggleClass to change the states. 

            .MyCustomCSS { display:none; } 

            function changeCheckBoxCss() {

                var spanElements = $("span[data-role='checkbox']")

                spanElements.toggleClass("MyCustomCSS")

            }  

    I believe this to be sufficient enough in order to implement an appropriate for you approach.

Children