2. ASPRunner.NET General questions
  3. [SOLVED]  Highlight clicked row in a List view
This topic is locked
[SOLVED]

 Highlight clicked row in a List view

 		6/28/2018 11:00:04
ASPRunner.NET General questions
F
 FrankR author

Anyone know how to properly highlight a row that is clicked in a list?
I am able to color the row on the click, but I haven't solved unhighlighting the previously clicked row.
?
F
 		FrankR author 6/30/2018

I figured it out. It's 4:00am. I'll document it in a few hours.
F
 		FrankR author 6/30/2018

Ok, here it is.
Set up an Ajax code snippet for the click on the List view table. Then:
Client Before event:


//----------------------------------------------------------------------------------------------------------------------------------------------------------

// row.record() is the jQuery object for the table row.

// Pass it on to the server to save it in session variable.

//----------------------------------------------------------------------------------------------------------------------------------------------------------

params["CurrentRowId"] = row.record().closest('tr').attr('id');
//----------------------------------------------------------------------------------------------------------------------------------------------------------

// Get a jQuery reference to the table row and set the background.

// Could also use row.record().css() here, but this highlights the entire line.

// row.record.css() highlights most of the line minus the first cell.

//----------------------------------------------------------------------------------------------------------------------------------------------------------

var thisrowid = "#" + params["CurrentRowId"];

var thisrow = $(thisrowid);

thisrow.css('background', 'orange');


Server event:


//----------------------------------------------------------------------------------------------------------------------------------------------------------

// Pass the last row id along to the client after event

//----------------------------------------------------------------------------------------------------------------------------------------------------------

if (XSession.Session["CurrentRowId"] == null)

{

result["LastRowId"] = "";

}

else

{

result["LastRowId"] = XSession.Session["CurrentRowId"];

}
// Save the current row id

XSession.Session["CurrentRowId"] = parameters["CurrentRowId"];


Client After event:


//--------------------------------------------------------------------------------------------------------------------

// Get a reference to the last row and unhighlight it

//--------------------------------------------------------------------------------------------------------------------

var lastrowid = "#" + result["LastRowId"];

var lastrow = $(lastrowid);

lastrow.css('background', 'white');
jadachDevClub member 6/30/2018



Ok, here it is.
Set up an Ajax code snippet for the click on the List view table. Then:
Client Before event:


//----------------------------------------------------------------------------------------------------------------------------------------------------------

// row.record() is the jQuery object for the table row.

// Pass it on to the server to save it in session variable.

//----------------------------------------------------------------------------------------------------------------------------------------------------------

params["CurrentRowId"] = row.record().closest('tr').attr('id');
//----------------------------------------------------------------------------------------------------------------------------------------------------------

// Get a jQuery reference to the table row and set the background.

// Could also use row.record().css() here, but this highlights the entire line.

// row.record.css() highlights most of the line minus the first cell.

//----------------------------------------------------------------------------------------------------------------------------------------------------------

var thisrowid = "#" + params["CurrentRowId"];

var thisrow = $(thisrowid);

thisrow.css('background', 'orange');


Server event:


//----------------------------------------------------------------------------------------------------------------------------------------------------------

// Pass the last row id along to the client after event

//----------------------------------------------------------------------------------------------------------------------------------------------------------

if (XSession.Session["CurrentRowId"] == null)

{

result["LastRowId"] = "";

}

else

{

result["LastRowId"] = XSession.Session["CurrentRowId"];

}
// Save the current row id

XSession.Session["CurrentRowId"] = parameters["CurrentRowId"];


Client After event:


//--------------------------------------------------------------------------------------------------------------------

// Get a reference to the last row and unhighlight it

//--------------------------------------------------------------------------------------------------------------------

var lastrowid = "#" + result["LastRowId"];

var lastrow = $(lastrowid);

lastrow.css('background', 'white');



Thanks for sharing this!
F
 		FrankR author 6/30/2018

My pleasure.