Scribd
Upload
47 views

Check All Checkboxes in Gridview Using Jquery: Select All and Highlight Selected Row

The document discusses using jQuery to perform various actions on ASP.Net controls like checkboxes in a GridView, disabling all page controls, enabling and disabling input controls, and disabling specific dates in a Calendar control. Code snippets are provided to select all checkboxes in a GridView when the header checkbox is clicked, disable all page controls with a single button click, toggle disabling of all input controls except buttons, and disable weekends, specific dates, or days of the week in a Calendar control through its DayRender event.

Uploaded by

deepu0000
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
47 views

Check All Checkboxes in Gridview Using Jquery: Select All and Highlight Selected Row

The document discusses using jQuery to perform various actions on ASP.Net controls like checkboxes in a GridView, disabling all page controls, enabling and disabling input controls, and disabling specific dates in a Calendar control. Code snippets are provided to select all checkboxes in a GridView when the header checkbox is clicked, disable all page controls with a single button click, toggle disabling of all input controls except buttons, and disable weekends, specific dates, or days of the week in a Calendar control through its DayRender event.

Uploaded by

deepu0000
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

Check All Checkboxes in GridView using JQuery

Checking all checkboxes when we select the checkbox in header is one of the most common
requirements in ASP.Net application. The following article will help you to do this in JavaScript.
Select All and Highlight Selected Row
The folllowing code snippet will help us to do the same using JQuery.
<script language="javascript">
function SelectAllCheckboxes(chk) {
 $('#<%=gvUsers.ClientID %>').find("input:checkbox").each(function() {
 if (this != chk) {
 this.checked = chk.checked;
 }
 });
}
</script>

<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="False" BackColor="White"


BorderColor="#010101" BorderStyle="Groove" BorderWidth="1px" CellPadding="4">
<Columns>
  <asp:TemplateField HeaderText="Roles">
     <HeaderTemplate>
         <asp:CheckBox ID="chkAll" onclick="javascript:SelectAllCheckboxes(this);" runat="server" />
     </HeaderTemplate>
      <ItemTemplate>
        <asp:CheckBox ID="chkDelete" runat="server" />
     </ItemTemplate>
   </asp:TemplateField>
 <asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="True" />
 <asp:BoundField DataField="FirstName" HeaderText="First Name" ReadOnly="True" />
 <asp:BoundField DataField="LastName" HeaderText="Last Name" ReadOnly="True" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#330099" />
<RowStyle BackColor="White" ForeColor="#330099" />
<HeaderStyle BackColor="#F06300" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>
You can still modify the SelectAllCheckboxes() to have less code,

function SelectAllCheckboxes(chk) {
 $('#<%=gvUsers.ClientID %> >tbody >tr >td >input:checkbox').attr('checked', chk.checked);
}
How to disable the page or All Page control using jQuery in ASP.Net?
 
The introduction of jQuery has made every client side operations a lot easier.  This little jquery snippet
will help you to disable the whole page controls at a stretch.
 
It is very easy to access all the page controls using the jQuery selector expression. The below jquery
script will select all the page controls and will set the disabled attribute.
 
<script src="_scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
       <script language="javascript">
           $(document).ready(function() {
               $("#btnDisable").click(function() {
                    $("*").attr("disabled", "disabled");             
               });
   });
    </script>

How to Enable and Disable all Input control using jQuery in ASP.Net?
 
Sometimes, we will have requirements to disable all the input control in aspx page to prevent users
from providing some inputs. This little jquery snippet will help us to disable all the input controls in
our page to be disabled except button control.
 
Refer below,
 
<head runat="server">
    <title></title>
      <script src="_scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
       <script language="javascript">
           $(document).ready(function() {
               $("#btnReset").toggle(function() {
                   $("INPUT:not(INPUT[type=button]),SELECT,TEXTAREA").attr("disabled",
"disabled");
               }, function() {
                   $
("INPUT:not(INPUT[type=button]),SELECT,TEXTAREA").removeAttr("disabled");
               });
           });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>   
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
        </asp:DropDownList>
        <asp:ListBox ID="ListBox1" runat="server">
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
        </asp:ListBox>
        <asp:CheckBox ID="CheckBox1" runat="server" Text="eeee" />
        <asp:RadioButton ID="RadioButton1" runat="server" Text="eeee" />
        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
        </asp:CheckBoxList>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
        </asp:RadioButtonList>
        <input ID="btnReset" type="button" value="ResetAll" />
    </div>
 
In the above code, all the input controls will get disabled on click of the reset button and it will get
enabled on the next click (toggle).

How to make or prevent Weekends(Saturday and Sunday) in ASP.Net Calendar


control?
 
At times, we may have requirements to make the weekends (Saturday and Sunday) as non clickable or
selectable in order to prevent the users to select any dates in weekend. For example, if you use calendar
control to develop your date picker control and if you want the users to not select any dates in the
weekends then it will be good if we can disable the dates in the Calendar control for those days.
 
The below little code snippet will help you to do that by using DayRender event of Calendar control.
 
ASPX
<asp:Calendar ID="Calendar1" runat="server" ondayrender="Calendar1_DayRender">
        </asp:Calendar>
CodeBehind
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {
        if (e.Day.IsWeekend)
        {
            e.Day.IsSelectable = false;          
        }
      
    }

How to disable a particular date of a month in ASP.Net Calendar Control?


 
At times, we may have a requirement to disable a particular date in Calendar control so that the users
cannot select that date. This little codesnippet will help you to do that using the DayRender event of
Calendar control.
 
ASPX
<asp:Calendar ID="Calendar1" runat="server" ondayrender="Calendar1_DayRender">
</asp:Calendar>
CodeBehind
  protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {
         if (e.Day.Date.ToShortDateString() == "7/27/2010")
        {
            e.Day.IsSelectable = false;
        }
     }
 
The above code will disable July 27, 2010 when rendering the Calendar control.

How to disable particular Day of a Week in ASP.Net Calendar control?


 
Read my previous snippet How to disable Weekends(Saturday and Sunday) in ASP.Net Calendar
control? which discussed on disabling the weekend dates.
 
Sometimes, we may have requirements to block or disable a particular day of a week in the caledar
control.
 
The below little code snippet will help you to do that by using DayRender event of Calendar control.
 
ASPX
<asp:Calendar ID="Calendar1" runat="server" ondayrender="Calendar1_DayRender">
</asp:Calendar>
CodeBehind
  protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {
        if (e.Day.Date.DayOfWeek == DayOfWeek.Monday)
        {
            e.Day.IsSelectable = false;
        } 
     }

You might also like