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.

How can I clear all controls in a window/popup/div?

Thread ID:

Created:

Updated:

Platform:

Replies:

130957 Jun 13,2017 07:57 AM Jun 19,2017 12:19 AM JavaScript 5
loading
Tags: ejDropDownList
Joakim
Asked On June 13, 2017 07:57 AM

Hi. On my site, I have a popup window for adding new records to the database. This popup (ejDialog) has a lot of controls, including several ejDatePickers and ejDropDownLists. Is there a way to clear all of them? The normal text and number input fields can be cleared with jQuery quite easily: $('#myPopup input').val(''). Unfortunately, this only makes syncfusion cointrols LOOK like they are cleared. The value is still there, which means that if I select an item from a drop down list when adding a record, run that jQuery to clear inputs, then add another record that same value will be selected in the drop down list, even though it looks empty. Clearing every single control one by one is very tedious, and a lot harder to maintain. So is there some kind of clear all function somewhere?

Prince Oliver [Syncfusion]
Replied On June 14, 2017 05:28 AM

Hi Joakim,   
  
Thank you for contacting Syncfusion support.   
  
We cannot clear both ejDropdownlist and ejDatepicker using a common property or method. But we can achieve your requirement for clearing both selected values in Datepicker and Dropdownlist using a button click. Kindly refer to the following code snippet.   

<script> 
    $("#btn").on("click", function () { 
        var ddl = $(".e-dropdownlist"); //gets the element of every dropdownlist 
        var dp = $(".e-datepicker"); //gets the element of every datepicker 
    //Setting selectedIndex to -1 for every dropdownlist control 
        for (i = 0; i < ddl.length; i++) {  
            $(ddl[i]).data("ejDropDownList").setModel({ selectedIndex: -1 }) 
        } 
    //Setting value to null for every datepicker control 
        for (i = 0; i < dp.length; i++) { 
            $(dp[i]).data("ejDatePicker").setModel({ value: null }) 
        } 
    }); 
</script> 

To clear value in dropdownlist, we need to set selectedIndex to -1 and for Datepicker, you can set value to null to clear the selected value.   
  
We have prepared a playground sample for your convenience, kindly refer to the following link for the sample: http://jsplayground.syncfusion.com/qwv4sy45 
  
Regards,   
Prince 


Joakim
Replied On June 14, 2017 06:46 AM

Thanks! That works. One small issue though: the drop-down in the DatePicker still shows the old value as selected after the value has been set to null. The value IS null though, so any value read from a datePicker not touched by the user will be null, which is adequate functionality for my purpose but it can be confusing.

Berly Christopher [Syncfusion]
Replied On June 15, 2017 12:14 PM

Hi,
Thanks for contacting Syncfusion support.
We have checked with your query. The DatePicker popup maintained the previously selected value even after clear the value from the input box. This is the default behavior of the DatePicker component. For your convenience, we have prepared the work around solution as per your requirement.
Please get the sample from the below location.
http://jsplayground.syncfusion.com/e4i54ytn

Regards,
Berly B.C


Joakim
Replied On June 16, 2017 04:32 AM

That solves it! Thank you.

Prince Oliver [Syncfusion]
Replied On June 19, 2017 12:19 AM

Hi Joakim, 
  
Thank you for your update. 
  
We are glad to help you. 
  
Regards, 
Prince 


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.

;