Hi Yong,
Thanks for using Syncfusion products.
We can disable our controls on a Button click using two methods for that initially we have to render our EJ controls and bind click event to the Button control in the View page as shown in the below code snippet.
<code>
<div class="frame">
<div class="control">
@Html.EJ().DatePicker("DatePick").DateFormat("MM/dd/yyyy")
</div>
</div>
<div class="frame">
<div class="control">
@Html.EJ().NumericTextbox("numeric").Value("1000")
</div>
</div>
<div class="frame">
<div class="control">
@Html.EJ().DropDownList("selectCar").TargetID("carsList")
</div>
</div>
</div>
@Html.EJ().Button("btn").ClientSideEvents(e => e.Click("onClick")).Text("Click")
</code>
Following are the two methods to disable our controls.
1) We can disable by using “pointer-events” and adding e-disable class to the input control on Button click as shown in the following code snippet.
<code>
function onClick() {
$(".e-input").parent().addClass("e-disable").css("pointer-events", "none");
}
</code>
Limitation: This method doesn’t work in IE8 browser.
2) Second method is that we can disable our EJ controls using the public method “disable” as shown in the following code snippet.
<code>
function onClick() {
$("#DatePick").ejDatePicker("disable");
$("#numeric").ejNumericTextbox("disable");
$("#selectCar").ejDropDownList("disable");
}
</code>
For your convenience we have prepared the sample based on your requirement and the same can be downloaded from the following location.
http://www.syncfusion.com/uploads/user/forum/119553/ze/Disableall170871279
Kindly check with the sample and let us know if you have any other queries.
Regards,
Saranya.S
