1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / WebEditors

WebEditors

11 posts, 0 answered
  1. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    17 Jan 2011
    Link to this post
    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
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    17 Jan 2011
    Link to this post
    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
  3. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    17 Jan 2011
    Link to this post
    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
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    17 Jan 2011
    Link to this post
    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
  5. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    18 Jan 2011
    Link to this post

    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

  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    18 Jan 2011
    Link to this post
    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
  7. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    18 Jan 2011
    Link to this post
    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

  8. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    18 Jan 2011
    Link to this post
    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

  9. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    18 Jan 2011
    Link to this post
    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
  10. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    18 Jan 2011
    Link to this post
    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
  11. Kalina
    Kalina avatar
    176 posts
    Registered:
    27 Oct 2016
    20 Jan 2011
    Link to this post
    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
11 posts, 0 answered