Home > ASP.Net > Highlight selected row with DataList

Highlight selected row with DataList


Hi

try this example to highlight selected row with datalist

in this example i will display Title and Image from my News table in my database

where i save image name in my database and upload it in News folder in my website

create web page

<script type="text/javascript">
<!--
var currentColor = null;
var currentElement = null;

function changeColor(elementRef)
{
 if ( (currentColor != null) && (currentElement != null) )
 {
  currentElement.style.backgroundColor = currentColor;
 }

 currentColor = elementRef.parentNode.style.backgroundColor;
 currentElement = elementRef.parentNode;

 elementRef.parentNode.style.backgroundColor = 'Red';

 return false;
}
// -->
</script>

<asp: DataList ID="DataList1" runat="server" DataKeyField="Id" DataSourceID="SqlDataSource1" OnItemDataBound="DataList1_ItemDataBound">
    <ItemTemplate>
    <asp:Label id="Label1" runat="server"></asp:Label>
    <asp:Image id="Image1" runat="server"></asp:Image>
    </ItemTemplate>
    </asp: DataList>
   
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
     ConnectionString="<%$ ConnectionStrings:eLocalize_ConnStr %>"
        SelectCommand="SELECT [Id], [Title], [Picture] FROM [News]"></asp:SqlDataSource>

and in code behind

 protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
 if ((e.Item.ItemType == ListItemType.AlternatingItem) || (e.Item.ItemType == ListItemType.Item))
 {
  System.Web.UI.WebControls.Image imageRef = (System.Web.UI.WebControls.Image)e.Item.FindControl("Image1");
  System.Web.UI.WebControls.Label labelRef = (System.Web.UI.WebControls.Label)e.Item.FindControl("Label1");

  if ( (imageRef != null) && (labelRef != null) )
  {
   DataRow dataRow = ((DataRowView)e.Item.DataItem).Row;

   imageRef.ImageUrl = string.Format("~/News/{0}", dataRow["Picture"].ToString());
   labelRef.Text = string.Format("{0}", dataRow["Title"].ToString());

   string clickHandler = "return changeColor(this);";
   imageRef.Attributes.Add("onclick", clickHandler);
  }

 }
}

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net
  1. sergeos
    February 7, 2009 at 7:04 pm

    Thank you!
    You are master of code!
    But this example work when i click on datalist row image.
    So, is it possible draw around border, when i mouseover the img?

  2. yasserzaid
    February 7, 2009 at 9:13 pm

    Thanks alot sergeos for your greate comment

    yes you can Highlieght selected row of your datalist

    onmouseover on your image in DataList control

    Just Try this code just change onclick with onmouseover:

    protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
    if ((e.Item.ItemType == ListItemType.AlternatingItem) || (e.Item.ItemType == ListItemType.Item))
    {
    System.Web.UI.WebControls.Image imageRef = (System.Web.UI.WebControls.Image)e.Item.FindControl(”Image1″);
    System.Web.UI.WebControls.Label labelRef = (System.Web.UI.WebControls.Label)e.Item.FindControl(”Label1″);

    if ( (imageRef != null) && (labelRef != null) )
    {
    DataRow dataRow = ((DataRowView)e.Item.DataItem).Row;

    imageRef.ImageUrl = string.Format(”~/News/{0}”, dataRow[“Picture”].ToString());
    labelRef.Text = string.Format(”{0}”, dataRow[“Title”].ToString());

    string clickHandler = “return changeColor(this);”;
    imageRef.Attributes.Add(”onmouseover”, clickHandler);
    }

    }
    }

    Hope this helps you

    Good Luck 😀

  3. October 9, 2012 at 10:21 am

    Thanks.

  4. yasserzaid
    November 5, 2012 at 8:28 am

    @gatesnext : You are welcome hope my post helps you.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: