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');
//} }
I use this modification
var checkBoxes = $("span[data-role='checkbox']");
$.each(checkBoxes, function (key, value) { if (this.parentNode.dataset.path.length == 5) {// 1-3-5-7... the path length if separator is 1 char long //$(this).css("display", "none"); // if you do not want them at all $(this).css("visibility", "hidden"); // if you want to easiliy unhide later } });
Hello,
Well, I suggest you to obtain a collection of the nodes you want to modify and apply the change only to these nodes, based on your requirements. You could use our API to achieve this as well. For example there are various events and methods etc. to use to obtain the required nodes per your app logic. For example, the following could be useful and yet there are many more as the API for the igTree is quite robust: Events - nodeCheckstateChanged, nodeCheckstateChanging, nodeClick, nodeCollapsed, nodeCollapsing Methods - checkedNodes, isChecked, isExpanded, nodeByPath, partiallyCheckedNodes
This works fine. Thank you.
But i want to apply the css for individual node click not for all nodes. In your solution css applied for all the nodes.
Could you please guide me how to apply the css for individual node on node click event.
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.