Sunday, May 6, 2012

Gridview Header Checkbox CheckAll -2


 <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  
    <script type="text/javascript" language="javascript">

        $(document).ready(function () {

            var gridView1Control = document.getElementById('<%=GridView1.ClientID %>');

            //1.

            $('input:checkbox[id$=CheckSelectAll]', gridView1Control).click(function (e) {
                if (this.checked) {
                    $('input:checkbox[id$=CheckSelect]', gridView1Control).attr('checked', true);
                }
                else {
                    $('input:checkbox[id$=CheckSelect]', gridView1Control).removeAttr('checked');
                }
            });


            //2.

            $('input:checkbox[id$=CheckSelect]', gridView1Control).click(function (e) {
                //To uncheck the header checkbox when there are no selected checkboxes in itemtemplate
                if ($('input:checkbox[id$=CheckSelect]:checked', gridView1Control).length == 0) {
                    $('input:checkbox[id$=CheckSelectAll]', gridView1Control).removeAttr('checked');
                }
                //To check the header checkbox when there are all selected checkboxes in itemtemplate
                else if ($('input:checkbox[id$=CheckSelect]:checked', gridView1Control).length == $('input:checkbox[id$=CheckSelect]', gridView1Control).length) {
                    $('input:checkbox[id$=CheckSelectAll]', gridView1Control).attr('checked', true);
                }
                else {
                    $('input:checkbox[id$=CheckSelectAll]').removeAttr('checked');
                }

            });


            //3. delete button is outside the gridview

            $('#<%= btnDeleteOutSideGridView.ClientID %>').click(function (e) {
                if ($('input:checkbox[id$=CheckSelect]:checked', gridView1Control).length) {
                    return confirm('Are you sure you want to delete ?');
                }
                else {
                    alert('Please select at lease one record.');
                    return false;
                }

            });
        });


 </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" AutoGenerateColumns="false"   runat="server" BackColor="White" BorderColor="#CCCCCC"
            BorderStyle="None" BorderWidth="1px" CellPadding="4" EnableModelValidation="True"
            ForeColor="Black" GridLines="Horizontal">
            <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
            <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
            <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="CheckSelectAll" runat="server" Text="Select" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckSelect" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField>
                <ItemTemplate>
                 <asp:Label ID="lbl" Text='<%#Eval("Name") %>'  runat="server"></asp:Label>
                </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField>
                 <ItemTemplate>
                  <asp:Button ID="btnDelete" runat="server" Text="Delete!" OnClientClick="return confirm('Are you sure !');" />
                 </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>


          <br />
         <asp:Button runat="server" ID="btnDeleteOutSideGridView" Text="Delete"  />

    </div>
    </form>

    

</body>

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More