Sunday, December 9, 2012

Checking All Checkboxes in a GridView and Change color Using jQuery



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CheckUnCheckAll(chk) {
            $('#<%=gvHistoryDrug.ClientID %>').find("input:checkbox[Id*=chkHeader]").each(function () {
                if ($(this).is(':checked')) {

                    $('#<%=gvHistoryDrug.ClientID %>').find("input:checkbox[Id*=chkChild]").attr('checked', true);
                    $('#<%=gvHistoryDrug.ClientID %>').find("input:checkbox[Id*=chkChild]").parent().parent().addClass('highlightRow');
                }
                else {
                    $('#<%=gvHistoryDrug.ClientID %>').find("input:checkbox[Id*=chkChild]").attr('checked', false);
                    $('#<%=gvHistoryDrug.ClientID %>').find("input:checkbox[Id*=chkChild]").parent().parent().removeClass('highlightRow');
                }
            });
        }

        function CheckRow(chk) {
            
            $("#<%=gvHistoryDrug.ClientID%> input[id*='chkChild']:checkbox").click(function () {
                if ($(this).is(':checked')) {
                    $(this).parent().parent().addClass('highlightRow');
                }
                else {
                    $(this).parent().parent().removeClass('highlightRow');
                }
            });
        };
  //or
        $(document).ready(function () {

            $("#<%=gvHistoryDrug.ClientID %> input[id*='chkHeader']:checkbox").live('click', function () {
                if ($(this).is(':checked')) {

                    $('#<%=gvHistoryDrug.ClientID %>').find("input:checkbox[Id*=chkChild]").attr('checked', true);
                    $('#<%=gvHistoryDrug.ClientID %>').find("input:checkbox[Id*=chkChild]").parent().parent().addClass('highlightRow');
                }
                else {
                    $('#<%=gvHistoryDrug.ClientID %>').find("input:checkbox[Id*=chkChild]").attr('checked', false);
                    $('#<%=gvHistoryDrug.ClientID %>').find("input:checkbox[Id*=chkChild]").parent().parent().removeClass('highlightRow');
                }
            });

            $("#<%=gvHistoryDrug.ClientID %> input[id*='chkChild']:checkbox").live('click', function () {
                if ($(this).is(':checked')) {
                    $(this).parent().parent().addClass('highlightRow');
                }
                else {
                    $(this).parent().parent().removeClass('highlightRow');
                }
            });
        });
       
     
    </script>

    <style type="text/css">
        .highlightRow
        {
             background-color:Green;
             Color:White;
        }
   </style>
.
.
.
.



<asp:GridView ID="gvHistoryDrug" runat="server" AutoGenerateColumns="False" AllowSorting="True"
                        DataKeyNames="Id" CssClass="tablestyle" AllowPaging="True" OnRowDataBound="gvHistoryDrug_RowDataBound">
                        <AlternatingRowStyle CssClass="altrowstyle" />
                        <HeaderStyle CssClass="headerstyle" />
                        <RowStyle CssClass="normalrowstyle" Wrap="false" />
                        <EmptyDataRowStyle BackColor="#edf5ff" Height="25px" VerticalAlign="Middle" HorizontalAlign="Center" />
                        <EmptyDataTemplate>
                            No Records Found
                        </EmptyDataTemplate>
                        <Columns>
                            <asp:TemplateField HeaderStyle-Width="10%">
                                <HeaderTemplate>
                                    <asp:CheckBox ID="chkHeader" runat="server" onclick="javascript:CheckUnCheckAll(this);" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox ID="chkChild" runat="server"  onclick="javascript:CheckRow(this)" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <%--<asp:BoundField SortExpression="Id" DataField="Id" HeaderText="Id" HeaderStyle-Width="10%" />--%>
                            <asp:BoundField SortExpression="MedicineName" DataField="MedicineName" HeaderText="Medicine"
                                HeaderStyle-Width="90%" />
                        </Columns>
                     
                    </asp:GridView>







No comments:

Post a Comment