Add class to checkboxes on top level

4 posts, 0 answers
  1. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 19 Apr 2012 Link to this post

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

    Regards,
    -DJ-
  2. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 23 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 24 Apr 2012 Link to this post

    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-
  5. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 26 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top