Change background colour of the whole item of a list view

Ndebata
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 7377 red flag
Rating: 3 out of 5  
 1 vote(s)

This article describes how to change background colour of the whole item of a list view based on the search string

Introduction

ASPX File

In aspx page three controls has been added.

  • txtSearch used to enter the search string.
  • Button1 used to start search.
  • ListView1 used to show the result set.

// write code here

<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Search" OnClick="Button1_Click" />

    <asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="itemPlaceholder">

        <LayoutTemplate>

            <table border="0" cellpadding="1">

                <tr style="background-color: #E5E5FE">

                    <th align="left" >

                        <asp:Literal ID="Literal1" runat="server" Text="Name" ></asp:Literal>

                    </th>

                    <th align="left">

                        <asp:Literal ID="Literal2" runat="server" Text="Country" ></asp:Literal>

                    </th>

                </tr>

                <tr id="itemPlaceholder" runat="server">

                </tr>

            </table>

        </LayoutTemplate>

        <ItemTemplate>

            <tr runat="server" id="_itemrow">

                <td >

                    <asp:Literal ID="Literal1" runat="server" Text='<%# Eval("Name") %>'></asp:Literal>

                </td>

                <td>

                    <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("Country") %>' ></asp:Literal>

                </td>

            </tr>

        </ItemTemplate>

    </asp:ListView>

C# Code


I am changing the back colour of the row which holds the dataitem when a particular search string is found in a row, it is handled in Itemdatabound event
which is registered in OnLoad.

 


public partial class TestPage : System.Web.UI.Page

{


protected override void OnLoad(EventArgs e)

{

base.OnLoad(e);

ListView1.ItemDataBound += new EventHandler<ListViewItemEventArgs>(ListView1_ItemDataBound);

if (!IsPostBack)

BindListView();

}


void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)

{

if (!string.IsNullOrEmpty(txtSearch.Text) && txtSearch.Text.Trim().Length > 0)

{

string srch = txtSearch.Text.Trim().ToLower();

var _data = (e.Item as ListViewDataItem).DataItem as Sample;

if ((!string.IsNullOrEmpty(_data.Name) && _data.Name.ToLower().Contains(srch)) || (!string.IsNullOrEmpty(_data.Country) && _data.Country.ToLower().Contains(srch)))

{

HtmlTableRow abc = e.Item.FindControl("_itemrow") as HtmlTableRow;

abc.BgColor = "Green";

}

}

}


protected void Button1_Click(object sender, EventArgs e)

{

BindListView();

}


private void BindListView()

{

ListView1.DataSource = GetSampleList();

ListView1.DataBind();

}


private List<Sample> GetSampleList()

{

// build a sample collection to bind in list view

List<Sample> lst = new List<Sample>();

lst.Add(new Sample { Country = "India", Name = "Dotnetfunda" });

lst.Add(new Sample { Country = "Usa", Name = "abc def" });

lst.Add(new Sample { Country = "Singapore", Name = "hello z" });

lst.Add(new Sample { Country = "UK", Name = "salman khan" });

return lst;

}

}

public class Sample

{

public string Name { get;set; }

public string Country { get; set; }

}

 

Thank you.

Debata

Page copy protected against web site content infringement by Copyscape

About the Author

Ndebata
Full Name: Narayan Debata
Member Level: Starter
Member Status: Member
Member Since: 4/12/2011 6:43:18 AM
Country: India

http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)