September 28, 2013

Change Row Color Of Gridview By Java Script with the use of Radiobutton



<script type="text/javascript">
function RadioCheck(chkSelect) {

var isChecked = chkSelect.checked;
var row = chkSelect.parentNode.parentNode;
if (isChecked) {
row.style.backgroundColor = '#ff3300';
row.style.color = 'black';
}
var currentRdbID = chkSelect.id;
var parent = document.getElementById("<%= GridView1.ClientID %>");
var items = parent.getElementsByTagName('input');

for (i = 0; i < items.length; i++) {
if (items[i].id != currentRdbID && items[i].type == "radio")
//if(items[i].value == "rdbtnAbsent" && items[i].type == "radio")(if want to check condition by each radiobutton in code.)
{
if (items[i].checked)
{
items[i].checked = false;
items[i].parentNode.parentNode.style.backgroundColor = 'white';
items[i].parentNode.parentNode.style.color = '#696969';
}
}
}
}

Call This Script In Grid View

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" CellPadding="4"
                ForeColor="#333333" GridLines="None" Width="70%" RowStyle-HorizontalAlign="Center"
                Style="text-align: center">
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                <Columns>
                    <asp:TemplateField HeaderText="Registration ID" Visible="false"></asp:TemplateField>
                    <asp:TemplateField HeaderText="Class">
                        <ItemTemplate>
                            <asp:Label Text='<% #Eval("ClassName")+" "+Eval("Section") %> ' ID="lblClass" runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="P">
                        <ItemTemplate>
                            <asp:RadioButton ID="rdbtnPresent" runat="server" GroupName="a" Checked="true" onclick="RadioCheck(this);" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="A">
                        <ItemTemplate>
                            <asp:RadioButton ID="rdbtnAbsent" runat="server" GroupName="a" onclick="RadioCheck(this);" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="L">
                        <ItemTemplate>
                            <asp:RadioButton ID="rdbtnLeave" runat="server" GroupName="a" onclick="RadioCheck(this);" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="NA">
                        <ItemTemplate>
                            <asp:RadioButton ID="rdbtnNA" runat="server" GroupName="a" onclick="RadioCheck(this);" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <EditRowStyle BackColor="#999999" />
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            </asp:GridView>

No comments: