Dynamically-Loaded Table /w JavaScript

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:


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"));


    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));

      // 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");
      // title
      Label labTableTitle = new Label();
      labTableTitle.Text = "Mortage Indices";

      /*  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";
      // value
      HtmlTableCell row1cell2 = new HtmlTableCell();
      Label labCostOfSavingsIndex = new Label();
      //labCostOfSavingsIndex.Text = myMonthlyIndex.CostOfSavingsIndex;
      labCostOfSavingsIndex.Text = ".345";

      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";
      // value
      HtmlTableCell row2cell2 = new HtmlTableCell();
      Label labCostOfDepositsIndex = new Label();
      //labCostOfDepositsIndex.Text = myMonthlyIndex.CostOfDepositsIndex;
      labCostOfDepositsIndex.Text = ".234";

      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";
      // value
      HtmlTableCell row3cell2 = new HtmlTableCell();
      Label labTwelveMonthTreasureAverage = new Label();
      //      labTwelveMonthTreasureAverage.Text = myMonthlyIndex.TwelveMonthTreasuryAverage;
      labTwelveMonthTreasureAverage.Text = ".123";
      row3.Attributes.Add("onclick", "highlightRow('" + row3.ID + "');");




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">
		<tr class="header" onclick="deHighlightRows();">
			<td colspan="2"><img src="/TestMortgageIndex/WebResource.axd?d=-uWUzU5EVdPMyVoLBCtrjmUerIZPBp7mWO0v4LnP1JjmTCTs6cv6ZvkHvcktm5310&amp;t=634087507702353205" style="border-width:0px;" /><span>Mortage Indices</span></td>
		<tr id="mipMortgageIndex_row1" onclick="highlightRow('row1');">
			<td>Cost of Savings Index</td>
		<tr id="mipMortgageIndex_row2" onclick="highlightRow('row2');">
			<td>Cost of Deposits Index</td>
		<tr id="mipMortgageIndex_row3" onclick="highlightRow('row3');">
			<td>12 Month Treasury Average</td>



var tableRow = document.getElementById(“mipMortgageIndex_” + rowId);

can’t you use jquery?

$(‘#mipMortgageIndex tr’).click(function(){[COLOR=#66cc66]$/COLOR.css('backgroundColor’,#ff9999’);});

but instead of ‘#mipMortgageIndex tr’ it would be better to use a class to distingish rows from the “header” row.

but for your problem… first add the rows to the table then access ClientID

The problem is that by the time the code is generated the id is much larger than what my example code is showing, so accessing the ClientID is critical.

can’t you use jquery?

$(‘#mipMortgageIndex tr’).click(function(){$(this).css(‘backgroundColor’, ‘#ff9999’);});

but instead of ‘#mipMortgageIndex tr’ it would be better to use a class to distingish rows from the “header” row.

I’m developing for WSS so I really don’t have the ability to reference JavaScript libraries. At this point I’m limited to what custom JavaScript I can write and embedd into my class library.

but for your problem… first add the rows to the table then access ClientID

That seemed to do the trick. I actually had to wait until after I added the table itself to the page dynamically, then access its clientID, in order for it to be the correct reference.

myTable.Rows[1].Attributes.Add("onclick", "highlightRow('" + myTable.Rows[1].ClientID + "');");
myTable.Rows[2].Attributes.Add("onclick", "highlightRow('" + myTable.Rows[2].ClientID + "');");
myTable.Rows[3].Attributes.Add("onclick", "highlightRow('" + myTable.Rows[3].ClientID + "');");


“I’m developing for WSS so I really don’t have the ability to reference JavaScript libraries. At this point I’m limited to what custom JavaScript I can write and embedd into my class library.”

not even from a cdn?

It looks like it could be possible if I could download the library locally. I’m very new to WSS development (and have never used JQuery) so I’m still feeling my way around.

Have you tried passing the sender itself using ‘this’? That could work and simplify the requirement for ID’s etc.

If you still want to use the ID you should be using the ClientID property of the control instead of ID.

row3.Attributes.Add("onclick", "highlightRow('" + row3.ClientID + "');");

Ignore this. I’ve just read your post properly this time :-s I’m sure ClientID worked for me though.

I think you may have to add the control to the parent control before setting the JavaScript attribute. It’s adding it which generates the UniqueID.

So this:


is before:

row3.Attributes.Add("onclick", "highlightRow('" + row3.ID + "');");