More in this section

Forums / General Discussions / Debugging the control designer javascript

Debugging the control designer javascript

10 posts, 0 answered
  1. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    19 Jan 2011
    Link to this post
    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
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    19 Jan 2011
    Link to this post
    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
  3. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    19 Jan 2011
    Link to this post
    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
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    19 Jan 2011
    Link to this post
    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
  5. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    19 Jan 2011
    Link to this post
    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
  6. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    20 Jan 2011
    Link to this post
    Hi Ivan,

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

    Thanks
    higgsy
  7. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    20 Jan 2011
    Link to this post
    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
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    20 Jan 2011
    Link to this post
    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
  9. Pavliks
    Pavliks avatar
    68 posts
    Registered:
    06 Apr 2010
    04 Feb 2011
    Link to this post
    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
  10. Pavliks
    Pavliks avatar
    68 posts
    Registered:
    06 Apr 2010
    04 Feb 2011
    Link to this post
    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,
10 posts, 0 answered