Set the checkbox to display as radiobutton

3 posts, 0 answers
  1. Michael
    Michael avatar
    23 posts
    Member since:
    Sep 2010

    Posted 22 Jan 2014 Link to this post

    How can I change the CheckBox or CheckBox image to RadioButton or RadioButton image on the RadDropDownTree?
    In RadWinForms, the is a CheckType.RadioButton that allows what I am trying to implement.

    I have tried to  set the checkbox image of the raddropdowntree to display as a radio button. While inspecting the markup, it seems that if we could change the following:
        <input class="rtChk" type="checkbox">
    to:
        <input class="rtChk" type="radio">
    it displays the CheckBox as a RadioButton.

    This would give the customer a visual clue to single selection only whereas the checkbox visually implies multi selection.

    I also tried using CSS to "retrieve" the correct sprite.
    <style type="text/css">
        div.RadTreeView_Windows7 .rtIn             { background-position80 0; }
        div.RadTreeView_Windows7 .rtHover .rtIn    { background-position80 -40; }
        div.RadTreeView_Windows7 .rtSelected .rtIn { background-position80 -40; }
    </style>
    
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jan 2014 Link to this post

    Hi Michael,

    Please have a look into the following JavaScript to change the CheckBox to RadioButton.

    JavaScript:
    <script type="text/javascript">
        function pageLoad() {
            var checkbox = $(".rtChk");
            checkbox.replaceWith('<input type="radio" name="' + checkbox.attr('name') + '" value="' + checkbox.attr('value') + '" />');
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    23 posts
    Member since:
    Sep 2010

    Posted 23 Jan 2014 Link to this post

    Thanks,
    It did replace all the checkboxes with radiobuttons but now I cannot select/unselect any item in the tree. :(
    I would still prefer to just use CSS to replace the checkbox images as the radFormToggleSprite.png has both images available. See attached file.

    Edit: I modified your code snippet to
    <script type="text/javascript">
        function pageLoad() {
            var checkbox = $(".rtChk");
            checkbox.replaceWith('<input class="rtChk" type="radio" name="' + checkbox.attr('name') + '" value="' + checkbox.attr('value') + '" />');
        }
    </script>
     and it now works.
Back to Top