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

[Joakim]

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]

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]

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]

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]

That solves it! Thank you.

[Prince Oliver]

Hi Joakim, 

  

Thank you for your update. 

  

We are glad to help you. 

  

Regards, 

Prince