Control Designer - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Control Designer

  • Control Designer
  • Hi

    I've been working with Sitefinity for a few years now and have a number of controls with control designers implemented, some of which I'm looking to port to v4. Now the controls themselves were easy to upgrade but what have you done with the control designer's? It now appears that everything has to be done client side using refreshUI and applyChanges functions. Quite of a few of my controls have quite complex control designers with server side code already written and I see this as a real issue that is gonna be time consuming not to mention the lack of intellisense and reduced debugging with javascript, I'd hardly call this productive development. Perhaps I've got the wrong end of the stick and maybe you'd shed some light on server side saving of control state.

  • Hi Shane,

    You can only bind the controls on the server, but you should use the client side API of the controls to get/set some data. There are not server side events/methods that you can use to persist control data.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Initially it seems worse, but when you start using them, being able to leverage's pretty awesome to work with.

    You could even create custom javascript objects, serialize them as a string propety, then deserialize on the control side.
  • I'm sorry to hear that, thanks for the detailed explanation. Initially it seems worse because it is worse. jQuery is good and easy to work with but that's beside the point and not the issue. This just further points out that little thought has been given in upgrading from 3.* to 4 and supporting developers that have existing controls and modules which can't be upgraded easily and will require a time consuming rewrite. 

    There should be server side support for persisting control data.

  • @Steve - Hi - did you find any resources for working with the control designer js? I like to think of myself as pretty good at JS but I am getting error after error trying to build a control designer...Im getting messages like this.get_propertyEditor() is null and as most of the js is built into sitefinity I can't even debug it - i dont even know where to start as there appears to be no documentation. Any ideas?

  • @higgsy

    Nope, the docs on it are pretty bad as far as explanations go so's pretty much just "paste this here".

    However I am on my 4th-ish designer with no issues (after I figured out the structure with help from a ticket)

    So you have the code to load the script in your Designer.cs
    public override IEnumerable<ScriptReference> GetScriptReferences()
                var res = new List<ScriptReference>(base.GetScriptReferences());
                var assemblyName = this.GetType().Assembly.GetName().ToString();
                res.Add(new ScriptReference("RandomSiteControls.SqlGrid.Resources.SqlGridDesigner.js", assemblyName));
                return res.ToArray();

    Then in your RandomSiteControls.SqlGrid.Resources.SqlGridDesigner.js just make it BASIC

    Nothing fancy...perhaps in your case just remove all the control references from here and code to set the properties.  Then start adding them back one by one.
    Type.registerNamespace("RandomSiteControls.SqlGrid"); //Namespace to the Designer class
    //Fully qualified path to the designer class is your object name
    RandomSiteControls.SqlGrid.SqlGridDesigner = function (element)
        RandomSiteControls.SqlGrid.SqlGridDesigner.initializeBase(this, [element]);
    RandomSiteControls.SqlGrid.SqlGridDesigner.prototype =
        initialize: function ()
            RandomSiteControls.SqlGrid.SqlGridDesigner.callBaseMethod(this, 'initialize');
        dispose: function ()
            RandomSiteControls.SqlGrid.SqlGridDesigner.callBaseMethod(this, 'dispose');
        refreshUI: function ()
            /* CONTROL REFERENCES */
            var connectionStringComboBox = $find('connectionStringComboBox');
            var selectStatementTextBox = $find('selectStatementTextBox');
            var skinComboBox = $find('skinComboBox');
            var pagerSizeTextBox = $find('pagerSizeTextBox');
            var data = this.get_controlData(); //Object coming from the service
            //jQuery, or whatever you use to set the data back in the objects
            $('#allowSortingCheckBox').attr('checked', data.AllowSorting);
            $('#allowPagingCheckBox').attr('checked', data.AllowPaging);
            $('#allowFilteringCheckBox').attr('checked', data.AllowFilteringByColumn);
            $('#allowGroupingCheckBox').attr('checked', data.AllowGrouping);
        applyChanges: function ()
            /* CONTROL REFERENCES */
            var connectionStringComboBox = $find('connectionStringComboBox');
            var selectStatementTextBox = $find('selectStatementTextBox');
            var skinComboBox = $find('skinComboBox');
            var pagerSizeTextBox = $find('pagerSizeTextBox');
            var controlData = this.get_controlData(); //This is the object to pass data
            //controlData property names should match those in your control .cs class (not the designer class)
            controlData.ConnectionString = connectionStringComboBox.get_text();
            controlData.SelectStatement = selectStatementTextBox.get_value();
            controlData.Skin = skinComboBox.get_text();
            controlData.PagerSize = pagerSizeTextBox.get_value();
            controlData.AllowSorting = $('#allowSortingCheckBox').is(':checked');
            controlData.AllowPaging = $('#allowPagingCheckBox').is(':checked');
            controlData.AllowFilteringByColumn = $('#allowFilteringCheckBox').is(':checked');
            controlData.AllowGrouping = $('#allowGroupingCheckBox').is(':checked');
    //Register the fully qualified designer class here
    RandomSiteControls.SqlGrid.SqlGridDesigner.registerClass('RandomSiteControls.SqlGrid.SqlGridDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    I'm probably doing it "wrong" in that I'm not using the init function at all, but whatever, until the docs are fleshed out, this works fine for me ;)

    I also haven't bothered with chaining functions onto the prototype object (new concept to me as well)....plain old js functions work fine in here, just add them at the bottom, then you can call them from inside applyChanges and refreshUI.

    Remove all your complex logic and just start from scratch with the js, perhaps putting in alerts to show the functions are loading