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. Image for the cookie policy date
close icon

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

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?

5 Replies

PO Prince Oliver Syncfusion Team June 14, 2017 09:28 AM UTC

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.   

    $("#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 }) 

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 

JO Joakim June 14, 2017 10:46 AM UTC

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.

BC Berly Christopher Syncfusion Team June 15, 2017 04:14 PM UTC

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.

Berly B.C

JO Joakim June 16, 2017 08:32 AM UTC

That solves it! Thank you.

PO Prince Oliver Syncfusion Team June 19, 2017 04:19 AM UTC

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

Live Chat Icon For mobile
Up arrow icon