Custom Widget Designer - Add a Sitefinity HtmlField (or RadTextEditor)
Can anyone point me to a working example of having the HtmlField implemented on a Custom widget.
I have my HtmlField on the ascx file, the references in the cs but I am unsure how to implement the js.
Can any one help?
<sfFields:HtmlField ID="Description" runat="server" DisplayMode="Write" EditorToolsConfiguration="Forums" HtmlFieldEditModes="Design" EditorContentFilters="DefaultFilters,RemoveScripts" EditorStripFormattingOptions="AllExceptNewLines" Height="200" Width="750" IsToOverrideDialogs="false"></sfFields:HtmlField>protected virtual HtmlField Description get return this.Container.GetControl<HtmlField>("Description", true); public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors() var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors()); var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last(); descriptor.AddElementProperty("title", this.Title.ClientID); descriptor.AddComponentProperty("description", this.Description.ClientID); return scriptDescriptors; Hi Darrin,
The code you posted looks fine to me. Below is the section in the javascript that I use for an HTMLField in a custom widget designer (my control is called "ParagraphText" so you should replace that by "Description"):
/* 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 */ /* RefreshUI ParagraphText */ /* set_value expects a string, so if ParagraphText is empty, an empty string should be provided. */ var htmlText = controlData.ParagraphText ? controlData.ParagraphText : ""; $find(this.get_paragraphText().id).set_value(htmlText); , /* 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(); /* Get the RadEditor inside the HtmlField through get_editControl(), then get its content. */ var htmlText = $find(this.get_paragraphText().id).get_editControl().get_html(); controlData.ParagraphText = htmlText; , /* ----- properties ----- */ /* ParagraphText properties */ get_paragraphText: function () return this._paragraphText; , set_paragraphText: function (value) this._paragraphText = value; Thanks very much for that info Arno
I am getting a ".get_editControl is not a function" error message from the Refresh UI function.
Is there something else in the script that I need???
Sorry it was "set_value() is not a function.
Below is my js
Type.registerNamespace("Pdr.Widgets.Pages");Pdr.Widgets.Pages.ContentDesigner = function (element) /* Initialize Title fields */ this._title = null; /* Initialize Description fields */ this._description = null; /* Calls the base constructor */ Pdr.Widgets.Pages.ContentDesigner.initializeBase(this, [element]);Pdr.Widgets.Pages.ContentDesigner.prototype = /* --------------------------------- set up and tear down --------------------------------- */ initialize: function () /* Here you can attach to events or do other initialization */ Pdr.Widgets.Pages.ContentDesigner.callBaseMethod(this, 'initialize'); , dispose: function () /* this is the place to unbind/dispose the event handlers created in the initialize method */ Pdr.Widgets.Pages.ContentDesigner.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 */ /* RefreshUI Title */ jQuery(this.get_title()).val(controlData.Title); /* RefreshUI Description */ var htmlText = controlData.Description ? controlData.Description : ""; jQuery(this.get_description().id).set_value(htmlText); , /* 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 Title */ controlData.Title = jQuery(this.get_title()).val(); /* ApplyChanges Description */ var htmlText = jQuery(this.get_description().id).get_editControl().get_html(); controlData.Description = htmlText; , /* --------------------------------- event handlers ---------------------------------- */ /* --------------------------------- private methods --------------------------------- */ /* --------------------------------- properties -------------------------------------- */ /* Title properties */ get_title: function () return this._title; , set_title: function (value) this._title = value; , /* Description properties */ get_description: function () return this._description; , set_description: function (value) this._description = value; Pdr.Widgets.Pages.ContentDesigner.registerClass('Pdr.Widgets.Pages.ContentDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);Hi Darrin,
In case of "set_value() is not a function" it seems that either the get_description function or the jQuery in refreshUI does not return the right object. You could try if debugging the script reveals what object it actually gets. It's weird, all looks fine to me at first glance. I was just wondering if "description" is a reserved word in field controls somehow and if it would help to rename it. If nothing else helps you could try that.
Hey,
Just in case if you have not found a solution or for other user's, here's the solution:
STEP 1:
Change line 2 of code from
/* RefreshUI Description */var htmlText = controlData.Description ? controlData.Description : "";jQuery(this.get_description().id).set_value(htmlText);/* RefreshUI Description */var htmlText = controlData.Description ? controlData.Description : "";this.get_description().set_value(htmlText);/* ApplyChanges Description */var htmlText = jQuery(this.get_description().id).get_editControl().get_html();controlData.Description = htmlText;/* ApplyChanges Description */var htmlText = this.get_description().get_value();controlData.Description = htmlText;Thanks Abhilash
No I didn't have the answer. I opened a support ticket and left it there.
I will let them know that you sorted it!
Good work.
I am glad the solution works for you.
Happy Coding!
Hi,
Thank you for sharing solutions with the community.
Regards,
Stefani Tacheva
Telerik
I'm having this same issue. I have all my code in place but I don't know where _description is defined. Where is it defined and what is its value? When I call get_description() I get a null value back. Thanks.
Gina - If you look at my post further up you will see it set up at the top of the designer js file as
/* Initialize Description fields */
this._description = null;
Sorry - Gina, I meant my post. I was still logged on as the wrong person.
Hi all,
Can someone just answer the following question for me please?
What control is used in order to display the content saved from the HtmlField on the template?