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.

DropDown single selection mode deselect value

Thread ID:

Created:

Updated:

Platform:

Replies:

127558 Nov 23,2016 04:18 AM Nov 28,2016 03:42 AM JavaScript 5
loading
Tags: ejDropDownList
Milos
Asked On November 23, 2016 04:18 AM


I have ejDropDownList which dynamically get datasource. After value selection ones, I do not know how to deselect value.
Is there any way to deselect value in control, or I need to add some empty object in my datasource on the beginning which will simulate empty value/deselection.

For example, multiple selection mode has 'x'  on the right side of every selected value, is there anything similar in single selection mode ?

Prince Oliver [Syncfusion]
Replied On November 24, 2016 06:03 AM

Hi Milos,   
  
Thanks for contacting Syncfusion Support.   
  
Query 1: Is there any way to deselect value in control, or I need to add some empty object in my datasource on the beginning which will simulate empty value/deselection.   
  
In order to deselect a selected item in single selection dropdownlist, you can set the selectedIndex to -1. You can make use of the header template to add a header text to unselect item on click event. Have a look at the following code snippet.   
  
$('#dropdown1').ejDropDownList({   
                     dataSource: skillset,   
                fields: { text: "skill" },   
                headerTemplate: "<div class='temp' id='unselect' >Unselect Item</div>"   
            });   
             
           $("#unselect").on("click"function() {   
                var obj = $("#dropdown1").data("ejDropDownList");   
              obj.setModel({ selectedIndex : -1 });   
            });   
  
  
Please refer to the Playground sample: http://jsplayground.syncfusion.com/hooqecal   
  
Query 2: For example, multiple selection mode has 'x'  on the right side of every selected value, is there anything similar in single selection mode?   
  
The Close icon ‘x‘ at the right side for selected value is exclusive for multiple selection mode and it is not available for single selection mode.   
  
Regards,   
Prince  


Milos
Replied On November 24, 2016 09:53 AM

Hi Prince,

Thank you for your answer.

It works also with 
obj.selectItemsByIndices("-1"); 
or  
obj.selectItemByValue(null); 
insteads of 
obj.setModel({ selectedIndex : -1 }); 

It is a bit more job for some simple functionality. I think it should be feature like all others, (for example readonly: true/false), this feature can be: useDeselectValue: true/false.
In other way when I deselect value, in this way, dropdown does not trigger event "change". I have a lot of work connected with this event. 


Regards,
Milos

Prince Oliver [Syncfusion]
Replied On November 25, 2016 07:00 AM

Hi Milos,      
  
Thanks for your update.   
  
Query 1: It is a bit more job for some simple functionality. I think it should be feature like all others, (for example readonly: true/false), this feature can be: useDeselectValue: true/false.   
  
Thank you for your interest. We will consider it in one of our future updates.   
  
Query 2: In other way when I deselect value, in this way, dropdown does not trigger event "change". I have a lot of work connected with this event.   
  
After you have deselected the value, you can trigger the change event. Have a look at the following code snippet.   
  
$("#unselect").on("click"function() {   
                var obj = $("#dropdown1").data("ejDropDownList");   
              obj.setModel({ selectedIndex : -1 });   
              obj._trigger("change",obj);   
            });   
  
  
Please refer to the following playground sample:   
   
Regards,   
Prince  


Milos
Replied On November 25, 2016 07:11 AM

Hi Prince,

Thank you for your support.
Problem is solved :).

Have a nice day,
Milos

Prince Oliver [Syncfusion]
Replied On November 28, 2016 03:42 AM

Hi Milos,   
  
Most welcome.  
  
We are glad to hear that issue has been fixed.  
Please let us know if you need further assistance on this.   
  
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.

;