WebEditors

Posted by Community Admin on 17-Jan-2011 00:00

Hi Telerik,

I understand that WebEDitors, such as Page Selector etc have not been included in the official release. This is a problem for me. I realise there is a post on using the RadWindowManager etc, however I want a slightly different implementation.

If I have already created a Control Designer for the selectino of a page from a treeview, how do I then create a WebEditor that can be opened from a linkbutton and return the value into a textbox etc?

Thanks
higgsy

Posted by Community Admin on 17-Jan-2011 00:00

Hello higgsy,

Please take a look at this forum post. It has a sample which will help you achieve this.

Greetings,
Radoslav Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about 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 17-Jan-2011 00:00

Hi Radoslav,

This was the exact sample I was referring to. It was my understanding from reading it this was a workaround, not the official way of implementing a custom webeditor.

And that certainly doesnt show a way of creating a webeditor that can be used in multiple projects without copying and pasting. I can handle the fact that an essential part of 3.7 has been missed, but at least give us a decent solution for creating our own WebEditors that are re-usable.

Please advise.

Regards,
higgsy

Posted by Community Admin on 17-Jan-2011 00:00

Hello higgsy,

There are some built-in web editors that can be used as Rado shows in the code attached to the forum post.
In 4.0 the WebEditor should be added to the control designer and most of the code is executed on the client. Please check NewsRotator.RotatorDesigner.js .

For other cases you need a custom selector which is actually a widget and sample implementation is shown in the forum post.

Greetings,
Ivan Dimitrov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about 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 18-Jan-2011 00:00

Hi Ivan,

Thanks for your response. Perhaps I'm missing something here, I'd be interested to hear from other developers on here whether they understand how to create their own webeditor from the directions given on that post.

I know how to create a widget, I know how to create a control designer, but what I dont understand is how I can create a webeditor that I can drop into any control designer with a line of markup, I.e:

<myassembly:mywebeditor>

If I have to write the js in each control designer where I want to use the webeditor then the webeditor is no longer pluggable and can't be used in multiple projects.

I also can't see why it's not possible to open a control designer from a linkbutton, button etc? Webeditors themselves are so basic I don't really see a need for them.

Can you please expand on the solution in the post.

Regards,

Higgsy

Posted by Community Admin on 18-Jan-2011 00:00

Hi higgsy,

The WebEditor is a control, that mainly inherit from SimpleScriptView. The selector can be injected in each control where you want to have it. For instance you can create a control that inherits from ContentViewDesignerView and add AddComponentProperty to GetScriptDescriptors(). The web editor has its own script and template, so you can plug it in each custom control you have created.

All the best,
Ivan Dimitrov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about 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 18-Jan-2011 00:00

Hi,

After quite a bit of time, I have still to get the NwesRotator going. It is so much more difficult to get things working in Sitefinity 4.0. I have literally copied everything and it does not get resolved. It says could not resolve NewsRotator.Rotator.

I want to get the news rotator working so that I can then learn how to get my <asp:button and <iframe and the rest working.

Many thanks,
Andrei

Posted by Community Admin on 18-Jan-2011 00:00

Hi Ivan,

Ok, well I'm sure you will agree that some more detailed documentation is required on this subject. I have used Reflector to see the code for the PageSelector control, so I am getting somewhere, however I do have one last question.

It seems that WebEditors can no longer be implemented by simply entering the tag, i.e: <myassembly:mycontrol> because you also have to add server-side code i.e. GetScriptDescriptors to the Control Designer, and you have to add js to the control designers js file i.e. this._showPageSelectorDelegate = Function.createDelegate(this, this._showPageSelector);

Also, im trying to implement the pageSelector which is in the news rotator, and that just gives a js error:

b is undefined
var a = b.constructor

The news rotator example is much more detailed than just a WebEditor example because it also embedded with all the code for the news rotator itself. Can you not provide a bog standard example of using the pageSelector webeditor in a blank control designer - that would be most helpful to many people on these forums I'm sure.

Thanks
higgsy

Posted by Community Admin on 18-Jan-2011 00:00

Ivan,

For completeness I have included what I have implemented, which just doesnt work whatsoever: I have kept it all very simple:

My control designer template:

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

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

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

<%@ Register Assembly="dotcentric.SitefinityControls" TagPrefix="dotcentric" Namespace="dotcentric.SitefinityControls" %>

<telerik:RadWindowManager ID="windowManager" runat="server"

Height="100%"

Width="100%"

Behaviors="None"

Skin="Sitefinity"

ShowContentDuringLoad="false"

VisibleStatusBar="false">

<Windows>

<telerik:RadWindow ID="widgetEditorDialog" runat="server" Height="100" Width="100" ReloadOnShow="true" Behaviors="Close" Modal="true" />

</Windows>

</telerik:RadWindowManager>

<div id="selectorTag" style="display: none;" class="sfDesignerSelector">

<designers:PageSelector runat="server" id="selector" />

</div>

<div class="sfContentViews">

<h2>List</h2>

<p>Where do you want to stthe </p>

<ul class="sfTargetList">

<li>

<asp:Label AssociatedControlID="TitleInput" runat="server" />

<asp:TextBox ID="TitleInput" runat="server" class="sfTxtLbl" />

</li>

<li>

<asp:TextBox ID="PageIDInput" runat="server" />

<asp:LinkButton runat="server" ID="pageSelectButton" OnClientClick="return false;" CssClass="sfLinkBtnIn">Select Page</asp:LinkButton>

</li>

</ul>

</div>

My control designer code:

using System;

using System.Collections.Generic;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Sitefinity.Web.UI;

using Telerik.Sitefinity.Web.UI.ControlDesign;

using Telerik.Sitefinity.Web.UI.Fields;

using Telerik.Web.UI;

namespace dotcentric.SitefinityControls

public class SiteNodeTreeDesigner : ControlDesignerBase

protected override void InitializeControls(GenericContainer container)

this.DesignerMode = ControlDesignerModes.Simple;

this.AdvancedModeIsDefault = false;

protected override string LayoutTemplateName

get

return "dotcentric.SitefinityControls.Resources.templates.backend.SiteNodeTreeDesigner.ascx";

protected override Type ResourcesAssemblyInfo

get

return this.GetType();

protected override HtmlTextWriterTag TagKey

get

return HtmlTextWriterTag.Div;

public override IEnumerable<ScriptReference> GetScriptReferences()

var res = new List<ScriptReference>(base.GetScriptReferences());

var assemblyName = this.GetType().Assembly.GetName().ToString();

res.Add(new ScriptReference("dotcentric.SitefinityControls.Resources.js.SiteNodeTreeDesigner.js", assemblyName));

return res.ToArray();

/// <summary>

/// Gets a collection of script descriptors that represent ECMAScript (JavaScript) client components.

/// </summary>

/// <returns>

/// An <see cref="T:System.Collections.IEnumerable"/> collection of <see cref="T:System.Web.UI.ScriptDescriptor"/> objects.

/// </returns>

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

ScriptControlDescriptor desc = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);

Dictionary<string, string> fieldControlsMap = new Dictionary<string, string>();

foreach (FieldControl fieldControl in this.Container.GetControls<FieldControl>().Values)

fieldControlsMap.Add(fieldControl.DataFieldName, fieldControl.ClientID);

desc.AddElementProperty("pageSelectButton", this.PageSelectButton.ClientID);

desc.AddComponentProperty("pageSelector", this.PageSelector.ClientID);

desc.AddComponentProperty("radWindowManager", this.RadWindowManager.ClientID);

return new[] desc ;

#region Virtual_Controls

/// <summary>

/// Gets a reference to the page select button

/// </summary>

protected LinkButton PageSelectButton

get

return Container.GetControl<LinkButton>("pageSelectButton", true);

/// <summary>

/// Gets a reference to the page selector

/// </summary>

protected PageSelector PageSelector

get

return Container.GetControl<PageSelector>("selector", true);

/// <summary>

/// Gets the correct instance of the RadWindowManager class

/// </summary>

protected virtual RadWindowManager RadWindowManager

get

return this.Container.GetControl<RadWindowManager>("windowManager", true);

#endregion

My control designer js:

/// <reference name="MicrosoftAjax.js"/>

/// <reference name="Telerik.Sitefinity.Resources.Scripts.jquery-1.3.2.min-vsdoc2.js" assembly="Telerik.Sitefinity.Resources"/>

Type.registerNamespace("dotcentric.SitefinityControls");

dotcentric.SitefinityControls.SiteNodeTreeDesigner = function (element)

console.log('About to initialiseBase');

dotcentric.SitefinityControls.SiteNodeTreeDesigner.initializeBase(this, [element]);

console.log('initializeBase called');

this._parentDesigner = null;

this._propertyEditor = null;

this._pageSelectButton = null;

this._pageSelector = null;

this._radWindowManager = null;

this._showPageSelectorDelegate = null;

this._pageSelectedDelegate = null;

dotcentric.SitefinityControls.SiteNodeTreeDesigner.prototype =

initialize: function ()

dotcentric.SitefinityControls.SiteNodeTreeDesigner.callBaseMethod(this, 'initialize');

this._showPageSelectorDelegate = Function.createDelegate(this, this._showPageSelector);

$addHandler(this._pageSelectButton, "click", this._showPageSelectorDelegate);

this._pageSelectedDelegate = Function.createDelegate(this, this._pageSelected);

this._pageSelector.add_doneClientSelection(this._pageSelectedDelegate);

,

dispose: function ()

dotcentric.SitefinityControls.SiteNodeTreeDesigner.callBaseMethod(this, 'dispose');

,

refreshUI: function ()

var data = this.get_controlData();

,

applyChanges: function ()

var data = this.get_controlData();

,

get_controlData: function ()

var parent = this.get_parentDesigner();

if (parent)

var pe = parent.get_propertyEditor();

if (pe)

return pe.get_control();

alert('Control designer cannot find the control properties object!');

,

/* --------------------------------- event handlers --------------------------------- */

// this is an event handler for page selected event

_pageSelected: function (items)

jQuery(this.get_element()).find('#selectorTag').hide();

if (items == null)

return;

var selectedItem = this.get_pageSelector().get_selectedPage();

if (selectedItem != null)

this.get_pageSelectButton().innerHTML = 'Change page';

jQuery("#PageInput").val(selectedItem.Id);

dialogBase.resizeToContent();

,

_showPageSelector: function ()

jQuery(this.get_element()).find('#selectorTag').show();

dialogBase.resizeToContent();

,

/* --------------------------------- private methods --------------------------------- */

// shows the page selector

/* --------------------------------- properties --------------------------------- */

// gets the reference to the parent designer control

get_parentDesigner: function ()

return this._parentDesigner;

,

// sets the reference fo the parent designer control

set_parentDesigner: function (value)

this._parentDesigner = value;

,

// 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;

,

// get the reference to the button that opens page selector

get_pageSelectButton: function ()

return this._pageSelectButton;

,

// sets the reference to the button that opens page selector

set_pageSelectButton: function (value)

this._pageSelectButton = value;

,

// gets the reference to the page selector used to choose a page for showing the detail mode

get_pageSelector: function ()

return this._pageSelector;

,

// sets the reference to the page selector used to choose a page for showing the detail mode

set_pageSelector: function (value)

this._pageSelector = value;

,

get_radWindowManager: function ()

return this._radWindowManager;

,

set_radWindowManager: function (value)

if (this._radWindowManager != value)

this._radWindowManager = value;

dotcentric.SitefinityControls.SiteNodeTreeDesigner.registerClass('dotcentric.SitefinityControls.SiteNodeTreeDesigner', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

if (typeof (Sys) !== 'undefined')

Sys.Application.notifyScriptLoaded();

console.log('Loaded');

else

console.log('Sys undefined');

This code is taken directly from the news rotator example - you could literally pick my code up and create a class project and run it easily. It doesnt work, and its impossible from my end to tell why.....can you please show me where the bug in this code is??

Thank you
higgsy

Posted by Community Admin on 18-Jan-2011 00:00

Ivan,

I've got it working.

Could you please:
- Give us an idea when the official selectors will be released?
- If development has already started on them, give us an idea of how they will be implemented so I could make my own as close to those as possible.

thanks alot
higgsy

Posted by Community Admin on 20-Jan-2011 00:00

Hi higgsy,

This implementation has been logged (ID 105441).
We haven't planned the implementation yet but will review this feature in our next planning meeting.

Regards,
Kalina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about 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