CODEWITHSUNDEEP
jqueryasp.netlistview
Yasser Sobhdel
Yasser Sobhdel

Reputation: 641

ASP.Net listview with clickable rows which highlights selected item

Every row of my ASP.net list view contains several components in a <div>, my question has two parts:

  1. How can I make this row clickable (to make use of SelectedIndexChanged event)? I want to load some data in another user control based on what row is clicked.

  2. How can I show the selected row using (say a light blue) box around or over it?

Thanks

Update

<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>

 <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

 <div class="clickable" url="http://www.google.com">
    Google
</div>

<div class="clickable" url="http://www.bing.com">
    Bing
</div>

<script type="text/javascript">
   $("div.clickable").mouseover(function () {
 //        $(this).css("outline-style", "solid");
 //        $(this).css("outline-color", "Navy");
 //        $(this).css("outline-width", "thin");
    $("#div.clickable").each(function () { $(this).removeClass("Selected") });
    $(this).addClass("Selected");
 });
 </script>

<script type="text/javascript">
    $("div.clickable").click(
    function () {
        window.location = $(this).attr("url");
    });
</script>

And Style would be 

.clickable
{
  cursor:pointer;
  cursor: hand;
}

.Selected
{
  outline-style:solid;
  outline-color:Navy;
  outline-width:thin;
}

Yet it is not working when mouse goes over the other item. it does not clear the outline of the previous item.

Upvotes: 0

Views: 1751

Answers (1)

Matheno
Matheno

Reputation: 4152

You need to hook into the listview row bind and add the information you want to have when clicked. Using this, you can add an attribute to the button that you read back on click, for example...

For the highlight you could use this JQuery in your client-side: (asp.net listview highlight row on click)

   $("#myTable tr").click( function () 
{
   $("#myTable tr").each(function () { $(this).removeClass("selected")}); 
   $(this).addClass("selected"); 
});​

Upvotes: 3

Related Questions