Contact

admin

About Me · Send mail to the author(s) E-mail · Twitter

At GROSSWEBER we practice what we preach. We offer trainings for modern software technologies like Behavior Driven Development, Clean Code and Git. Our staff is fluent in a variety of languages, including English.

Feed Icon

Tags

Open Source Projects

Archives

Blogs of friends

Now playing [?]

Error retrieving information from external service.
Audioscrobbler/Last.fm

ClustrMap

Previous Page Page 2 of 2 in the SharePoint category

Accessing Controls in SharePoint Web Parts using JavaScript on the Client Side

Posted in ASP.NET | Office | SharePoint at Tuesday, 14 February 2006 04:38 W. Europe Standard Time

A rather long title for this post, but that's what it comes down to.

SharePoint WebPartSuppose you want to access controls in the same Web Part on the client side using JavaScript. For instance, you have two DropDownLists placed on a Web Part and you want to fill the second one dynamically based on the selected value of the first DropDownList – a simple master/detail type of control. Postbacks are no option here since a selection change of the upper DropDownList shouldn't bother the server and delay business process by having the user to wait for the result. An Ajaxy approach may also be interesting, but out of the scope of this posting.

I've been struggling with some problems an couldn't find anything about this issue on the web, so I decided to post my findings.

Because it is possible to place a Web Part multiple times on a SharePoint web page, SharePoint Server will assign a unique identifier to each control (that is, a Web Part and some of its child controls¹) to be able to distinguish between Postbacks originating from different Web Parts. The unique ID can be found in the ID attribute of a HTML element and looks similar to this:

TopZone_g_d72e1f89_87e6_4f08_b6c5_165dc560ce8a__ctl1

TopZone defines the location of the Web Part, along with its GUID. The bold part (_ctl1) denotes the ID of the control in question, a SELECT in my case.

The JavaScript code to add an onchange event handler to the master control looks like this:

master.Attributes.Add("onchange",
    String.Format("setDetail(document.getElementById('{0}'));",
    detail.ClientID));

However, this will not work: The location and the GUID of the Web Part is evaluated when the page is rendered. These values then serve as a prefix to the control ID (_ctl1) you set in your own code. You have to retrieve the location/GUID prefix along with the control ID and combine them to the actual HTML ID. Because Web Parts should derive from Microsoft.SharePoint.WebPartPages.WebPart this is pretty easy to achieve.

// Combine the Web Part's ID and the control ID.
master.Attributes.Add("onchange",     String.Format("setDetail(document.getElementById('{0}_{1}'));",     base.ClientID,     detail.ClientID));

¹ Those with an ID or a NAME.

Now playing: Audiomatix - What a day

Previous Page Page 2 of 2 in the SharePoint category