DropDown selectItemByValue issues

[Milos]

Hi, 

I have dropdown in multiple selection mode.

I have two questions:

1) When I tried to select values from my appliacation on this way (for example):

              var ddl = $('#dropDownId').data("ejDropDownList");

              ddl.selectItemByValue(["value1", "value2", "value3"].join());

change event in dropdown is triggered 3 times:

            1. time args.model.value   is    value1

            2. time args.model.value   is    value1, value2

            3. time args.model.value   is    value1, value2, value3

I need only last triger, when dropdown finish selection. On that event I do a lot of things and it makes me a lot of problem, because for multiple selection drop down triggers event for every value separately.

Is there any way (or to put some condition in code) how I can catch only last event when drop down finishes selection ?

 

2) Also when I tried to select some value from code:

               var ddl = $('#dropDownId').data("ejDropDownList");

              ddl.selectItemByValue(["value1", "value2", "value3"].join());

If drop down does not contain some of values I tried to select, it just continue working and ignore values do not exist.

Is there any way to catch/find out which values drop down did not select because they does not exists ?

Regards,

Milos

[Prince Oliver]

Hi Milos,    

Thanks for using Syncfusion products. 

Query 1: Is there any way (or to put some condition in code) how I can catch only last event when drop down finishes selection ? 

 

The Dropdownlist will trigger change event for every value change. So you need to manually override the default behavior. We have prepared a custom sample by overriding selectItemByValue and onValueChange methods. 

 

Refer to the following link for the sample: 

http://jsplayground.syncfusion.com/vhtrleen 

 

Query 2: Is there any way to catch/find out which values drop down did not select because they does not exists ? 

 

The dropdown will ignore the values if it is not present in data list. This is the default behavior of the control. To catch the values you need to manually verify the values passed to the selectItemByValue method against datasource before sending. 

 

Regards, 

Prince

[Milos]

Hi Prince,

Thank you for your update.

I tried your code, but this conditions:

         if(this._drpdwnselected == this._drpdwnselection||this._drpdwnselectable==this._drpdwnselected||e.isInteraction)

         }

seems does not work in all situation.

When I select item with method:

                 var ddl = $('#dropDownId").data("ejDropDownList");

                ddl.selectItemByValue([value1, value2, value3].join());

Conditions above are true always. Part  'isInteraction' as far as I understand should be true only when user click on the dropdown. 

In current case it is true when I select item with selectItemByValue from code, and always return true condition which is not ok.

Regards,

Milos

[Prince Oliver]

Hi Milos,    

  

In the previous update, we had provided a workaround for your 1^st query by overriding the internal functions to trigger change event for last value selection alone. It is not a recommended way, because it will cause changes in control’s default behavior.    

   

Query: Conditions above are true always. Part  'isInteraction' as far as I understand should be true only when user click on the dropdown.    

In current case it is true when I select item with selectItemByValue from code, and always return true condition which is not ok.   

  

“IsInteraction” as you know will be true only when user clicks the dropdownlist.    

if(this._drpdwnselected ==this._drpdwnselection||this._drpdwnselectable==this._drpdwnselected||e.isInteraction)   

                             alert("change");   

      }   

  

  

In the above condition, isInteraction will be true only when dropdown list items are clicked. So when you select using selectItemByValue method, it will remain false. Since it is a multiple ‘OR’ statement, it will execute only if any one of the given conditions is true. In our case, when selecting the last element, the flag variables will match and condition gets true.   

  

Please let us know if you require any further assistance.    

  

Regards,   

Prince   

[Milos]

Hi Prince,

I have multiple dropdown in durandal widget, and every time before I select value I update DataSource first.

DropDown looks like:

self.dropDownMultiple = {

            DataSource: ko.observableArray ([])

            fields: someFields,

            allowMultiSelection: true,

            multiSelectMode "visualMode"

        }

I update data source and select value like this:

         self.dropDownMultiple.dataSource (data);

         var ddI  = $ ( '# dropDownMultipleId'). data ( "ejDropDownList");

         ddl.selectItemByValue (self.dataObject.relationValue ());

I checked in source code of "ej.dropdownlist", and every time when I update data source on this way: self.dropDownMultiple.dataSource (data)

via knockout binding, source code method "_removeTextBoxValue" is called and this method sets: this._uiInteract = true.

Because of this, your example did not work in may case, It always passes condition.

Now when I tried different way to set data source like:

$ ( '#' + Self.dropDownMultipleId) .ejDropDownList ( "option", "DataSource", data);

It works, method "_removeTextBoxValue" is not called and everything works fine.

Is it ok to set the DataSource on this way?

Is it wrong like I did via knockout binding?

What "option" parameter in setting DataSource (above) mean, I saw example, I am not sure is it neccessary?

regards,

Milos

[Prince Oliver]

Hi Milos,   

  

Thanks for you update.   

  

Query 1: Is it ok to set the DataSource on this way? Is it wrong like I did via knockout binding?   

  

Yes, we can bind datasource in this way. We have supported knockout binding in our dropdownlist. Refer to the following online Demo sample link:   

http://js.syncfusion.com/demos/web/#!/bootstrap/dropdownlist/knockoutsupport   

  

Query 2: What "option" parameter in setting DataSource (above) mean, I saw example, I am not sure is it neccessary?   

  

Option is a common base function for all our controls. We can set values for properties through this public method. Its arguments are property name and value.    

So in your snippet “$ ( '#' + Self.dropDownMultipleId) .ejDropDownList ( "option", "DataSource", data);” the arguments are (<Public Method>, <Property Name>, <Property Value>)   

  

Regards,   

Prince   

[Milos]

Hi Prince,

I still do not know why changing DataSource by knockout change this._uiInteract = true in method "_removeTextBoxValue", and changing the DataSource by jquery do not.
But anyway my problem is solved, thank you very much for your support.

Regards,
Milos

[Prince Oliver]

Hi Milos, 

  

Most welcome. We are glad to help you. 

  

Regards, 

Prince