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

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

Posted in ASP.NET | Office | SharePoint at Tuesday, February 14, 2006 4:38 AM 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

Thursday, April 12, 2007 5:23:08 AM (W. Europe Daylight Time, UTC+02:00)
Is that possible you send me the example code for the "Accessing Controls in SharePoint Web Parts using JavaScript on the Client Side"?

Thanks in advance.
Pang Tat Sean
Thursday, April 12, 2007 8:51:27 PM (W. Europe Daylight Time, UTC+02:00)
Please send me an e-mail using the link under my picture to the right, then I can send you the source code.
Sunday, May 13, 2007 2:15:26 PM (W. Europe Daylight Time, UTC+02:00)
i need this source code for my project
Le Anh Tuan
Tuesday, August 07, 2007 10:11:06 PM (W. Europe Daylight Time, UTC+02:00)
Hi Alexander,

Can you please send me the sample code for this? I am working on a project where there is a similar requirement to filter the second dropdown based on selection in the first.

Thanks,
Ketan
Ketan
Wednesday, August 08, 2007 1:26:54 AM (W. Europe Daylight Time, UTC+02:00)
Ketan, where should I send the sources to? Please send me an e-mail, the link is right below my head at the top right of this page.
Wednesday, November 14, 2007 4:44:04 PM (W. Europe Standard Time, UTC+01:00)
can you please send me the code. i need to add client side scripting on meta field edit page. i have a document library and it has 4 meta deta fields. i need to add some client side scripting on it. i could not send you an email as i dont have an email client installed on my PC.
Thursday, February 21, 2008 6:17:46 AM (W. Europe Standard Time, UTC+01:00)
can you send me the sample code for "Accessing Controls in SharePoint Web Parts using JavaScript on the Client Side".i have a similar requirement in my project.

thanks in advance.
Rock
Tuesday, April 29, 2008 5:58:31 PM (W. Europe Daylight Time, UTC+02:00)
Thank you so much! You're a life saver! I've tried other methods at getting the proper client id before, but none were as simple and appropriate as this one. Thanks again!
Andrew
Wednesday, April 01, 2009 2:32:38 PM (W. Europe Daylight Time, UTC+02:00)
Hi,
can you send me the sample code for "Accessing Controls in SharePoint Web Parts using JavaScript on the Client Side".i have a similar requirement in my project.

thanks Sudhir
Sudhir
Thursday, July 09, 2009 11:24:23 PM (W. Europe Daylight Time, UTC+02:00)
What about when a custom User Control is used, where the user control is added to a web part. The "getElementById" method does not work in this situation either, nor does your example because the base.ClientID and detail.ClientID DNE.

Thanks.
Dave
Thursday, July 09, 2009 11:35:24 PM (W. Europe Daylight Time, UTC+02:00)
Dave,
theControl.ClientID?
Alex
Wednesday, July 29, 2009 10:29:53 PM (W. Europe Daylight Time, UTC+02:00)
Hi,

I have a project to create a custom search for a Library catalog with some dropdowns to 4 metadata columns . Is it possible to create a custom search on a page with out using visual studio. Also please send me the code.

Please point to the right resources to accomplish my task.

Ani
Wednesday, July 29, 2009 10:35:24 PM (W. Europe Daylight Time, UTC+02:00)
Hi,

can you send me the sample code for "Accessing Controls in SharePoint Web Parts using JavaScript on the Client Side". I have a project to develop custom search to a SP list with few metadata fields included in drop down fields to narrow the search.

Can you please point me to resources that helps to accomplish this task without using Visual Studio.

Thank you,
Ani
Wednesday, July 29, 2009 10:42:19 PM (W. Europe Daylight Time, UTC+02:00)
I haven't worked with SharePoint since the project mentioned above and am by no means a SharePoint expert. (And to be frank, I do not miss it!)

The download is right at the end of the post.
Sunday, January 10, 2010 11:50:28 AM (W. Europe Standard Time, UTC+01:00)
can you send me the sample code for "Accessing Controls in SharePoint Web Parts using JavaScript on the Client Side",

Thanks a lot
Biby
Biby
All comments require the approval of the site owner before being displayed.
(will show your gravatar icon)
 
[Captcha]Enter the code shown (prevents robots):

Live Comment Preview