Disable (Read-only) for sharepoint 2010 People Picker (PeopleEditor)

Using the SharePoint 2010 People Picker (People Editor) user control in your custom visual web part is very powerful tool (which by the way makes you web part looks nice "JUST KIDDING IT IS SHIT" ) .

Any way .... you may be depressed and forced by the business needs to use this shit control, also by business needs you may want to disable this control programmatically to and use it only for display "Read Only". What we have learned in the ASP.NET is that any web control should have the property "Enabled" which if you ever set it to false the control is not enabled "LOGIC" , but hell no , The people picker do not offer you the easy way.
So lets have the following scenario, You want to auto fill this control in the page load with a specific user then disable it.

Assuming you have the following people editor control on your page or web part

 <SharePoint:PeopleEditor ID="PeoplePickerOwner" runat="server" Width="350" SelectionSet="User" MultiSelect="false" AllowEmpty="true" ValidationGroup="AdvancedSearchVld" />  

To auto fill and disable this control use the following method

   1:  private void SetOwnerUser()

   2:          {

   3:              if (CurrentUser != null)

   4:              {

   5:                  PeoplePickerOwner.Entities.Clear();

   6:                  PickerEntity UserEntity = new PickerEntity();

   7:                  UserEntity.DisplayText = CurrentUser.Name;

   8:                  UserEntity.Key = CurrentUser.LoginName;

   9:                  PeoplePickerOwner.Entities.Add(PeoplePickerOwner.ValidateEntity(UserEntity));

  10:                  PeoplePickerOwner.ShowButtons = false;

  11:                  PeoplePickerOwner.AllowTypeIn = false;

  12:              }

  13:          }

UPDATE: Danial Martins asked "I select the name press backspace it deletes it. Is there a workaround?", Thanks to Hoshang Akeryi, Below is the solution:

1
2
3
4
5
6
7
8
9
ppl.ShowButtons = false;
ppl.AllowTypeIn = false;
than add the script to your page:
<script type="text/javascript">    
   $(document).ready(function () 
   {
        $(this).find("div[Title='People Picker']").attr("contentEditable",false);
   }
</script>

Reset-Set-validate-Resolve Sharepoint people picker By javascript

SharePoint 2010 people picker is a very useful control to be used on your custom forms or custom visual webparts to select people within your corporate .

Some of the clients requirements would specify to preload  this field with some values by default as the current logged in user , ok what about doing this in the client side , Now everyone is going towards the client side operations , we do not want to exhaust the server those operations.

People picker could be handled by javascript methods:

To Reset  the people picker value you could use:

   1:  function ResetPP() {

   2:          var identifier = '<%= PeoplePicker.ClientID%>';

   3:          var value = '';

   4:          var tags = document.getElementsByTagName('DIV');

   5:   

   6:          for (var i = 0; i < tags.length; i++) {

   7:              var tempString = tags[i].id;

   8:              if ((tempString.startsWith(identifier)) && (tempString.indexOf('_upLevelDiv') > 0)) {

   9:                  tags[i].innerHTML = value;

  10:                  break;

  11:              }

  12:          }

  13:      }

To Set the People Picker with a certain value:
to use it something like :

   1:  SetPP('<%=PeoplePicker.ClientID%>', 'sps\administrator');

The Method:

   1:  function SetPP(identifier ,value) {

   2:   

   3:          var tags = document.getElementsByTagName('DIV');

   4:   

   5:          for (var i = 0; i < tags.length; i++) {

   6:              var tempString = tags[i].id;

   7:              if ((tempString.startsWith(identifier)) && (tempString.indexOf('_upLevelDiv') > 0)) {

   8:                  tags[i].innerHTML = value;

   9:                  break;

  10:              }

  11:          }

  12:      }

Find if the People Picker is resolved:

   1:  function IsPeoplePickerValueResolved() {

   2:          var eEntityData = $("div[id='divEntityData']");

   3:          if (eEntityData.length > 0) {

   4:              var isResolved = eEntityData.attr("isresolved");

   5:              return (isResolved == "True");

   6:          }

   7:          return false;

   8:      }

Validate the People Picker:

   1:  function ValidateOwner(PeoplePickerOwner, PeoplePickerContextName) {

   2:          if (!ValidatePickerControl(PeoplePickerOwner.id)) {

   3:              ShowValidationError();

   4:              return false;

   5:          }

   6:          var arg = getUplevel(PeoplePickerOwner.id);

   7:          var ctx = PeoplePickerOwner.id;

   8:          EntityEditorSetWaitCursor(ctx);

   9:          WebForm_DoCallback(PeoplePickerContextName, arg, EntityEditorHandleCheckNameResult, ctx, EntityEditorHandleCheckNameError, true);

  10:          return false;

  11:      }

To use this method you can use the following:

   1:  var PeoplePickerOwner = document.getElementById('<%= PeoplePicker.ClientID %>');

   2:  var PeoplePickerOwnerHiddenSpanData = document.getElementById('<%= PeoplePickerOwner.ClientID + "_hiddenSpanData"%>');

   3:  var PeoplePickerContextName = $("#" + PeoplePickerOwnerHiddenSpanData.id).attr("name").replace("$hiddenSpanData", "");

   4:   

   5:  ValidateOwner(PeoplePickerOwner, PeoplePickerContextName);

To call the "Click" the check names button:

   1:  function ClickCheckName() {

   2:          document.getElementById('<%=PeoplePicker.ClientID%>' + "_checkNames").click();

   3:      }