Add class to checkboxes on top level

[-DJ-]

Hi, how would you go about adding a css class to any top level checkboxes?

Regards,
-DJ-

[Bozhidar]

Hi Daniel,

The checkbox element already has a class "rtChk", and you can use the following css selector to filter only the top level checkboxes:

.RadTreeView>ul>li>div>.rtChk
{ }

Or if you want to add your own, this could be done in the OnClientLoad event with the following script:

function clientLoad(sender) {
    var nodes = sender.get_nodes();
    for (var i = 0; i < nodes.get_count(); i++) {
        $telerik.$(nodes.getNode(i).get_checkBoxElement()).addClass("customClassName");
    }
}

 
Regards,
Bozhidar
the Telerik team

[-DJ-]

Hi Bozhidar,

Thank you for your help.

What I was doing before accessing top level nodes (and trying to access the checkboxes) was in codebehind. 
Now, with your solution I would prefer to add a class to the top level nodes from the javascript as well.

However, something like $telerik.$(nodes.getNode(i)).addClass("rtLevel1"); has no effect.

On top of that, I would prefer only to add these classes to nodes (and their respective checkboxes) if the node in question has children. 

Javascript really isn't my strong suit as you can probably tell.

Regards,
-DJ-

[Bozhidar]

Hello Daniel,

In order to assign a class to the node itself, you have to get a reference to it's DOM element, which is done with the get_element() function. And to determine whether a node has children or not, you can check the number of its child nodes.

Here is the modified clientLoad() function:

function clientLoad(sender) {
    var nodes = sender.get_nodes();
    for (var i = 0; i < nodes.get_count(); i++) {
        var node = nodes.getNode(i);

        if (node.get_nodes().get_count() > 0) {
            $telerik.$(node.get_checkBoxElement()).addClass("customClassName");
            $telerik.$(node.get_element()).addClass("customClassName");
        }
    }
}

 
Regards,
Bozhidar
the Telerik team