Tuesday, August 7, 2012

Grid View Check Box Validation Using Java Script

Html Code for Grid View with xml data

  <div>
        <asp:GridView ID="GvStudentsList" runat="server" AutoGenerateColumns="false" Width="30%"
            HeaderStyle-ForeColor="White" HeaderStyle-Height="50">
            <Columns>
                <asp:TemplateField HeaderStyle-BackColor="ActiveCaption" HeaderText="Name" ItemStyle-HorizontalAlign="Center"
                    ItemStyle-Height="40">
                    <ItemTemplate>
                        <asp:Label ID="lblname" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderStyle-BackColor="ActiveCaption" HeaderText="Age" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="lblquantity" runat="server" Text='<%# Eval("Quantity")  %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderStyle-BackColor="ActiveCaption" HeaderText="Grade" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="lblprice" runat="server" Text='<%# Eval("Price")  %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderStyle-BackColor="ActiveCaption" HeaderText="Select" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:CheckBox ID="chbselect" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <br /><br /><br />
        <asp:Button ID="btnCheckValidation" runat="server" 
            OnClientClick="return Validate_Checkbox()" Text="Validate CheckBox" 
            onclick="btnCheckValidation_Click" />
    </div>

Add Java Script Code in aspx

    <script type="text/javascript" language="javascript">
        function Validate_Checkbox()
        {
            // Get the check box from the grid
            var ChBox =  document.getElementsByTagName('input');
            
            // Set the default value for checkbox 
            var hasChecked =  false;
            
            // get the number of checkbox 
            
            var ChBoxNum =  ChBox.length;
            
            // loop through grid view 
            
            for (var i = 0 ; i < ChBoxNum; i++ )
            {
                if (ChBox[i].checked )
                {
                    // if check box checked 
                    hasChecked = true;
                    break;
                }
             }
                
                if (hasChecked == false)
                {
                alert("Select atleast one check box!");
                return false;
                }
                return true;
            
        }
    </script>
Click the Validate CheckBox button will show the following error message

No comments:

Post a Comment