How to add event handler to widget designer?

Posted by Community Admin on 04-Aug-2018 09:32

How to add event handler to widget designer?

All Replies

Posted by Community Admin on 18-May-2016 00:00

Hey guys, i know it's a silly question because i'm new with sitefinity. So let's say i have a JS file like this.



SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner = function (element)
    /* Initialize fields */
    this._randomCarrousel = null;
    this._manualCarrousel = null;
    this._formationCheckList = null;

    /* Calls the base constructor */
    SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.initializeBase(this, [element]);

SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.prototype =
    /* --------------------------------- set up and tear down --------------------------------- */
    initialize: function ()
        /* Here you can attach to events or do other initialization */
        SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.callBaseMethod(this, 'initialize');
    dispose: function ()
        /* this is the place to unbind/dispose the event handlers created in the initialize method */
        SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.callBaseMethod(this, 'dispose');

    /* --------------------------------- public methods ---------------------------------- */

    findElement: function (id)
        var result = jQuery(this.get_element()).find("#" + id).get(0);
        return result;

    /* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
    refreshUI: function ()
        var controlData = this._propertyEditor.get_control(); /* JavaScript clone of your control - all the control properties will be properties of the controlData too */

        if (controlData.IsManualCarrousel)
            jQuery('#' + this.get_manualCarrousel()).prop('checked', true);
            //  set manual
            jQuery('#' + this.get_randomCarrousel()).prop('checked', true);

        var chkList = document.getElementById(this.get_formationCheckList());
        var checkbox = chkList.getElementsByTagName("input");
        var label = chkList.getElementsByTagName("label");

        var str = controlData.Formations;
        var array = new Array();

        if (str)
            array = str.split(',');

        for (var i = 0; i < array.length; i++)
            if (label[i].innerHTML == array[i])
                jQuery(checkbox[i]).prop('checked', true);
                jQuery(checkbox[i]).prop('checked', false);

    /* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */
    applyChanges: function ()
        var controlData = this._propertyEditor.get_control();

        /* radio button */
        var rad = this.get_randomCarrousel();

        if ($('#' + rad).prop('checked'))
            controlData.IsManualCarrousel = false;
            controlData.IsManualCarrousel = true;
            /* check box list */
            // get selected items
            var array = "";
            if (controlData.IsManualCarrousel == true)
                var chkList = document.getElementById(this.get_formationCheckList());
                var checkbox = chkList.getElementsByTagName("input");
                var label = chkList.getElementsByTagName("label");

                var checkCounter = 0;
                for (var i = 0; i < checkbox.length; i++)
                    if (checkbox[i].checked)
                        if (i == (checkbox.length - 1))
                            array += label[i].innerHTML;
                            array += label[i].innerHTML + ",";

            if (checkCounter < 8)
                alert("Un minimum de 8 formations doit être sélectionné dans la liste");

            controlData.Formations = array;

    /* --------------------------------- event handlers ---------------------------------- */

    /* --------------------------------- private methods --------------------------------- */

    /* --------------------------------- properties -------------------------------------- */

    get_randomCarrousel: function () return this._randomCarrousel; ,
    set_randomCarrousel: function (value) this._randomCarrousel = value; ,

    get_manualCarrousel: function () return this._manualCarrousel; ,
    set_manualCarrousel: function (value) this._manualCarrousel = value; ,

    get_formationCheckList: function () return this._formationCheckList; ,
    set_formationCheckList: function (value) this._formationCheckList = value;

SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner.registerClass('SitefinityWebApp.Web.Widgets.Carrousel.Designer.CarrouselDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);



Could you guys give me a sample pattern to add event handlers to my JS file? For example, i want to have a click event handler on my _randomCarrousel control.



Posted by Community Admin on 23-May-2016 00:00

Hello Nghi,

You can use Sitefinity Thunder to generate a designer for a widget and inspect the implementation. To do so:
- Add webuser control to your project
- Add Guid property and build the solution
- Add new Item - Desiner for existing widget:
- Create selectors for that Guid property (e.g. Image selector)

You can check the generated  .js file implementation

Svetoslav Manchev

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 27-May-2016 00:00

Hey Nghi, looking at that old WebForms code makes me feel ill these days.


Do yourself a giant favour and develop only in Feather/MVC:


Your designer will run Angular code and be just a joy to work with instead of a nightmare.


This thread is closed