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.

unobtrusive clientside events

Thread ID:

Created:

Updated:

Platform:

Replies:

126084 Sep 22,2016 08:35 AM Oct 5,2016 10:38 AM JavaScript 6
loading
Tags: ejToggleButton
Tyeth Gundry
Asked On September 22, 2016 08:35 AM

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 01:06 PM

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 07:48 AM

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 08:03 AM

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 12:49 PM

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 11:10 AM

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 10:38 AM

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.

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.

;