unobtrusive clientside events

[Tyeth Gundry]

I wish to declare events unobtrusively on some ejToggleButtons... I was assuming with the correct data-attributes it should work fine, but my attempts all fail to trigger accordingly.

    @Html.CheckBoxFor(m => m, new
{
    data_role = "ejtogglebutton",
    data_ej_value = Model,
    data_ej_activetext = "ON",
    data_ej_defaulttext = "OFF"
       ,
    data_ej_contenttype = ("textandimage"),
    data_ej_defaultprefixicon = ("e-close label-danger e-btn-text"),
    data_ej_activeprefixicon = ("e-checkmark label-success"),
    data_ej_clientsideonclick=("ejdisabletoggle"),
    data_ej_clientsideonchange = ("ejdisabletoggle"),
    data_ej_clientsideonchecked = ("ejdisabletoggle"),
    data_ej_clientsideonunchecked = ("ejdisabletoggle"),
    onChange= "disablereenable('" + Html.IdFor(x => x) + "');",
    onLoad = "console.log('" + Html.IdFor(x => x) + "');"
})

The function disablerenable just takes an ID, the ejdisabletoggle takes (inst, arg) as suggested in docs.

Please help.

[Francis Paul Antony Raj]

Hi Tyeth, 

 

Thanks for contacting Syncfusion support. 

 

We have analyzed your requirement. You can use ‘data_role’ attribute in unobtrusive mode to define the ToggleButton control and its properties/events. Please refer the code example below, 

 

@Html.CheckBoxFor(m => m.model1, new 

{ 

    data_role = "ejtogglebutton", 

    data_ej_activetext = "ON", 

    data_ej_defaulttext = "OFF", 

    data_ej_contenttype = ("textandimage"), 

    data_ej_defaultprefixicon = ("e-icon e-close label-danger"), 

    data_ej_activeprefixicon = ("e-icon e-checkmark label-success"), 

    data_ej_click = ("onClick"), 

    data_ej_change = ("onChange"), 

    data_ej_create = ("onCreate"), 

}) 

<script> 

    function onClick(arg) { // onClick takes (arg) as a parameter 

        console.log("Click event triggered"); 

    } 

    function onChange(arg) { 

        console.log("Change event triggered"); 

    } 

    function onCreate(arg) { 

        console.log("ToggleButton Created"); 

    } 

</script> 

 

 

For your convenience, we have attached the sample in the below location. 

http://www.syncfusion.com/downloads/support/forum/126084/TOGGLE~1-2007310603.7Z 

 

Query: the ejdisabletoggle takes (inst, arg) 

For ToggleButton events and its arguments, please refer to, https://help.syncfusion.com/js/api/ejtogglebutton#events 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Francis Paul A 

[Tyeth Gundry]

Thanks for your update.

The events now fire.

The related issue is I wish to disable or re-enable all controls with a similar id, attempting to use the following, but it fails to find the method enable.

var ejdisabletoggle = function(args) {

                                                   

                                                        console.log("toggledisable");

                                                        disablereenable(this,args);

                                                    }

                                                    window.ejdisabletoggle = window.ejdisabletoggle || ejdisabletoggle;

                                                    var disablereenable = function(args,otherargs){

                                                        var ele = args.element[0];

                                                        var value = ele.id.split("__")[0];

                                                        

                                                        var bele = $('input[type="text"][id^="' + value + '"]');

                                                        bele.each(function(index,ele){

                                                            console.log(ele.id)

                                                            var b = $(ele).data(ele.attributes["data-role"]);

                                                            b.enable();

                                                        });

                                                        //var old  = $('#'+id).valueOf();

                                                        //$('#'+id).val(!old);

                                                        //if($('#'+id).checked) {

                                                        if(otherargs.isChecked){

                                                            console.log("checked");

                                                        }else{

                                                            console.log("unchecked");

                                                        }

                                                    };

[Tyeth Gundry]

Thought I had it solved, but still struggling.

So far I've found:

Forgot to check my variables.

Also my ej reference failed, needed to reference it with .data("ejsometypehere","instance")

Turns out the attribute needs to be accessed in the nested property value to populate ejsometypehere.

but it's still failing.

                                                    var ejdisabletoggle = function(args) {
                                                        // inst - instance of button object.
                                                        // args :    args._currentItem   - clickeded button
                                                        //          args._id            - button id
                                                        console.log("toggledisable");
                                                        disablereenable(this,args);
                                                    }
                                                    window.ejdisabletoggle = window.ejdisabletoggle || ejdisabletoggle;
                                                    var disablereenable = function(args,otherargs){
                                                        var tele = args.element[0];
                                                        var value = tele.id.split("__")[0];
                                                        
                                                        var bele = $('input[type="text"][id^="' + value + '"]');
                                                        bele.each(function(index,ele){
                                                            console.log(ele.id);
                                                            var ejtype= ele.attributes["data-role"].value;
                                                            var b = $(ele).data(ejtype,"instance");
                                                        if(otherargs.isChecked){
                                                            console.log("checked");
                                                            b.enable();
                                                        }else{
                                                            console.log("unchecked");
                                                            b.disable();
                                                        }
                                                        });
                                                        //var old  = $('#'+id).valueOf();
                                                        //$('#'+id).val(!old);
                                                        //if($('#'+id).checked) {
                                                    };
                                                    window.disablereenable = window.disablereenable || disablereenable;

[Francis Paul Antony Raj]

Hi Tyeth, 

 

We have checked your code example. You can achieve your requirement “Disable/Enable the Syncfusion input controls in the page when ToggleButton click event triggers” by creating proper instance of the control to be disabled on click event. We have modified your code example. Please refer it below. 

 

var ejtype = ele.attributes["data-role"].value; 

$.each(ej.widget.registeredWidgets, function (key, value) { // check data-role name with plugin name 

   if (ej.widget.registeredWidgets[key].name.toLowerCase() == ejtype) ejtype = ej.widget.registeredWidgets[key].name; 

}); 

var b = $("#" + ele.id).data(ejtype); // object/instance creation for the control 

if (otherargs.isChecked) b.enable(); 

else b.disable(); 

 

For your convenience, we have attached the sample in the below location.  

http://www.syncfusion.com/downloads/support/forum/126084/7z/ToggleButton_Unobtrusive1-1063342092 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Francis Paul A 

[Tyeth Gundry]

Thanks,

ended up having to check 

 if( lowercasetype.endsWith("button") ) return;

inside the each function to avoid disabling the toggle button while disabling all similarly named other controls

[Francis Paul Antony Raj]

Hi Tyeth, 

 

We are glad to hear that you have achieved your requirement. 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Francis Paul A