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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





130957 Jun 13,2017 11:57 AM UTC Jun 19,2017 04:19 AM UTC JavaScript 5
Tags: ejDropDownList
Asked On June 13, 2017 11:57 AM UTC

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 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 

Replied On 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.

Berly Christopher [Syncfusion]
Replied On 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

Replied On June 16, 2017 08:32 AM UTC

That solves it! Thank you.

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

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


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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