We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

unobtrusive clientside events

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.

6 Replies

FP Francis Paul Antony Raj Syncfusion Team September 25, 2016 05:06 PM UTC

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. 
 
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 



TG Tyeth Gundry September 27, 2016 11:48 AM UTC

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");
                                                        }
                                                    };


TG Tyeth Gundry September 27, 2016 12:03 PM UTC

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;



FP Francis Paul Antony Raj Syncfusion Team September 28, 2016 04:49 PM UTC

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.  
 
Please let us know if you need further assistance on this. 
 
Regards, 
Francis Paul A 



TG Tyeth Gundry October 4, 2016 03:10 PM UTC

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


FP Francis Paul Antony Raj Syncfusion Team October 5, 2016 02:38 PM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon