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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

unobtrusive clientside events

Thread ID:

Created:

Updated:

Platform:

Replies:

126084 Sep 22,2016 12:35 PM UTC Oct 5,2016 02:38 PM UTC JavaScript 6
loading
Tags: ejToggleButton
Tyeth Gundry
Asked On September 22, 2016 12:35 PM UTC

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 [Syncfusion]
Replied On 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 


Tyeth Gundry
Replied On 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");
                                                        }
                                                    };

Tyeth Gundry
Replied On 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;


Francis Paul Antony Raj [Syncfusion]
Replied On 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 


Tyeth Gundry
Replied On 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

Francis Paul Antony Raj [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;