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>
Labels:
gridview
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment