Find checkbox and textbox placed inside gridview using javascript

Question

I want to get the value of check box placed inside grid view. if check box is checked, it textbox in that row should be enable and if it is again uncheked, the textbox should get clear and disabled. I asked this question few hours back but still didn't get satisfactory answer. I tried like this.

//My grid code.

<asp:GridView ID="DeptGrid" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="DeptId" HeaderText="ID"/>
                    <asp:BoundField DataField="DeptName" HeaderText="Department"/>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:CheckBox ID="addToCompanyBox"  onClick="EnableHODBox()" runat="server" />
                        </ItemTemplate>
                        <HeaderTemplate>
                            Add
                        </HeaderTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:TextBox ID="hodNameBox" runat="server" Width="200px" Enabled="false"></asp:TextBox>
                        </ItemTemplate>
                        <HeaderTemplate>
                            Dept Head
                        </HeaderTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

//My javascript code

<script type="text/javascript">
 function EnableHODBox() {
     //alert('hello');
     var GridView = document.getElementById('<%=DeptGrid.ClientID %>');
     //var GridView = document.getElementById('');
     var DeptId;
     if (GridView.rows.length > 0) {
         for (Row = 1; Row < GridView.rows.length; Row++) {
            // DeptId = GridView.rows.cell[0];
             if (GridView.rows[Row].cell[3].type == "checkbox")
             // var chkbox = GridView.rows[Row].cell[3].type == "checkbox"
                 (GridView.rows[Row].cell[3].type).checked = true;
         }
     }
 }
 </script>

Solution 1

You can use the onclick JavaScript instead of the OncheckedChanged event which is a CheckBox server side event.

<asp:CheckBox ID="CheckBox2" runat="server" onclick="Javascript:JSfunctionName();" />

Edit:

var GridView = document.getElementById('<%=DeptGrid.ClientID %>')

Edit: Upon your request in comment

 if (GridView.rows[Row].cell[2].type == "checkbox")
 {
    if (GridView.rows[Row].cell[2].childNodes[0].checked)
    {
       GridView.rows[Row].cell[3].childNodes[0].disabled=false;// Enable your control here
    }
 }

Solution 2

This solution is tested and works using only JavaScript (no jQuery is required for this solution!).

1. C# Part (In Page_Load Method)

In Page_Load we need to add a small hack:

foreach(GridViewRow row in YourGridViewControlID.Rows)
{
    if (row.RowType == DataControlRowType.DataRow )
    {
      ((CheckBox) row.FindControl("YourCheckBoxID")).Attributes.Add("onchange", "javascript:TextboxAutoEnableAndDisable(" + (row.RowIndex ) + ");");
    }
}

This way, we are adding the JavaScript function call on the OnChange event of every CheckBox of our GridView. What is special and we can't achieve through the HTML is that we are passing the Row Index of each one in the JavaScript function, something that we need later.

2. Some important notes for the HTML Part

Make sure that both Checkbox control and Textbox control but more importantly your GridView Control has static id by using the ClientIDMode="Static" as shown bellow:

<asp:CheckBox ID="YourCheckBoxID" runat="server" ClientIDMode="Static"/>
<asp:TextBox ID="YourTextBoxID" TextMode="SingleLine" runat="server" ClientIDMode="Static" />

And for the GridView control:

<asp:GridView ID="YourGridViewControlID" ...... ClientIDMode="Static" runat="server">

3. Javascript Part

And then in your JavaScript file/code:

function TextboxAutoEnableAndDisable(Row) {
  // Get current "active" row of the GridView.
  var GridView = document.getElementById('YourGridViewControlID');
  var currentGridViewRow = GridView.rows[Row + 1];

  // Get the two controls of our interest.
  var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
  var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

  // If the clicked checkbox is unchecked.
  if( rowCheckbox.checked === false) {
    // Empty textbox and make it disabled
    rowTextBox.value = "";
    rowTextBox.disabled = true;
    return;
  }

  // To be here means the row checkbox is checked, therefore make it enabled.
  rowTextBox.disabled = false;
}

4. Some Notes for the above implementation

• Note that in the JavaScript code, at the line:
  var currentGridViewRow = GridView.rows[Row + 1];
  the [Row + 1] is important to make this work and should not change.
• And finally:

The following lines:

var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

The .cells[2] and .cells[0] is maybe different for you, so you have to choose the correct number in the [].
Usually, this will be the column number of your GridView starting counting from 0.

So if your CheckBox was in the first column of the GridView then you need .cells[0].
If your TextBox is in the second column of your GridView then you need .cells[1] (in my case above, TextBox was in the third column of my GridView and therefore, I used .cells[2])

Comments

[Microsoft Developer]

@Muhammad Akhtar...I can call my javascript by this method. But when I try to find gridview using "var GridView = document.getElementById('DeptGrid')", then it shows null even though, the grid view is there on page

[Microsoft Developer]

@Muhammad..Thanks dear...Your answers always works for me.But my actual problem is somewhat different.I divided my problem to small number of problems just to make it simpler.I have updated my question. Please have a look at it. I hope your answer will help me again...

[Microsoft Developer]

@Muhammad..I tried like this before and this time again.It shows some error in if (GridView.rows[Row].cell[3].type == "checkbox") statement. Its not going inside if{} block

[Muhammad Akhtar]

I have updated my answer again. It seems to be Cell index issue, I have updated Index issues.

[Microsoft Developer]

@Muhammad...I tried this too, but when I kept watch, it shows error 'TypeError: GridView.rows[Row].cell is undefined'. I cant understand why it shows undefined in if{} block when it seems perfectly working in other part before it..

[alxscms]

When answering a question format the code you're providing and explain what you are doing.