I am building a web part so I have to generate my page dynamically. I want to attach some JavaScript to a click event of my dynamically-built table rows so that they change color when clicked. The problem I’m having is referencing the ClientID attribute in order to send it to the JavaScript function.
When the page is generated the ClientID attribute is always equal to the ID attribute that I manually assign, not the eventual ClientID of the html row element. Hence, the JavaScript cannot find the element to change its color.
Is this even possible?
Here is my code:
Page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace MortgageIndex
{
public class MortgageIndexPart : WebPart
{
public MortgageIndexPart() {}
protected override void OnPreRender(EventArgs e)
{
Page.ClientScript.RegisterClientScriptInclude("JScript", Page.ClientScript.GetWebResourceUrl(this.GetType(), "MortgageIndex.JScript.js"));
LoadPageControls();
base.OnPreRender(e);
}
private void LoadPageControls()
{
// link to an external stylesheet
string includeTemplate = "<link rel='stylesheet' type='text/css' href='{0}' />";
string includeLocation = Page.ClientScript.GetWebResourceUrl(typeof(MortgageIndex.MortgageIndexPart), "MortgageIndex.StyleSheet.css");
LiteralControl include = new LiteralControl(String.Format(includeTemplate, includeLocation));
Page.Header.Controls.Add(include);
// call the web service to get a loaded object
//MortgageIndex myIndex = new MortgageIndex();
//MonthlyIndex myMonthlyIndex = myIndex.GetCurrentMortgageIndexMonthly();
HtmlTable myTable = new HtmlTable();
/******************/
/* Table Header */
/******************/
HtmlTableRow headerRow = new HtmlTableRow();
headerRow.Attributes.Add("class", "header");
headerRow.Attributes.Add("onclick", "deHighlightRows();");
// image
HtmlTableCell headerCell = new HtmlTableCell();
headerCell.Attributes.Add("colspan", "2");
Image headerImage = new Image();
//headerImage.ImageUrl = "money.gif";
headerImage.ImageUrl = Page.ClientScript.GetWebResourceUrl(typeof(MortgageIndex.MortgageIndexPart), "MortgageIndex.money.gif");
headerCell.Controls.Add(headerImage);
// title
Label labTableTitle = new Label();
labTableTitle.Text = "Mortage Indices";
headerCell.Controls.Add(labTableTitle);
headerRow.Controls.Add(headerCell);
/***************************/
/* Cost Of Savings Index */
/***************************/
HtmlTableRow row1 = new HtmlTableRow();
row1.ID = "row1";
// literal
HtmlTableCell row1cell1 = new HtmlTableCell();
Literal litCostOfSavingsIndex = new Literal();
litCostOfSavingsIndex.Text = "Cost of Savings Index";
row1cell1.Controls.Add(litCostOfSavingsIndex);
row1.Controls.Add(row1cell1);
// value
HtmlTableCell row1cell2 = new HtmlTableCell();
Label labCostOfSavingsIndex = new Label();
//labCostOfSavingsIndex.Text = myMonthlyIndex.CostOfSavingsIndex;
labCostOfSavingsIndex.Text = ".345";
row1cell2.Controls.Add(labCostOfSavingsIndex);
row1.Controls.Add(row1cell2);
row1.Attributes.Add("onclick", "highlightRow('" + row1.ClientID + "');");
/***************************/
/* Cost Of Deposits Index */
/***************************/
HtmlTableRow row2 = new HtmlTableRow();
row2.ID = "row2";
// literal
HtmlTableCell row2cell1 = new HtmlTableCell();
Literal litCostOfDepositsIndex = new Literal();
litCostOfDepositsIndex.Text = "Cost of Deposits Index";
row2cell1.Controls.Add(litCostOfDepositsIndex);
row2.Controls.Add(row2cell1);
// value
HtmlTableCell row2cell2 = new HtmlTableCell();
Label labCostOfDepositsIndex = new Label();
//labCostOfDepositsIndex.Text = myMonthlyIndex.CostOfDepositsIndex;
labCostOfDepositsIndex.Text = ".234";
row2cell2.Controls.Add(labCostOfDepositsIndex);
row2.Controls.Add(row2cell2);
row2.Attributes.Add("onclick", "highlightRow('" + row2.ID + "');");
/***********************************/
/* Twelve Month Treasury Average */
/***********************************/
HtmlTableRow row3 = new HtmlTableRow();
row3.ID = "row3";
// literal
HtmlTableCell row3cell1 = new HtmlTableCell();
Literal litTwelveMonthTreasureAverage = new Literal();
litTwelveMonthTreasureAverage.Text = "12 Month Treasury Average";
row3cell1.Controls.Add(litTwelveMonthTreasureAverage);
row3.Controls.Add(row3cell1);
// value
HtmlTableCell row3cell2 = new HtmlTableCell();
Label labTwelveMonthTreasureAverage = new Label();
// labTwelveMonthTreasureAverage.Text = myMonthlyIndex.TwelveMonthTreasuryAverage;
labTwelveMonthTreasureAverage.Text = ".123";
row3cell2.Controls.Add(labTwelveMonthTreasureAverage);
row3.Controls.Add(row3cell2);
row3.Attributes.Add("onclick", "highlightRow('" + row3.ID + "');");
myTable.Rows.Add(headerRow);
myTable.Rows.Add(row1);
myTable.Rows.Add(row2);
myTable.Rows.Add(row3);
//Page.Form.Controls.Add(myTable);
this.Controls.Add(myTable);
}
}
}
The JavaScript
function highlightRow(rowId) {
var rowColor = "#e0e4eb";
var highlightColor = "#ff9999";
var tableRow = document.getElementById(rowId);
tableRow.style.backgroundColor = highlightColor;
}
Generated HTML
<div id="mipMortgageIndex">
<table>
<tr class="header" onclick="deHighlightRows();">
<td colspan="2"><img src="/TestMortgageIndex/WebResource.axd?d=-uWUzU5EVdPMyVoLBCtrjmUerIZPBp7mWO0v4LnP1JjmTCTs6cv6ZvkHvcktm5310&t=634087507702353205" style="border-width:0px;" /><span>Mortage Indices</span></td>
</tr>
<tr id="mipMortgageIndex_row1" onclick="highlightRow('row1');">
<td>Cost of Savings Index</td>
<td><span>.345</span></td>
</tr>
<tr id="mipMortgageIndex_row2" onclick="highlightRow('row2');">
<td>Cost of Deposits Index</td>
<td><span>.234</span></td>
</tr>
<tr id="mipMortgageIndex_row3" onclick="highlightRow('row3');">
<td>12 Month Treasury Average</td>
<td><span>.123</span></td>
</tr>
</table>
</div>