HTMLField Custom Designer View

Posted by Community Admin on 11-Feb-2012 00:00

Hi All,
I'm almost done with my custom View Designer... I'm using a HTMLField Editor as shown below:

<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="designers" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" %>

<div id="editView" class="sfContentBlocksDesignerWrp">

<sf:FormManager id="formManager" runat="server">

<sf:HtmlField

ID="webToLeadDisplay"

runat="server"

Width="99%"

Height="370px"

EditorContentFilters="DefaultFilters"

EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"

DisplayMode="Write"

FixCursorIssue="True">

</sf:HtmlField>

</sf:FormManager>

</div>

and javascript file for set/get

Type.registerNamespace("Premier.SalesForce.Designer");

// ------------------------------------------------------------------------

// Designer class for the like button control

// ------------------------------------------------------------------------

Premier.SalesForce.Designer.WebToLeadViewDesigner = function (element)

Premier.SalesForce.Designer.WebToLeadViewDesigner.initializeBase(this, [element]);

this._propertyEditor = null;

this._controlData = null;

this._webToLeadDisplayControl = null;

Premier.SalesForce.Designer.WebToLeadViewDesigner.prototype =

/* --------------------------------- set up and tear down --------------------------------- */

initialize: function ()

this.refreshUI();

Premier.SalesForce.Designer.WebToLeadViewDesigner.callBaseMethod(this, 'initialize');

,

dispose: function ()

Premier.SalesForce.Designer.WebToLeadViewDesigner.callBaseMethod(this, 'dispose');

,

/* --------------------------------- public methods --------------------------------- */

// refereshed the user interface. Call this method in case underlying control object

// has been changed somewhere else then through this desinger.

refreshUI: function ()

var controlData = this.get_controlData();

if (this.get_controlData().WebToLeadContent != null)

$find(this.get_webToLeadDisplayControl().id).get_editControl().set_html(this.get_controlData().WebToLeadContent);

,

// once the data has been modified, call this method to apply all the changes made

// by this designer on the underlying control object.

applyChanges: function ()

this.get_controlData().WebToLeadContent = $find(this.get_webToLeadDisplayControl().id).get_editControl().get_html();

,

// gets the javascript control object that is being designed

get_controlData: function ()

return this.get_propertyEditor().get_control();

,

// gets the reference to the propertyEditor control

get_propertyEditor: function ()

return this._propertyEditor;

,

// sets the reference fo the propertyEditor control

set_propertyEditor: function (value)

this._propertyEditor = value;

,

// gets the reference to the HTML Editor of the designer

get_webToLeadDisplayControl: function ()

return this._webToLeadDisplayControl;

,

// sets the reference to the HTML Editor of the designer

set_webToLeadDisplayControl: function (value)

this._webToLeadDisplayControl = value;

Premier.SalesForce.Designer.WebToLeadViewDesigner.registerClass('Premier.SalesForce.Designer.WebToLeadViewDesigner', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IControlDesigner);

The issue I'm facing right now is when javascript tries to set the HTML value from my custom control ( refreshUI: function()) to the Designer View control (HTMLField). It looks like, based on javascript debug, that editor control is null at the moment when refreshUI function is executed.

Comment: applyChanges function() works perfectly!
Any idea what could be wrong?

Thanks
Carlos.

Posted by Community Admin on 15-Feb-2012 00:00

Hi Carlos,

This seems like a strange behaviour. Have you tried to perform a null check for the HtmlField, as well here:

refreshUI: function ()

var controlData = this.get_controlData();

if (this.get_controlData().WebToLeadContent != null)

$find(this.get_webToLeadDisplayControl().id).get_editControl().set_html(this.get_controlData().WebToLeadContent);

,

Sometimes the javascript is executed twice (for different modes) and for one of them the field is not yet initialized, so you need to perform checks either for the mode or for a null value.

Kind regards,
Svetoslav Petsov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 16-Feb-2012 00:00

Hi Svetoslav,
Thanks for your reply, I found an issue on my designer html and within javascript. First at all, I noticed that I had the call for refreshUI method within the initialize method, and it must be call automatically by the core, so I removed it from my javascript, but then I noticed that refreshUI method wasn't executed at all during web designer initialization, so I reviewed multiples samples and I found a good one here and then I understood that FormManager tag shouldn't wrap the HtmlField control.

Now refreshUI method works as expected and HtmlField control is valid.

Thanks
Carlos.

Posted by Community Admin on 17-Feb-2012 00:00

Hello Carlos,

I'm glad that your issue was resolved. Let me know if you need further help with this.

Regards,
Svetoslav Petsov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed

All Replies