Find the checkbox and text box placed inside the gridview using javascript

Question

I want to get the value of the checkbox placed inside the grid. If checked, this text box on this line should be enabled, and if it is not checked again, the text box should be clear and disabled. I asked this question a few hours ago, but still have not received a 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> 

Answer 1

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

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

Edit:

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

Edit: Upon your request in the 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 } } 

Answer 2

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

1. C # part ( 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 ) + ");"); } } 

Thus, we add a JavaScript function call to the OnChange event of each CheckBox our GridView . What is special, and we cannot achieve through HTML , is that we pass the Row Index each of the JavaScript functions, which we need later.

2. Some important notes for the HTML part

Make sure the controls are CheckBox and Textbox , but more importantly your GridView control has a static identifier using ClientIDMode="Static" , as shown below:

 <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

• Notice that in the JavaScript code in the line:
  var currentGridViewRow = GridView.rows[Row + 1];
[Row + 1] it’s important to do this job and not change it.
• And finally:

The following lines:

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

.cells[2] and .cells[0] may be different for you, so you need to select the correct number in [] .
This will usually be the column number of your initial GridView count from 0 .

So, if your CheckBox was in the first column of the GridView, 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 so I used .cells[2] )

Answer 3

I also found that the statement if (GridView.rows [Row] .cell [2] .type == "checkbox") leads to an error, GridView.rows [Row] .cell [2] .type is undefined. The code I'm running looks like this:

  var grid = document.getElementById('<%=grdResults.ClientID%>'); if (grid.rows.length > 0) { for (row = 1; row < grid.rows.length; row++) { if (grid.rows[row].cells[0].childNodes[0].checked) { // do something here alert('function for row ' + row); } } 

Answer 4

You can define your grid as follows:

  <div> <asp:GridView ID="GridView1" runat="server" Width = "550px" AutoGenerateColumns = "false" Font-Names = "Calibri" Font-Size = "12pt" HeaderStyle-BackColor = "LightYellow" AllowPaging ="true" ShowFooter = "true" OnPageIndexChanging = "OnPaging" PageSize = "10" > <Columns> <asp:TemplateField ItemStyle-Width = "100px" HeaderText = "Name"> <ItemTemplate> <asp:TextBox ID="txtPeriod" runat="server" CssClass="css1 mycss" Text='<%# Eval("Period")%>' onblur="SetPostingPeriod(this)"></asp:TextBox> </ItemTemplate> </asp:TemplateField> </Columns> <AlternatingRowStyle BackColor="#C2D69B" /> </asp:GridView> </div> 

And your Javascript function will be:

 <script language="javascript" type="text/javascript"> /* Populating same data to all the textboxes inside grid, once change of text for one textbox - by using jquery */ function SetPostingPeriod(obj) { var cntNbr = $("#" + obj.id).val(); // var cntNbr = document.getElementById(obj.id).value; // alert(cntNbr); //Access Grid element by using name selector $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) { if ($.trim($(this).val()) != "") if (!isNaN($(this).val())) { $(this).val(cntNbr); } }); } </script> 

This Javascript function is called the onblur event of the text field. When this function is called at the same time, it passes a parameter which is nothing more than an identifier for a text field.

Inside the javascript function, a parameter is used, which is the id of the text field we get vaue.

Here is the code:

  var cntNbr = $("#" + obj.id).val(); 

Then For each of the txtPeriod controls available inside the grid, we need to assign the value of the current text field "txtPeriod" to them.

Looping Grid to identify each available "txtPeriod": Here is the code:

  $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) { }); 

Inside this loop we need to assign the value "txtPeriod" (current / changed) to another Text fields "txtPeriod". Before you assign your good practice to verification, it is null or NAN. Here is the code:

  if ($.trim($(this).val()) != "") if (!isNaN($(this).val())) { $(this).val(cntNbr); } 

Answer 5

Hi, you have a very simple solution.

Suppose your grid looks like this:

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Height="64px" Width="389px" EnableViewState="False"> <Columns> <asp:TemplateField HeaderText="EmployeeId"> <ItemTemplate> <asp:Label ID="lblEmployeeId" runat="server" Text=""></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="FirstName"> <ItemTemplate> <asp:Label ID="lblFirstName" runat="server" Text=""></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="LastName"> <ItemTemplate> <asp:Label ID="lblLastName" runat="server" Text=""></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> <HeaderStyle BackColor="#FF66FF" ForeColor="#660033" /> </asp:GridView> 

and your javascript to search for controls inside your grid

  <script language="javascript" type="text/javascript"> $(document).ready(function () { $("#btnAddToGrid").click(function () { var $grid = $('#<%=GridView1.ClientID %>'); var $row = $grid.find('tr:last').clone().appendTo($grid); var employeeId = $row.find("span[id*='lblEmployeeId']").text(); var firstname = $row.find("span[id*='lblFirstName']").text(); var lastname = $row.find("span[id*='lblLastName']").text(); alert("ID :" + employeeId +"\n" + "Name :" + firstname +" "+ lastname ); }); }); </script> 

Answer 6

Find controls inside the grid using java script:

 for (var r = 1; r < grid.rows.length; ++r) { var indexValue = 0; //based on browser. //IE8 var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue]; if (typeof (txtPeriod.value) == "undefined")//IE9 indexValue = 1 var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue]; alert(txtPeriod.value); } 

Answer 7

 var x = document.getElementById('<%=grdResults.ClientID%>').querySelectorAll("input"); var i; var cnt = 0; for (i = 0; i < x.length; i++) { if(x[i].type== "checkbox" && x[i].checked) cnt++; } alert("item selected=" + cnt);