Debugging the control designer javascript

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

Hi,

Are there any useful tips for debugging the control designer js? Almost always it doesnt throw an error, it just doesnt do what's I expect it to...for example, refreshUI and applyChanges simply do not execute, but no error is thrown. It's made especially hard because all scripts are combined, so I can't even find MY code in the combined js files to set a breakpoint in firebug......eeeeek, help!

Thanks
higgsy

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

Hi higgsy,

Under Script section of Fire Bug you can search under the entire javascrip code. Actually you can search withing all embedded scripts.

Regards,
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

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

Ivan,

I've found debugger; works ok in FireFox, but I am having serious problems getting control designers to work. One moment it works, the next it doesnt and I get spurious error messages like "e is undefined" or "this._propertyBinder is null" - it's almost like Sitefinity is caching something. The control designers now seem so so fragile - i've literally lost two days trying to get the simplest of examples working, with no idea what to do when something goes wrong because there is no documentation on this subject.

If I post my code, can you recompile and check it?

Thanks
higgsy

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

Hi higgsy,

Property grid lets users to change the properties of a control through the user interface. If you get null exception than there is some major problem with your script and the way that it is added. Something is wrong with its initialization. Errors of type "e is undefined" are thrown by MS AJAX.
If you want you can share your code with us.

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

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

Hi Ivan,

Ok - I cant attach the source code as a zip file (I could open a support ticket but then no-one else can see the resolution).

The main problem I believe is that I have never used the prototype (I believe its the prototype library) library before, and I really dont understand how it is communicating with the properties of the underlying class.

The errors I'm getting are both:

data is null (from within refreshUI)

or

this.get_propertyEditor() is null.

I'd appreciate some guideance on this.

My JS file is:

/// <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)

dotcentric.SitefinityControls.SiteNodeTreeDesigner.initializeBase(this, [element]);

// this._parentDesigner = null;

// this._propertyEditor = null;

// this._showPageSelectorDelegate = null;

// this._pageSelectedDelegate = null;

this._pageSelectButton = null;

this._pageSelector = null;

this._radWindowManager = null;

this._showPageSelectorDelegate = null;

this._pageSelectedDelegate = null;

dotcentric.SitefinityControls.SiteNodeTreeDesigner.prototype =

initialize: function ()

debugger;

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 ()

debugger;

dotcentric.SitefinityControls.SiteNodeTreeDesigner.callBaseMethod(this, 'dispose');

,

refreshUI: function ()

debugger;

var data = this.get_controlData();

jQuery('input[id$=TitleInput]').val(data.ControlTitle);

//jQuery('input[id$=PageIDInput]').val(data.PageID);

,

applyChanges: function ()

debugger;

var controlData = this.get_controlData();

//controlData.ControlTitle = jQuery('input[id$=TitleInput]').val();

//controlData.PageID = jQuery('input[id$=PageIDInput]').val();

,

_get_controlData: function ()

debugger;

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!');

,

// 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 = this.get_pageSelectButton().innerHTML.replace('Select', 'Change');

jQuery('input[id$=PageIDInput]').val(selectedItem.Id);

dialogBase.resizeToContent();

,

//this is an event handle for showing the radtree window

_showPageSelector: function ()

jQuery(this.get_element()).find('#selectorTag').show();

dialogBase.resizeToContent();

,

/* --------------------------------- 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;

,

//gets a reference to the radwindow manager

get_radWindowManager: function ()

return this._radWindowManager;

,

//sets the reference to the radwindow manager

set_radWindowManager: function (value)

if (this._radWindowManager != value)

this._radWindowManager = value;

dotcentric.SitefinityControls.SiteNodeTreeDesigner.registerClass('dotcentric.SitefinityControls.SiteNodeTreeDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

if (typeof (Sys) !== 'undefined')

Sys.Application.notifyScriptLoaded();

Thanks
higgsy

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

Hi Ivan,

Were you able to spot why I am receiving the javascript errors with the code I attached?

Thanks
higgsy

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

Hi Ivan,

I've sent you the source code as i guessed the js on its own wasnt very helpful. The only way I could do it was via a support ticket (386192) - once resolved I'll post the code so everyone in the forums can see.

Thanks
higgsy

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

Hi higgsy,

Ok will check the ticket and the class library you sent.

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

Posted by Community Admin on 04-Feb-2011 00:00

Hi,

Has this been resolved?

I am having the same issue but only with one of my control designers. I've been up and down the script 100 times and cannot tell the my scripts apart from each other except one works and the other does not.

Thanks,
Steve

Posted by Community Admin on 04-Feb-2011 00:00

I found the problem. Higgsy, I'm assuming you did the same as myself by downloading and using the example for adding a PageSelector to your designer well the problem is with the following code in the designer class library:

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 ;

Instead of using that use the following and it will work perfectly:

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());

var desc = (ScriptControlDescriptor)scriptDescriptors.Last();

desc.AddElementProperty("pageSelectButton", this.PageSelectButton.ClientID);

desc.AddComponentProperty("pageSelector", this.PageSelector.ClientID);

desc.AddComponentProperty("radWindowManager", this.RadWindowManager.ClientID);

return scriptDescriptors.ToArray();

Steve,

This thread is closed

All Replies