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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Disable all Syncfusion controls on a page.

Thread ID:

Created:

Updated:

Platform:

Replies:

119553 Jul 8,2015 08:04 AM UTC Aug 27,2015 04:08 AM UTC ASP.NET MVC 3
loading
Tags: DropDownList
SK Yong
Asked On July 8, 2015 08:04 AM UTC

Hi Guys,


  I would like to know if I have a few datepicker, dropdownlist, numeric text box on a page, I want to be able to disable all control to disallow input by user. Is there anywhere that i can have a jquery statement to call a generic api that can disable all the control regardless of their control types?


Thanks

Regards

SK Yong
 

Saranya Sivakumar [Syncfusion]
Replied On July 9, 2015 12:19 PM UTC

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


SK Yong
Replied On August 26, 2015 02:46 PM UTC

Hi Saranya,

 It works. Thanks for the sample.

Regards

SK Yong

Sasikala Nagarajan [Syncfusion]
Replied On August 27, 2015 04:08 AM UTC

Hi Yong.
Thanks for the update,
please let us know if you have further queries,We will be happy to help you out
Regards,
Sasikala Nagarajan

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

;