using JavaScript, find the ClientID of .NET control nested deep within a master page

Question

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

I would think you set the 'clientID' property of the row, and then you should be able to refer it, no? — M.R.
– M.R., Commented Aug 21, 2011 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
– QMKevin, Commented Aug 23, 2011 at 14:20

theprogrammer · Accepted Answer · 2011-08-21 15:17:57Z

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.

answered Aug 21, 2011 at 15:17

theprogrammer

2,7341 gold badge19 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

QMKevin Over a year ago

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 Over a year ago

And, having found the appropriate getElementByClass() function here, I now have a working page without having to worry about Master Page, PlaceHolders and the like. Thanks!

Tys · Accepted Answer · 2011-08-21 15:44:01Z

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.

edited Aug 21, 2011 at 15:44

answered Aug 21, 2011 at 15:16

Tys

3,6009 gold badges56 silver badges72 bronze badges

4 Comments

QMKevin Over a year ago

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

Tys Over a year ago

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.

QMKevin Over a year ago

Arh, but for SharePoint I would be using 4.0, but SharePoint is 3.5 or lower :(

Tys Over a year ago

I guess then you are stuck with JavaScript document.getElementsByTagName('tr') and then loop.

Collectives™ on Stack Overflow

using JavaScript, find the ClientID of .NET control nested deep within a master page

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related