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.
SIGN IN To post a reply.
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
SIGN IN To post a reply.
- 6 Replies
- 2 Participants
-
TG Tyeth Gundry
- Sep 22, 2016 12:35 PM UTC
- Oct 5, 2016 02:38 PM UTC
