ASP.net Gridview RadioButton and CheckBox

2 posts, 0 answers
  1. Khalid
    Khalid avatar
    1 posts
    Member since:
    Feb 2020

    Posted 24 Feb 2020 Link to this post

    I have GridView two column,  1 column is RadioButton and other is Checkbox,
    I want based on RadioButton click in the same row checkbox should be checked or unchecked, in the following code if click radio button then all checkbox in the columns is checked.

     

    <script type="text/javascript">


        function Check_Radio(rb) {
               var isChecked = rb.checked;
               var row = rb.parentNode.parentNode;
            if (isChecked) {
                row.style.backgroundColor = '#B6C4DE';
                row.style.color = 'black';
                
            }        
            
            var currentRdbID = rb.id;
            parent = document.getElementById("<%= GridView1.ClientID %>");
            var items = parent.getElementsByTagName('input');

            for (i = 0; i < items.length; i++) {
                if (items[i].id != currentRdbID && items[i].type == "radio") {
                    if (items[i].checked) {
                        items[i].checked = false;
                        items[i].parentNode.parentNode.style.backgroundColor = 'white';
                        items[i].parentNode.parentNode.style.color = '#696969';

                    }

                }

                if (items[i].id != currentRdbID && items[i].type == "checkbox") {

                    items[i].checked = true;

                }                 
        }
        }  
    </script>
    How can be fix the problem..

    Thanks

  2. Georgi
    Admin
    Georgi avatar
    698 posts

    Posted 27 Feb 2020 Link to this post

    Hello Khalid,

    The Check_Radio function iterates through all inputs and checks all checkboxes which have id different than the clicked radio button. If I understand correctly, you would like to check the checkobox only of the same row. Please correct me if I am wrong.

    If that is the case, you could simply find the checkbox within the current row and set its checked property.

    e.g.

          function Check_Radio(rb) {
            var isChecked = rb.checked;
            var row = rb.parentNode.parentNode;
            if (isChecked) {
              row.style.backgroundColor = '#B6C4DE';
              row.style.color = 'black';
            }
    
            $(row).find("[type='checkbox']").prop('checked', isChecked)
    
            var currentRdbID = rb.id;
            parent = document.getElementById("<%= GridView1.ClientID %>");
            var items = parent.getElementsByTagName('input');
    
            for (i = 0; i < items.length; i++) {
              if (items[i].id != currentRdbID && items[i].type == "radio") {
                if (items[i].checked) {
                  items[i].checked = false;
                  items[i].parentNode.parentNode.style.backgroundColor = 'white';
                  items[i].parentNode.parentNode.style.color = '#696969';
    
                }
    
              }
            }
          }

    Please try the above approach and let me know if it works for you.

    I look forward to your reply.

    Regards,
    Georgi
    Progress Telerik

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top