Scribd Logo
Upload

Welcome to Scribd!

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

    Uploaded by

    deepu0000
    28 views5 pages
    a very nice JQuery tutorials

    Original Title

    JQueryTutorials

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    a very nice JQuery tutorials

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    28 views5 pages

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

    Uploaded by

    deepu0000
    a very nice JQuery tutorials

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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