Custom Control Designer for Usercontrol - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Custom Control Designer for Usercontrol

  • Custom Control Designer for Usercontrol
  • Is it possible to use a control designer with a user control in Sitefinity 4?  I only see examples of control designers used with custom controls.  (I realize that the control designer itself must be a custom control).
  • Hi Jeff,

    You need a custom control. Here is a tutorial that you can use.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • I was able to follow that tutorial to create a control designer for a custom control, however I am interested in knowing if there is a way to create a control designer for a user control, as I have done in the past with Sitefinity 3.7.  The control designer, providing the user friendly configuration would a custom control, but the actual widget would be a user control widget.
  • Hi Jeff Dease,

    This can be done in 4.0 as well. You just need to decorate your user control class with the ControlDesigner attribute.

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • 242697_Controls.zip
    Hi Jeff Dease,

    I have attached dummy classes to get you started on the control. You need to add the content of the archive in the root of the SitefinityWebApp project. Set the .ascx file and .js file of the control designer to be built as embedded resource and add the bellow line in the AssemblyInfo.cs file in Properties folder:
    [assembly: WebResource("SitefinityWebApp.Controls.UserControlDesigner.js","text/javascript")]

    Finally build the project and add the control to your toolbox just as you would register a user control.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Hi Radoslav,

    How do i make the two fiels you as embedded resources in the sitefinity web project? I dont have the Assembly.cs file for the web project unlike a class library. Do I have to create one at root level?

    Thanks,
    Duneel
  • Hi Radoslav,

    I'm following along in this example using the controls.zip file and also looking at the Creating a Custom Control Designer tutorial from your documentation, and I'm running into a javascript error.  Even with one field, implementing either:

    var data = this._propertyEditor().get_control();
    in the refreshUI area of the prototype,

    or

    var controlData = this._propertyEditor().get_control();
    in the applyChanges area of the prototype

    is giving me an "Error:function expected" at each of those two lines.  Any idea what might be causing that?  It happens regardless of whether I try the controls.zip example or follow the example in the tutorial with a custom control.  Always that error.

    Thanks

    - William
  • Hi Jeff,

    Can you post the entire js code, the code of the control designer and the code of your custom control.


    All the best,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Hi Radoslav,

    I have implemented a custom designer containing ContentBlock for a user control. When I tried to access the edit properties of the control i'm getting an error in the XXXXDesigner.js file. It seems the _contentBlockControl is null and both refreshUI and applyChanges functions fails. My Control Desiger code placed in a folder named "CertifiedAgents" under the class library called "ControlDesigners". That's whay the namespace is "ControlDesigners.CertifiedAgents".  Please see the code below.... I'm stuck at this point as I dont know why ._contentBlockControlTop is null in the .js file.

    Designer.cs
    public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var desc = (ScriptControlDescriptor)scriptDescriptors.Last();
                var contentBlockControlTop = this.ContentBlockTop;
                desc.AddComponentProperty("contentBlockControlTop", contentBlockControlTop.ClientID);
                return scriptDescriptors.ToArray();
            
      
            protected virtual ContentBlock ContentBlockTop
            
                get
                
                    return this.Container.GetControl<ContentBlock>("ContentBlock1", true);
                
            

    Designer.js
    Type.registerNamespace("ControlDesigners.CertifiedAgents");
      
    ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner = function (element)
      
        // element
        this._contentBlockControlTop = null;
        ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.initializeBase(this, [element]);
      
      
    ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.prototype =
      
        initialize: function ()
            ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.callBaseMethod(this, 'initialize');
      
        ,
      
        dispose: function ()
            ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.callBaseMethod(this, 'dispose');
      
        ,
      
        get_contentBlockControlTop: function ()
            return this._contentBlockControlTop;
        ,
        set_contentBlockControlTop: function (value)
            this._contentBlockControlTop = value;
        ,
      
        /* ----------------------------- public methods ----------------------------- */
      
        //refreshes the UI overrides the base interface
      
        refreshUI: function ()
            this._refreshMode = true;
            var data = this.get_controlData();
            this.get_contentBlockControlTop().set_html(data.ContentTop)
        ,
      
        // forces the designer to apply the changes on UI to the cotnrol Data buth
        applyChanges: function ()
            var data = this.get_controlData();
            data.ContentTop = this.get_contentBlockControlTop().get_html();
        
      
      
    ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.registerClass('ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
      
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    Template.ascx
    <%@ Control Language="C#"%>
    <%@ Register Assembly="Telerik.Sitefinity.Modules.GenericContent.Web.UI" Namespace="Telerik.Sitefinity.Modules.GenericContent.Web.UI" TagPrefix="telerik" %>
    <strong>Content Top:</strong>
    <telerik:ContentBlock runat="server" ID="ContentBlock1"></telerik:ContentBlock>


    Thanks,
    Duneel


  • 243156_RadEditor-Control-Designer-Errors.jpg
    Hi Radoslav,

    Here's what I did.... I replaced the ContentBlock with RadEditor in the designer.cs and in template.ascx and the same javascript code works perfectly fine. And looks like the above null issue is happenning when it has ContentBlock instead of a RadEditor. Do I have to change the implementation of the .js file and the designer.cs file if it is having a ContentBlock?

    When I have the RedEditor in place, when I go to the edit pannel of my widget I'm getting series of errors (attached) and when I hit OK and continue it brings up the edit dialog with the RadEditor and I can save my content successfully. This happens ONLY in the first time when I go to edit properties of the newly placed widget. Any idea why??

    Thanks,
    Duneel
  • Hello Duneel,

    The problem you are experiencing is because the ContentBlock control used is the whole control, not only its designer. You can try the approach similar to the one in this forum thread. You can use the same markup as the one used in the custom designer of the content block sampled in this thread.

    Greetings,
    Radoslav Georgiev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Hi Radoslav,

    I changed my custom control designer to use the ContentBlock as explained in the other blog post you sent me. however now i have problems reading the entered content. I've posted a question in the same post about this. Appriciate if you too can input some ideas.

    Thanks!
    Duneel
  • Hi Jeff,

    OK, we will check the other post and keep the discussion there.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Hi William:

    I did not see an answer to your post, but I also had this same problem. There is a bug in the sample documentation.

    The statement
        var data = this._propertyEditor().get_control();
    should read:
        var data = this._propertyEditor.get_control();
     
    _propertyEditor is a field, not a method.