Please disable your adblock and script blockers to view this page
 

jQuery to highlight repeater selected row based on checkbox selection in Asp.Net C#,VB

Introduction: In this article I am going to share how to bind repeater and add checkbox with each record in repeater and highlight row based on checkbox selection in asp.net using jquery.
jQuery to highlight repeater selected row based on checkbox selection in asp.net
Click on image to enlarge

Description:  Its very common requirement to show checkbox along with each record in report to select specific records. It is very easy task but here I have shown how to change color of the selected row based on checkbox check uncheck using jquery to highlight selected row and make it look more attractive as shown in demo image above

Implementation: Let’s create a page to demonstrate the concept. 
  • First of all create a table and add dummy data into it using the following script:

CREATE TABLE tbBookDetails
(
                BookId INT NOT NULL IDENTITY(1,1) PRIMARY KEY,
                BookName         VARCHAR(100),
                Author                 VARCHAR(100),
                Publisher            VARCHAR(100),
                BookpPrice       DECIMAL(10,2)
)

INSERT INTO tbBookDetails VALUES
('Asp.Net','Ajay','Rozy Publication',1200),
('C#.Net','Bhavuk','Jai Publication',1000),
('VB.Net','Nancy','Rozy Publication',970),
('MVC','Sahil','Amar Publication',1480),
('JAVA','Supreet','Sam Publication',850),
('PHP','Parvesh','Maya Publication',800)

  • Now create a stored procedure to fetch all the records from table to bind in repeater data control

CREATE PROCEDURE spBookDetails
AS
BEGIN
                SET NOCOUNT ON;
                SELECT * FROM tbBookDetails
END

HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        function HighlightSelectedRow(cb) {
            var selectedRow = $(cb).parent().parent();
            if ($(cb).is(":checked")) {
                $(selectedRow).prop('class', 'highlight')
            }
            else {
                $(selectedRow).prop('class', 'normal')
            }
        }
    </script>
    <style type="text/css">
        .highlight {
            background-color: #feddc5;
        }
        .normal {
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table border="1" cellspacing="2" cellpadding="2" style="width: 500px;">
                <tr style="background-color: #E36C0A; color: #FFFFFF; height: 30px;">
                    <td>Sr.No</td>
                    <td></td>
                    <td>Book Name</td>
                    <td>Author</td>
                    <td>Publisher</td>
                    <td>Price</td>
                </tr>
                <asp:Repeater ID="rptBookDetails" runat="server">
                    <ItemTemplate>
                        <tr>
                            <td style="text-align: center;">
                                <%#Container.ItemIndex+1 %>
                            </td>
                            <td>
                                <asp:CheckBox ID="chkSelect" runat="server" OnClick="HighlightSelectedRow($(this));" />
                            </td>
                            <td>
                                <asp:Literal ID="ltrlBookName" runat="server" Text='<%#Eval("BookName") %>'></asp:Literal>
                            </td>
                            <td>
                                <asp:Literal ID="ltrlAuthor" runat="server" Text='<%#Eval("Author") %>'></asp:Literal>
                            </td>
                            <td>
                                <asp:Literal ID="ltrlPublisher" runat="server" Text='<%#Eval("Publisher") %>'></asp:Literal>
                            </td>
                            <td>
                                <asp:Literal ID="ltrlPrice" runat="server" Text='<%#Eval("BookPrice") %>'></asp:Literal>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </table>
        </div>
    </form>
</body>
</html>

  • Now In the <configuration> tag of web.config file add your connectionstring as:
<connectionStrings>
    <add name="conStr" connectionString="Data Source=LALIT-PC;Initial Catalog=MyDataBase;Integrated Security=True"/>
  </connectionStrings>
Note: Replace Data Source and Catalogue i.e. Database name as per your application

Asp.Net code to bind repeater from sql server database table

In code behind file(.aspx.cs)write the code as:
using System;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;

//Create Connection object and get connection string defined in web.config file
    SqlConnection sqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString);
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindRepeater();
        }
    }

    protected void BindRepeater()
    {
        try
        {
            using (sqlCon)
            {
                using (SqlCommand cmd = new SqlCommand("spBookDetails", sqlCon))
                {
                    cmd.CommandType = CommandType.StoredProcedure;
                    sqlCon.Open();
                    using (SqlDataReader dr = cmd.ExecuteReader())
                    {
                        if (dr.HasRows)
                        {
                            rptBookDetails.DataSource = dr;
                            rptBookDetails.DataBind();
                        }
                    }
                    sqlCon.Close();
                }
            }
        }
        catch{}
    }

Asp.Net VB Code to bind repeater from sql server database table

In code behind file(.aspx.vb)write the code as:
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

'Create Connection object and get connection string defined in web.config file
    Private sqlCon As New SqlConnection(ConfigurationManager.ConnectionStrings("conStr").ConnectionString)
 
  Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindRepeater()
        End If
    End Sub
    Protected Sub BindRepeater()
        Try
            Using sqlCon
                Using cmd As New SqlCommand("spBookDetails", sqlCon)
                    cmd.CommandType = CommandType.StoredProcedure
                    sqlCon.Open()
                    Using dr As SqlDataReader = cmd.ExecuteReader()
                        If dr.HasRows Then
                            rptBookDetails.DataSource = dr
                            rptBookDetails.DataBind()
                        End If
                    End Using
                    sqlCon.Close()
                End Using
            End Using
        Catch
        End Try
    End Sub

 Now over to you:
"A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates." 
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon