Click here to Skip to main content
13,090,299 members (90,874 online)
Click here to Skip to main content
Add your own
alternative version

Stats

183.9K views
70 bookmarked
Posted 22 Jan 2008

Client-Side Validation for the CheckBoxes Inside a GridView

, 9 May 2008
Rate this:
Please Sign up or sign in to vote.
This article describes how to count the selected checkboxes inside a GridView control.

demo.gif

Introduction

I am presenting here a JavaScript code that ensures that at least one checkbox is checked among the checkboxes in a particular column inside a GridView control before submitting a form.

Using the code

I have used a TemplateField inside the GridView and put a CheckBox in the ItemTemplate of the TemplateField.

The HTML code looks like this:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
   <Columns> 
      <asp:BoundField HeaderText="n" DataField="sno"> 
       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
          <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
      </asp:BoundField>                
       <asp:TemplateField HeaderText="Select">
            <ItemTemplate>
               <asp:CheckBox ID="chkBxSelect" runat="server" />
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
        </asp:TemplateField>
     </Columns>
  </asp:GridView>
 <asp:Button ID="btnPost" runat="server" Text="Post" 

             OnClientClick="javascript:return TestCheckBox();"

             OnClick="btnPost_Click" />

Attach a OnClientClick event to the button [btnPost]:

<asp:Button ID="btnPost" runat="server" Text="Post" 

            OnClientClick="javascript:return TestCheckBox();"

            OnClick="btnPost_Click" />

Add this JavaScript in the page’s head section:

<script type="text/javascript">
   var TargetBaseControl = null;
        
   window.onload = function()
   {
      try
      {
         //get target base control.
         TargetBaseControl = 
           document.getElementById('<%= this.GridView1.ClientID %>');
      }
      catch(err)
      {
         TargetBaseControl = null;
      }
   }
        
   function TestCheckBox()
   {              
      if(TargetBaseControl == null) return false;
      
      //get target child control.
      var TargetChildControl = "chkBxSelect";
            
      //get all the control of the type INPUT in the base control.
      var Inputs = TargetBaseControl.getElementsByTagName("input"); 
            
      for(var n = 0; n < Inputs.length; ++n)
         if(Inputs[n].type == 'checkbox' && 
            Inputs[n].id.indexOf(TargetChildControl,0) >= 0 && 
            Inputs[n].checked)
          return true;        
            
      alert('Select at least one checkbox!');
      return false;
   }
</script>

In the above script, the global variable TargetBaseControl has been initialized in the window.onload event in order to get the reference of the parent control [GridView]. The function TestCheckBox first gets the array of all ‘input’elements inside the parent control. After that, it iterates all the elements of the array and tests a condition, and if the condition is found to be true, it returns true indicating that at least one checkbox is checked inside the GridView; else it displays a message and returns false. The condition tests the elements of a specific type in a particular column inside the parent element.

Just download the sample application and enjoy coding! I hope you will like this article.

Features of this script

This script is cross-browser compatible and fast as it iterates elements of a specific tag inside a target element [GridView] rather than iterating in a whole form. It searches the elements of a specific type in a particular column of the target element [GridView].

Supporting browsers

I have tested this script on the following browsers:

Browsers.png

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Samir NIGAM
Technical Lead Infogain India Pvt Ltd
India India


Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.



He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.



He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.



Awards:



You may also be interested in...

Comments and Discussions

 
QuestionI need validation on multiple pages Pin
Member 1319557222-May-17 3:09
memberMember 1319557222-May-17 3:09 
Questionvalidate two gridviews' checkboxes Pin
Member 935134522-Sep-12 2:53
memberMember 935134522-Sep-12 2:53 
GeneralMy vote of 5 Pin
satish deverkonda26-Oct-10 21:25
membersatish deverkonda26-Oct-10 21:25 
GeneralClient-Side Validation for the CheckBoxes Inside a GridView Pin
saiprasada26-May-09 0:25
membersaiprasada26-May-09 0:25 
GeneralReally Nice Pin
Member 389154616-Oct-08 1:45
memberMember 389154616-Oct-08 1:45 
QuestionHow do I collect values for records with checkboxes selected server side? Pin
Member 34028861-Jul-08 5:00
memberMember 34028861-Jul-08 5:00 
AnswerRe: How do I collect values for records with checkboxes selected server side? Pin
SAMir Nigam1-Jul-08 18:20
memberSAMir Nigam1-Jul-08 18:20 
GeneralRe: How do I collect values for records with checkboxes selected server side? Pin
Member 34028861-Jul-08 23:11
memberMember 34028861-Jul-08 23:11 
GeneralRe: How do I collect values for records with checkboxes selected server side? Pin
SAMir Nigam1-Jul-08 23:24
memberSAMir Nigam1-Jul-08 23:24 
Questionif no click event then??? Pin
Member 301315324-Jun-08 20:05
memberMember 301315324-Jun-08 20:05 
AnswerRe: if no click event then??? Pin
SAMir Nigam26-Jun-08 18:21
memberSAMir Nigam26-Jun-08 18:21 
QuestionWhat happens if checkboxes exists outside and inside of the grid? Pin
srinath g nath1-May-08 3:49
membersrinath g nath1-May-08 3:49 
AnswerRe: What happens if checkboxes exists outside and inside of the grid? Pin
Samir Nigam1-May-08 19:05
member Samir Nigam 1-May-08 19:05 
QuestionChanges in case of Wizard Control?? Pin
sassyboy14-Feb-08 4:53
membersassyboy14-Feb-08 4:53 
AnswerRe: Changes in case of Wizard Control?? Pin
Samir Nigam14-Feb-08 17:17
member Samir Nigam 14-Feb-08 17:17 
GeneralRe: Changes in case of Wizard Control?? Pin
sassyboy14-Feb-08 21:39
membersassyboy14-Feb-08 21:39 
GeneralRe: Changes in case of Wizard Control?? Pin
SAMir Nigam21-May-08 18:01
member SAMir Nigam 21-May-08 18:01 
GeneralNice one Pin
إ#1587م#1575ع#1610ل/codeProject$$>5-Feb-08 18:55
memberإ#1587م#1575ع#1610ل/codeProject$$>5-Feb-08 18:55 
GeneralRe: Nice one [modified] Pin
Samir Nigam5-Feb-08 20:42
member Samir Nigam 5-Feb-08 20:42 
GeneralSecurity notification Pin
Tuomas Hietanen30-Jan-08 4:01
memberTuomas Hietanen30-Jan-08 4:01 
GeneralRe: Security notification Pin
SAMir Nigam21-May-08 18:02
member SAMir Nigam 21-May-08 18:02 
GeneralGreat Work Pin
Gunarathinam29-Jan-08 17:47
memberGunarathinam29-Jan-08 17:47 
GeneralRe: Great Work Pin
Samir Nigam29-Jan-08 19:14
memberSamir Nigam29-Jan-08 19:14 
GeneralVery good Pin
DNhan29-Jan-08 2:00
memberDNhan29-Jan-08 2:00 
GeneralRe: Very good Pin
Samir Nigam29-Jan-08 2:08
memberSamir Nigam29-Jan-08 2:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170813.1 | Last Updated 10 May 2008
Article Copyright 2008 by Samir NIGAM
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid