PeopleEditor in Bound Control

Having problems updating a dynamically created PeopleEditor control on postback when utilising it in a bound repeating control? The following solution might help you.

In the CreateChildControls method of your control create and add a HiddenField control at the same level as the PeopleEditor control you want to update:

peopleEditor = new PeopleEditor();
// Initialise your PeopleEditor
// ...
Controls.Add(peopleEditor);
 
_hiddenField = new HiddenField { ID = "_hiddenField" };
Controls.Add(_hiddenField);

and then in the ItemCommand event (for example) of your bound control, set the value of the HiddenField control to the value of the PeopleEditor:

_hiddenField.Value = peopleEditor.CommaSeparatedAccounts.Replace(",", "; ");

Here we replace the , with a ; as this is the separator used within the page DOM by the people editor.

You should also set the value of the hidden field to -1 after you’ve created it when it’s not a post back. We’ll use this value to determine if the PeopleEditor should have it’s value updated by the JavaScript function located at the end of this post.

if (Page.IsPostBack)
    _hiddenField.Value = "-1"

For the JavaScript (using JQuery) add the following:

$(document).ready(function () {
	$("[id$='_hiddenField']").each(function() {
		updatePeopleEditor($(this), 'peopleEditor');
	});
});
 
function updatePeopleEditor(sender, id) {
	var peopleEditor = sender.parents('td').eq(0).find("[id$='" + id + "']");
	var upLevelDiv = peopleEditor.find('textarea').prev();
	var checkNames = sender.parents('td').eq(0).find("[id$='" + id + "_checkNames']");
	var assignees = sender.val();
 
	if (assignees == undefined || assignees == null)
		assignees = '';
 
	if (assignees != "-1") {
                upLevelDiv.html(assignees);
		setTimeout(function () { checkNames.click(); }, 100);
        }
}

This script calls the updatePeopleEditor function for each hidden field ending with the given id (_hiddenField), which in turn updates the value of the people editor with the value within the hidden field – values separated with ;

The first thing this function does is locate the PeopleEditor control, which in this example is contained within the same table cell.

Next, it locates the upLevelDiv that contains a hidden textarea. The people editor control uses this to store its values.

After that, we find an anchor tag with an id that ends with _checkNames (part of the PeopleEditor markup). We’ll use this to validate the values loaded into the textarea element.

We now read the value of the hidden field and as long as the value is not -1 (which the control will have if the page hasn’t raised a post back), we update the upLevelDiv textarea and raise the click event of the anchor tag (checkNames) to validate the people editor control.