We help IT Professionals succeed at work.

vb.net Passing GridView Row # to a javascript function

Robert Hamel
Robert Hamel used Ask the Experts™
on
Hi, I have a gridview, where each gridview has a checkbox in column 1, and form fields in column 2 and 3.  My desired effect is that if the checkbox status changes, i want to either hide or unhide the form fields in the same row.
I have this workign with a check all button and uncheck all button, but when trying to create an OnCheckChanged event for the individual row, i'm not sure how to pass in the row number so I can identify the fields to make hidden.

In the code Below, i'd like go pass in "ROWNUMBER" variable to my function, so then I could use in my javascript

var thisField = document.getElementById('StudentGrid_TextBoxNextRequiredDate_' + ROWNUMBER);
          var thisWarningField = document.getElementById('StudentGrid_TextBoxWarningDays_' + ROWNUMBER);
          var thisCheckField = document.getElementById('StudentGrid_CheckBoxStudentSelect_' + ROWNUMBER);
 if ((thisField.value == "") && (thisCheckField.checked == 1)) {
              thisField.style.visibility = 'visible';
              thisWarningField.style.visibility = 'visible';

              thisField.value = "1/1/2021";
              thisWarningField.value = "30";
          }
          else if ((thisField.value != "") && (thisCheckField.checked == 1)) {
              thisField.style.visibility = 'visible';
              thisWarningField.style.visibility = 'visible';

              //thisField.value = "1/1/2021";
              //thisWarningField.value = "30";
          }

          else if ((thisField.value == "") && (thisCheckField.checked == 0)) {
              //thisField.value = "";
              //thisWarningField.value = "";
              thisField.style.visibility = 'hidden';
              thisWarningField.style.visibility = 'hidden';

          }
          else if ((thisField.value != "") && (thisCheckField.checked == 0)) {
              //thisField.value = "";
              //thisWarningField.value = "";
              thisField.style.visibility = 'hidden';
              thisWarningField.style.visibility = 'hidden';
          }
<asp:GridView runat="server" ID="StudentGrid"  AlternatingRowStyle-CssClass="GridAltRow" RowStyle-CssClass="GridRow" AutoGenerateColumns="False" Width="500">
                       <Columns>
                            
                  <asp:TemplateField HeaderText="">
                  <ItemTemplate>
                    <asp:CheckBox ID="CheckBoxStudentSelect" OnCheckedChanged="hideunhide(this,ROWNUMBER)" runat="server" value='<%# Eval("Student_Number") %>' />
                  </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Student Name" ItemStyle-HorizontalAlign="Left">
                  <ItemTemplate>
                    <asp:Label ID="LabelFirstName" runat="server" Text='<%# Eval("First_Name") & " " & Eval("Last_Name") %>'></asp:Label>
                    <asp:HiddenField ID="HiddenStudentNumber" runat="server" Value='<%# Eval("Student_Number") %>'/>
                  </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Warning Days">
                  <ItemTemplate>
                    <asp:TextBox ID="TextBoxWarningDays" runat="server" Text='<%# Eval("WarningDays")%>' Width="70" ReadOnly="True"></asp:TextBox>
                    <asp:HiddenField ID="HiddenWarningDays" runat="server" Value='<%# Eval("WarningDays")%>' />
                    
                  </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Next Required Date">
                  <ItemTemplate>
                    <asp:TextBox ID="TextBoxNextRequiredDate" runat="server" Text='<%# CheckNullDate(Eval("NextRequiredDate"))%>' Width="70" ReadOnly="True"></asp:TextBox>
                    <asp:HiddenField ID="HiddenNextRequiredDate" runat="server" Value='<%# Eval("NextRequiredDate")%>'/>
                    <ajaxToolkit:CalendarExtender ID="CalExtEnd" runat="server" TargetControlID="TextBoxNextRequiredDate" />
                  </ItemTemplate>
                </asp:TemplateField>
                        </Columns>
                    
                    </asp:GridView>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
To hide a row you can simply to do this:

row.Cells[index_number_here].Visible = false;

Take a look at this:

http://stackoverflow.com/questions/114521/hide-asp-net-gridview-row
Robert HamelSenior .NET developer

Author

Commented:
disrupt... regarding that 2nd link:
http://www.dotnetspider.com/resources/36182-Hide-Grid-view-rows-using-javascript.aspx

that proved to be the solution I was looking for, worked perfectly with a bit of tweaking.

Thanks!
the event you're looking for is RowCommand if you use a <asp:CheckBoxField> control
if instead you use template fields with checkbox control, you will have to ensure autopostback is set
here is an interesting discussion on it:
http://forums.crystaltech.com/index.php?topic=33897.0
Robert HamelSenior .NET developer

Author

Commented:
Thanks Cimperiali.  This was helpful and enlightening.  I had already accepted the solution from Disrupt since it solved the problem perfectly, but i see this would have also worked well too.
Nice to know you ejoied. I am not herearound to see my suggestments accepeted, I am only another damned Nerd... ;-)