Geeks With Blogs

News Disclaimer
The views expressed on this weblog are mine and do not necessarily reflect the views of my employer.

All postings are provided "AS IS" with no warranties, and confer no rights.



Jignesh Gangajaliya's blog on Software Architecture and Development

I was developing custom ASP.NET page for a SharePoint project, and the page uses SharePoint PeoplePicker control. I needed to manipulate the control on the client side based on the user inputs.

PeoplePicker Picker is a complex control and the difficult bit is that it contains many controls on the page (use the page source viewer to see the HTML tags generated).

So getting into the right bit is tricky and also the default JavaScript functions like, control.disabled; control.focus(); will not work with PeoplePicker control. After some trial and error I came up with the solution to manipulate the control using JavaScript.  Here I am posting the JavaScript code snippet to enable/disable the PeoplePicker Control:

function ToggleDisabledPeoplePicker(element, isDisabled)
{
    try
    {
        element.disabled = isDisabled;
    }
      
    catch(exception)
    {}
      
    if ((element.childNodes) && (element.childNodes.length > 0))
    {
        for (var index = 0; index < element.childNodes.length; index++)
        {
            ToggleDisabledPeoplePicker(element.childNodes[index], isDisabled);
        }
    }
}

//to disable the control
ToggleDisabledPeoplePicker(document.getElementById("<%=txtMRA.ClientID%>"), true);

The script shown below can be used to set focus back to the PeoplePicker control from custom JavaScript validation function:

var found = false;
       
function SetFocusToPeoplePicker(element)
{
    try
    {
        if (element.id.lastIndexOf("upLevelDiv") !=-1)
        {
            element.focus();
            found = true;
            return;
        }
    }
       
    catch(exception)
    {}
       
    if ((element.childNodes) && (element.childNodes.length > 0))
    {
        for (var index = 0; index < element.childNodes.length; index++)
        {
            if (found)
            {
                found = false;
                break;
            }
        
            SetFocusToPeoplePicker(element.childNodes[index]);
        }
    }
}

 - Jignesh

Posted on Thursday, March 11, 2010 5:36 PM ASP.NET , JavaScript , SharePoint | Back to top


Comments on this post: Using SharePoint PeoplePicker control in custom ASP.NET pages

# re: Using SharePoint PeoplePicker control in custom ASP.NET pages
Requesting Gravatar...
Great aricle!! i was exactly looking for this thing since last so many months. thnx again, keep up the good work :-)
Left by Darshan on Mar 11, 2010 6:55 PM

# re: Using SharePoint PeoplePicker control in custom ASP.NET pages
Requesting Gravatar...
Hi Jignesh, very nice article. I have a question for you. I am working on building custom claims provider people picker for SP 2010 and wanted to know if you can give me an idea on how much time I will need to actually complete the single signon custom claims provider and for people picker as I need to prepare an estimate document for my company.

Thanks
VS
Left by Vishwas S on Jun 08, 2010 11:26 PM

# Using SharePoint PeoplePicker control in custom ASP.NET pages using jquery
Requesting Gravatar...
Nice Article Jignesh,
I slightly modified the code to use jquery and it goes like this.
function SetFocusToPeoplePicker(peoplePickerDisplayName)
{
var peoplePickerId = $("div[id$=" + peoplePickerDisplayName + "_upLevelDiv]").attr("id");
document.getElementById(peoplePickerId).focus();
}

where peoplePickerDisplayName is the display name of people picker control user in the ascx/aspx page.
Thanks
Raghu
Left by Raghu on Jul 20, 2010 9:11 PM

# re: Using SharePoint PeoplePicker control in custom ASP.NET pages
Requesting Gravatar...
Hi I want to use PeopleEditor like control in my asp.net application.But I don't have sharepoint install .Any way to do or any other way to create such custom control in asp.net
Left by Fayaz on Oct 17, 2013 8:52 PM

Your comment:
 (will show your gravatar)


Copyright © Jignesh Gangajaliya | Powered by: GeeksWithBlogs.net