RadControl in multi-view designed widgets
I am currently creating a widget that has a multiview control designer. I would like one of the editor views to contain a RadEditor, so I am using the HtmlField control in the view's template. I am running into complications while trying to instantiate the editor in the client component. Here are some excerpts from the relevant code files:
Control Designer:
public
class
MyControlDesigner : ContentViewDesignerBase
.
.
protected
override
void
AddViews(Dictionary<
string
, ControlDesignerView> views)
views.Add(
"MyControlDesignerView1"
,
new
MyControlDesignerView1());
views.Add(
"MyControlDesignerView2"
,
new
MyControlDesignerView2());
<%@ Control %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfFields" Namespace="Telerik.Sitefinity.Web.UI.Fields" %>
<
sitefinity:ResourceLinks
ID
=
"resourcesLinks"
runat
=
"server"
>
<
sitefinity:ResourceFile
Name
=
"Styles/Ajax.css"
/>
<
sitefinity:ResourceFile
Name
=
"Styles/jQuery/jquery.ui.core.css"
/>
<
sitefinity:ResourceFile
Name
=
"Styles/jQuery/jquery.ui.dialog.css"
/>
<
sitefinity:ResourceFile
Name
=
"Styles/jQuery/jquery.ui.theme.sitefinity.css"
/>
<
sitefinity:ResourceFile
Name
=
"Styles/WIndow.css"
/>
</
sitefinity:ResourceLinks
>
<
sitefinity:FormManager
ID
=
"formManager"
runat
=
"server"
/>
<
div
class
=
"sfContentViews sfSingleContentView"
style
=
"max-height: 400px; overflow: auto; "
>
<
ol
>
<
li
class
=
"sfFormCtrl"
>
<
asp:Label
ID
=
"Label1"
runat
=
"server"
AssociatedControlID
=
"contentEditor"
CssClass
=
"sfTxtLbl"
>Content</
asp:Label
>
<
sitefinity:HtmlField
ID
=
"contentEditor"
runat
=
"server"
CssClass
=
"sfTxt"
Height
=
"650px"
Width
=
"650px"
EditorContentFilters
=
"DefaultFilters"
/>
<
div
class
=
"sfExample"
></
div
>
</
li
>
</
ol
>
</
div
>
public
class
MyControlDesignerView1 : ContentViewDesignerView
.
.
protected
virtual
HtmlField contentEditor
get
return
Container.GetControl<HtmlField>(
"contentEditor"
,
false
);
.
.
public
override
IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()
var descriptor =
new
ScriptControlDescriptor(
this
.GetType().FullName,
this
.ClientID);
descriptor.AddComponentProperty(
"contentEditor"
,
this
.contentEditor.ClientID);
return
new
[] descriptor ;
Type.registerNamespace(
"Full.Namespace.MyControl"
);
Full.Namespace.MyControl.MyControlDesignerView1 =
function
(element)
Full.Namespace.MyControl.MyControlDesignerView1.initializeBase(
this
, [element]);
Full.Namespace.MyControl.MyControlDesignerView1.prototype =
initialize:
function
()
this
._contentEditor =
null
;
Full.Namespace.MyControl.MyControlDesignerView1.callBaseMethod(
this
,
'initialize'
);
,
dispose:
function
()
Full.Namespace.MyControl.MyControlDesignerView1.callBaseMethod(
this
,
'dispose'
);
,
refreshUI:
function
()
var
controlData =
this
.get_controlData();
this
.get_contentEditor().set_value(controlData.Content);
,
applyChanges:
function
()
var
controlData =
this
.get_controlData();
controlData.Content = get_contentEditor().get_value();
,
get_controlData:
function
()
return
this
.get_parentDesigner().get_propertyEditor().get_control();
,
get_parentDesigner:
function
()
return
this
._parentDesigner;
,
set_parentDesigner:
function
(value)
this
._parentDesigner = value;
,
get_contentEditor:
function
()
return
this
._contentEditor;
,
set_contentEditor:
function
(value)
this
._contentEditor = value;
Hi Matt,
was your problem resolved? I have the same problem with HtmlField.
Thanks, Milan.
Hello guys,
The code provided has several lines that prevent the designer from passing values to the widget. First off I would like to say that the component property is in place and everything is ok with the exception of the Designer.js. Please test the code below in order to resolve the issue:
Type.registerNamespace(
"SitefinityWebApp.Designer"
);
SitefinityWebApp.Designer.HTMLDesigner =
function
(element)
/* Initialize Message fields */
this
._message =
null
;
this
.contentEditor =
null
;
/* Calls the base constructor */
SitefinityWebApp.Designer.HTMLDesigner.initializeBase(
this
, [element]);
SitefinityWebApp.Designer.HTMLDesigner.prototype =
/* --------------------------------- set up and tear down --------------------------------- */
initialize:
function
()
/* Here you can attach to events or do other initialization */
SitefinityWebApp.Designer.HTMLDesigner.callBaseMethod(
this
,
'initialize'
);
,
dispose:
function
()
/* this is the place to unbind/dispose the event handlers created in the initialize method */
SitefinityWebApp.Designer.HTMLDesigner.callBaseMethod(
this
,
'dispose'
);
,
/* --------------------------------- public methods ---------------------------------- */
findElement:
function
(id)
var
result = jQuery(
this
.get_element()).find(
"#"
+ id).get(0);
return
result;
,
/* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
refreshUI:
function
()
var
controlData =
this
._propertyEditor.get_control();
/* JavaScript clone of your control - all the control properties will be properties of the controlData too */
this
._contentEditor.set_value();
this
.get_controlData().Name =
this
._contentEditor.get_value();
/* RefreshUI Message */
jQuery(
this
.get_message()).val(controlData.Message);
,
/* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */
applyChanges:
function
()
var
controlData =
this
._propertyEditor.get_control();
/* ApplyChanges Message */
controlData.Message = jQuery(
this
.get_message()).val();
this
.get_controlData().Name =
this
._contentEditor.get_value();
,
/* --------------------------------- event handlers ---------------------------------- */
/* --------------------------------- private methods --------------------------------- */
/* --------------------------------- properties -------------------------------------- */
/* Message properties */
get_message:
function
()
return
this
._message; ,
set_message:
function
(value)
this
._message = value; ,
get_contentEditor:
function
()
return
this
._contentEditor; ,
set_contentEditor:
function
(value)
this
._contentEditor = value;
SitefinityWebApp.Designer.HTMLDesigner.registerClass(
'SitefinityWebApp.Designer.HTMLDesigner'
, Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);