Control Designer - Sitefinity - Front- & Back-End Development

All Replies

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

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

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

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.

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

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.

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

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

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

@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

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

@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

This thread is closed