Version

DialogContentID Property

Gets or sets the client-side id of the HTML element containing the content for the dialog.
Syntax
'Declaration
 
Public Property DialogContentID As String
public string DialogContentID {get; set;}

Property Value

A string representing the client-side id of the HTML element containing the content for the dialog.
Remarks

If this dialog is a predefined HtmlBoxDialog (which is the case for all HtmlBoxDialogs that are created within the component) this property references a hidden HTML element that contains the content for the dialog. Do not change this value for predefined dialogs, as the dialog will not work. If you are creating a custom dialog, it is recommended to use the HtmlBoxDialog.Text property instead of this property to supply the content for the dialog, although this property may be used.

Example
Examples to build toolbar buttons with custom dialogs and process their events.

'--------------------
' Note: custom buttons with all their properties can be created within aspx.
' That would reduce size of hidden viewstate field and improve persistance of properties.
' To generate toolbar items at visual design,- the editor for Toolbar property can be used.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
		If (Me.IsPostBack) Then
			Return
		End If
		'-------------------
		' Add a button with custom dialog which is defined in aspx.
		Dim myDialogButton As ToolbarDialogButton = New ToolbarDialogButton()
		myDialogButton.Key = "MyDialogButtonKey"
		myDialogButton.Type = ToolbarDialogButtonType.Custom
		Dim dialog As HtmlBoxDialog = myDialogButton.Dialog
		dialog.Caption = "This is my dialog"
		'-------------------
		' Note: the html element with id "MyDialogID" should exist within asxp.
		' Note: to connect dialog-content with its container, application
		' should process ClientSideEvents.Initialize.
		dialog.DialogContentID = "MyDialogID"
		dialog.Key = "MyDialogKey"
		dialog.TitlebarBackColor = System.Drawing.Color.Orange
		dialog.TitlebarFontSize = FontUnit.Point(12)
		Me.WebHtmlEditor1.Toolbar.Items.Add(myDialogButton)

		'-------------------
		' Add a button with custom dialog which is defined by the Dialog.Text property.
		Dim myDialogButton2 As ToolbarDialogButton = New ToolbarDialogButton()
		myDialogButton2.Key = "MyDialogButton2Key"
		myDialogButton2.Type = ToolbarDialogButtonType.Custom
		Dim dialog2 As HtmlBoxDialog = myDialogButton2.Dialog
		dialog2.Caption = "My Dialog 2"
		dialog2.Text = "Enter value:<input id='myDialog2Input' value='value from Dialog2' /><p></p><input type='button' onclick='myDialog2Click()' value='Click to insert text' /><script type='text/javascript'>function myDialog2Click(){iged_getById('WebHtmlEditor1').insertAtCaret(document.getElementById('myDialog2Input').value);}</script>"
		dialog2.Key = "MyDialog2Key"
		Me.WebHtmlEditor1.Toolbar.Items.Add(myDialogButton2)
End Sub




To connect DialogContentID with content of dialog (html elements in aspx), an application should process
<ClientSideEvents Initialize="WebHtmlEditor1_Initialize" /> event.
Codes below should appear within the HEAD section of HTML.

<script type="text/javascript"><!--
//----------------
// That function is called when WebHtmlEditor1 was initialized.
function WebHtmlEditor1_Initialize(oEditor)
{
	initializeMyDialog();
}

//----------------
// That function is called by WebHtmlEditor1_Initialize in order to
// initialize content of custom dialog, which is defined explicitly within aspx
var myDialogWasConnected = false;
function initializeMyDialog()
{
	if(myDialogWasConnected)
		return;
	myDialogWasConnected = true;
	//----------------
	// Find reference to html-element container for MyDialogID.
	// That value was set to ToolbarDialogButton.Dialog.DialogContentID
	var dialog = document.getElementById("MyDialogID");
	if(!dialog)
		return;
	//----------------
	// Find reference to html-element content for MyDialog.
	// The html element with that id was created within aspx.
	var content = document.getElementById("MyDialogContentID");
	//----------------
	// Remove MyDialogContentID from its temporary container (body of asxp-page)
	// and insert it into MyDialogID container, which is used by WebHtmlEditor.
	content.parentNode.removeChild(content);
	dialog.appendChild(content);
	//----------------
	// Undo initial hidden state.
	content.style.display = "";
	content.style.visibility = "visible";
}

//----------------
// That function is called by a button located in custom dialog MyDialogContentID.
// Build some object (here SPAN) and insert it into WebHtmlEditor at current selection.
function myDialogButtonClick2(message)
{
	var object = document.createElement("SPAN");
	var style = object.style;
	style.border = "2px solid red";
	style.background = "cyan";
	style.fontFamily = "verdana";
	style.fontStyle = "italic";
	style.fontSize = "10pt";
	style.padding = "5px";
	object.innerHTML = "This is SPAN with message '" + message + "' from MyDialog";
	//var oEditor = iged_getById("WebHtmlEditor1");
	//----------------
	// Close drop-down (dialog).
	iged_closePop();
	//----------------
	// Insert object (html element) into WebHtmlEditor at caret location.
	if(typeof iged_insNodeAtSel == "function")//Mozilla
		iged_insNodeAtSel(object);
	else//IE
		iged_insText(object.outerHTML);
}

//----------------
// That function is called by a button located in custom dialog MyDialogContentID.
// Build some text and insert it into WebHtmlEditor at current selection.
function myDialogButtonClick1(message)
{
	var field = document.getElementById("myDialogEditField");
	var text = field ? field.value : "Error: Can not find myDialogEditField.";
	text = "Message from dialog '" + message + "', where value of field='" + text + "'";
	//var oEditor = iged_getById("WebHtmlEditor1");
	//----------------
	// Close drop-down (dialog).
	iged_closePop();
	//----------------
	// Insert text into WebHtmlEditor at caret location.
	iged_insText(text);
}
// -->
</script>
//--------------------
	// Note: custom buttons with all their properties can be created within aspx.
	// That would reduce size of hidden viewstate field and improve persistance of properties.
	// To generate toolbar items at visual design,- the editor for Toolbar property can be used.
	protected void Page_Load(object sender, EventArgs e)
	{
		if(this.IsPostBack)
			return;
		//-------------------
		// Add a button with custom dialog which is defined in aspx
		ToolbarDialogButton myDialogButton = new ToolbarDialogButton();
		myDialogButton.Key = "MyDialogButtonKey";
		myDialogButton.Type = ToolbarDialogButtonType.Custom;
		HtmlBoxDialog dialog = myDialogButton.Dialog;
		dialog.Caption = "This is my dialog";
		//-------------------
		// Note: the html element with id "MyDialogID" should exist within asxp
		// Note: to connect dialog-content with its container, application
		// should process ClientSideEvents.Initialize.
		dialog.DialogContentID = "MyDialogID";
		dialog.Key = "MyDialogKey";
		dialog.TitlebarBackColor = System.Drawing.Color.Orange;
		dialog.TitlebarFontSize = FontUnit.Point(12);
		this.WebHtmlEditor1.Toolbar.Items.Add(myDialogButton);

		//-------------------
		// Add a button with custom dialog which is defined by the Dialog.Text property.
		ToolbarDialogButton myDialogButton2 = new ToolbarDialogButton();
		myDialogButton2.Key = "MyDialogButton2Key";
		myDialogButton2.Type = ToolbarDialogButtonType.Custom;
		HtmlBoxDialog dialog2 = myDialogButton2.Dialog;
		dialog2.Caption = "My Dialog 2";
		dialog2.Text = "Enter value:<input id='myDialog2Input' value='value from Dialog2' /><p></p><input type='button' onclick='myDialog2Click()' value='Click to insert text' /><script type='text/javascript'>function myDialog2Click(){iged_getById('WebHtmlEditor1').insertAtCaret(document.getElementById('myDialog2Input').value);}</script>";
		dialog2.Key = "MyDialog2Key";
		this.WebHtmlEditor1.Toolbar.Items.Add(myDialogButton2);
	}



To connect DialogContentID with content of dialog (html elements in aspx), an application should process
<ClientSideEvents Initialize="WebHtmlEditor1_Initialize" /> event.
Codes below should appear within the HEAD section of HTML.

<script type="text/javascript"><!--
//----------------
// That function is called when WebHtmlEditor1 was initialized.
function WebHtmlEditor1_Initialize(oEditor)
{
	initializeMyDialog();
}

//----------------
// That function is called by WebHtmlEditor1_Initialize in order to
// initialize content of custom dialog, which is defined explicitly within aspx
var myDialogWasConnected = false;
function initializeMyDialog()
{
	if(myDialogWasConnected)
		return;
	myDialogWasConnected = true;
	//----------------
	// Find reference to html-element container for MyDialogID.
	// That value was set to ToolbarDialogButton.Dialog.DialogContentID
	var dialog = document.getElementById("MyDialogID");
	if(!dialog)
		return;
	//----------------
	// Find reference to html-element content for MyDialog.
	// The html element with that id was created within aspx.
	var content = document.getElementById("MyDialogContentID");
	//----------------
	// Remove MyDialogContentID from its temporary container (body of asxp-page)
	// and insert it into MyDialogID container, which is used by WebHtmlEditor.
	content.parentNode.removeChild(content);
	dialog.appendChild(content);
	//----------------
	// Undo initial hidden state.
	content.style.display = "";
	content.style.visibility = "visible";
}

//----------------
// That function is called by a button located in custom dialog MyDialogContentID.
// Build some object (here SPAN) and insert it into WebHtmlEditor at current selection.
function myDialogButtonClick2(message)
{
	var object = document.createElement("SPAN");
	var style = object.style;
	style.border = "2px solid red";
	style.background = "cyan";
	style.fontFamily = "verdana";
	style.fontStyle = "italic";
	style.fontSize = "10pt";
	style.padding = "5px";
	object.innerHTML = "This is SPAN with message '" + message + "' from MyDialog";
	//var oEditor = iged_getById("WebHtmlEditor1");
	//----------------
	// Close drop-down (dialog).
	iged_closePop();
	//----------------
	// Insert object (html element) into WebHtmlEditor at caret location.
	if(typeof iged_insNodeAtSel == "function")//Mozilla
		iged_insNodeAtSel(object);
	else//IE
		iged_insText(object.outerHTML);
}

//----------------
// That function is called by a button located in custom dialog MyDialogContentID.
// Build some text and insert it into WebHtmlEditor at current selection.
function myDialogButtonClick1(message)
{
	var field = document.getElementById("myDialogEditField");
	var text = field ? field.value : "Error: Can not find myDialogEditField.";
	text = "Message from dialog '" + message + "', where value of field='" + text + "'";
	//var oEditor = iged_getById("WebHtmlEditor1");
	//----------------
	// Close drop-down (dialog).
	iged_closePop();
	//----------------
	// Insert text into WebHtmlEditor at caret location.
	iged_insText(text);
}
// -->
</script>
Requirements

Target Platforms: Windows 10, Windows 8.1, Windows 8, Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

See Also