Trouver la case à cocher et de la zone de texte placé à l'intérieur gridview à l'aide de javascript

Cette solution est testé et œuvres en utilisant uniquement JavaScript (pas de jQuery est nécessaire pour cette solution!).

1. C# (Dans Page_Load Méthode)

Dans Page_Load nous avons besoin d'ajouter un petit hack:

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

De cette façon, nous ajoutons de l'appel de fonction JavaScript sur le OnChange cas de tous les CheckBox de notre GridView. Ce qui est spécial, et nous ne pouvons pas atteindre par le biais du HTML est que nous sommes en train de le Row Index de chacun dans la fonction JavaScript, quelque chose que nous avons besoin plus tard.

2. Quelques remarques importantes pour la Partie HTML

Assurez-vous que les deux Checkbox de contrôle et de Textbox contrôle, mais plus important votre GridView de Contrôle a id statique à l'aide de la ClientIDMode="Static" comme indiqué ci-dessous:

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

Et pour le GridView de contrôle:

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

3. Partie Javascript

Et ensuite dans votre fichier JavaScript/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. Quelques Notes pour la mise en œuvre

• Notez que dans le code JavaScript, à la ligne:
  
  var currentGridViewRow = GridView.rows[Row + 1];
  
  le [Row + 1] est important de faire ce travail et ne devraient pas changer.
• Et enfin:

Les lignes suivantes:

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

La .cells[2] et .cells[0] est peut-être différent pour vous, donc vous devez choisir le bon numéro dans la [].

Habituellement, ce sera le numéro de la colonne de votre GridView en commençant à compter à partir de 0.

Donc, si votre CheckBox était dans la première colonne de la GridView, alors vous devez .cells[0].

Si votre TextBox est dans la deuxième colonne de votre GridView alors vous avez besoin .cells[1] (dans mon cas ci-dessus, TextBox était dans la troisième colonne de mon GridView et donc, j'ai utilisé .cells[2])

Vous pouvez définir votre grille comme ceci :

 <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>

Et votre Fonction Javascript Serait :

<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>

Cette fonction Javascript est appelé événement onblur de la zone de texte.
Lorsque cette fonction est appelée en même temps, il transmet un paramètre
qui n'est rien, mais la zone de texte id.

À l'intérieur de la fonction javascript en utilisant le paramètre qui est le
id de la zone de texte, nous faisons le vaue.

Voici le code :

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

Ensuite, Pour chacune des "txtPeriod" contrôles disponibles à l'intérieur de la grille, nous devons attribuer
la valeur du courant "txtPeriod zone de texte" de la valeur.

Boucle de la Grille pour identifier chaque "txtPeriod" disponible :
Voici le code :

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

 });

À l'intérieur de cette boucle, nous devons attribuer le "txtPeriod"(courant/Modifié) de la valeur à d'autres
"txtPeriod" zones de texte.Avant de céder ses bonnes pratiques à vérifier est nulle ou NAN.
Voici le code :

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

Trouver des contrôles à l'intérieur de la grille à l'aide de 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);
}