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

Forums / Sitefinity SDK / Control Designer

Control Designer

6 posts, 0 answered
  1. Shane
    Shane avatar
    8 posts
    Registered:
    28 Jan 2010
    19 Jan 2011
    Link to this post
    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.

    Regards,
    Shane 
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    19 Jan 2011
    Link to this post
    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.
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    19 Jan 2011
    Link to this post
    Initially it seems worse, but when you start using them, being able to leverage jQuery...it'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.
  4. Shane
    Shane avatar
    8 posts
    Registered:
    28 Jan 2010
    19 Jan 2011
    Link to this post
    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.

    Thanks,
    Shane
  5. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    20 Jan 2011
    Link to this post
    @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?

    Thanks
    higgsy
  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    20 Jan 2011
    Link to this post
    @higgsy

    Nope, the docs on it are pretty bad as far as explanations go so far...it'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');
     
            //SET VALUES GOING TO CLIENT
            var data = this.get_controlData(); //Object coming from the service
     
            //jQuery, or whatever you use to set the data back in the objects
            pagerSizeTextBox.set_value(data.PagerSize.toString());
            connectionStringComboBox.set_text(data.ConnectionString);
            skinComboBox.set_text(data.Skin);
            selectStatementTextBox.set_value(data.SelectStatement);
     
            $('#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');
     
            //SET VALUES GOING TO SERVER
            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
6 posts, 0 answered