Monday, September 15, 2014

Highlight GridView Row By Clicking in ASP.NET using JQuery

First of all we need to define a style class to highlight the row by clicking we can do it in header section of the page

<style> .selectedRow { background-color: yellowgreen !important; } </style>


then here is our JavaScript function



<script type="text/javascript">
        function pageLoad(sender, args) {
            $('#<%=grdBatch.ClientID %>').delegate('tr', 'click', function () {
                $('#<%=grdBatch.ClientID %> tr').not(this).removeClass('selectedRow');
                $(this).toggleClass('selectedRow');
            });
        }
    </script>


here is the gridview control


<asp:GridView ID="grdBatch" runat="server" ShowHeader="true" AutoGenerateColumns="False" ItemType="DataModel.Student" EmptyDataText="No records found" Width="100%" > <Columns> <asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-CssClass="first" ItemStyle-CssClass="first"> <HeaderStyle HorizontalAlign="Left" /> </asp:BoundField> </Columns> </asp:GridView>