1

The short question: *takes deep breath*

How I can ClientID of TableRow inside Table added to PlaceHolder, which is in a UserControl inside a Web Part added to a SharePoint page using a MasterPage?

The explanation:
I'm building a usercontrol that dynamically shows SPList items, one per Web.UI.Table(). The 2nd row of the Table() will be hidden at first, with an image used to initiate some JavaScript to hide/show the row at the clients browser (rather than use postback or ajax - I have reasons).

The Table() is then added to a PlaceHolder in a UserControl, which is then used by a WebPart, and that WebPart is added to a SharePoint Page, which of course uses a MasterPage. I'm having real trouble working out the JavaScript method to find the ClientID of the TableRow, given that it's nested so deeply.

My .ascx code looks something like this..

<script type="text/javascript">
function showHidden(itemId) {
    var controlId = document.getElementById('<%= phDownloadTable.ClientID %>');
    //alert(controlId);
    document.getElementById(controlId).style.display = (document.getElementById(controlId).style.display == "table-row") ? "none" : "table-row";
}
</script>

<asp:PlaceHolder ID="phTable" runat="server"></asp:PlaceHolder>

and my .cs codebehind is something like this..

Table myTable = new Table();
TableRow hiddenRow = new TableRow();
hiddenRow.ID = "row" + itemId;
hiddenRow.Attributes.Add("style","display: none;");

... create TableCells and add to hiddenRow...

TableRow displayRow = new TableRow();
TableCell toggleCell = new TableCell();
Image toggleImage = new Image();
toggleImage.ImageUrl = "/images/myimage";
toggleImage.Attributes.Add("onclick","javascript:showHidden('" + hiddenRow.ClientID + "');
toggleCell.Controls.Add(toggleImage);
displayRow.Cells.Add(toggleCell);

... create more TableCells and add to displayRow

myTable.Rows.Add(displayRow);
myTable.Rows.Add(hiddenRow);

the result is that the toggleImage "onclick" attribute shows showHidden('row999');, which passes 'row999' to the JavaScript function, but I cannot figure out there how to get the full clientId of the TableRow it refers to.

The source of my page shows the clientId to be ctl00_SPWebPartManager1_g_eda9b9e9_4c7a_48e0_a2aa_fd8cdd65de6c_ctl00_row999, which is longer than I'm used to seeing, and seems to contain two 'ct100_' parts, suggesting multiple levels of controls.

Any ideas would be greatly appreciated. I've tried all the usual avenues (googleing for 'javascript .net control client id' and the like, but so far I've not found anything that helps. Most suggest document.getElementById('<%= myControl.ClientId %>')... which is fine, but I don't know 'myControl' - I need that send from the toggle image.

Fingers crossed!!

Kevin

QMKevin
  • 1,101
  • 3
  • 13
  • 26
  • I would think you set the 'clientID' property of the row, and then you should be able to refer it, no? – M.R. Aug 21 '11 at 15:12
  • ClientID is a read-only field, and cannot be set. I'd thought about that myself and found out the hard way :) – QMKevin Aug 23 '11 at 14:20

2 Answers2

2

If you cant set the client id, you should be able to set a class, and that should be respected by .nat.

Them you can select the element by class name.

theprogrammer
  • 2,724
  • 1
  • 18
  • 13
  • Now this is an interesting idea. I just tested adding `hiddenRow.CssClass = "row" + itemId;` and the web page source shows `class='row999'` which is great! now I just need to try out a few custom 'getElementByClassId' functions and I should be golden! I'll update as an answer if.. no, WHEN.. I get to work. Thanks for the idea. – QMKevin Aug 21 '11 at 15:31
  • And, having found the appropriate getElementByClass() function [here](http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/), I now have a working page without having to worry about Master Page, PlaceHolders and the like. Thanks! – QMKevin Aug 21 '11 at 15:48
0

JavaScript has no wildcard selection options. Try using jQuery, that makes things more flexible. Then you can use something like: 

$("tr[id*='<%= phDownloadTable.ClientID %>']").css("display", your value);

this way you will still find the right element, even when it's moved to another place on the page.

Here is a more detailed explanation on how to use these wildcard selectors: http://api.jquery.com/attribute-contains-selector/

With plain JavaScript you can do a document.getElementsByTagName('tr') and then loop those to find the right object.

If you are using Framework 4.0 you can set the ClientIdMode of the page like this: 

Page.ClientIDMode = System.Web.UI.ClientIDMode.Static;

That way you can have more predictable client ids. For example, you can have id's without all the ctl00_ prefixes.

Tys
  • 3,592
  • 9
  • 49
  • 71
  • unfortunately jQuery isn't an option at this point - I simply don't have the time to learn jQuery in order to do this, especially when this should be possible using JavaScript as it - it's just a matter of figuring out the right syntax. Thanks though – QMKevin Aug 21 '11 at 15:27
  • If you are using Framework 4.0 you can also use the ClientIdMode, to have more control over the ClientId that gets generated. I'll update my answer with that option. – Tys Aug 21 '11 at 15:34
  • Arh, but for SharePoint I would be using 4.0, but SharePoint is 3.5 or lower :( – QMKevin Aug 21 '11 at 15:36
  • I guess then you are stuck with JavaScript document.getElementsByTagName('tr') and then loop. – Tys Aug 21 '11 at 15:44