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

DropDownList witrh Checkboxes: Howto get checked state of all items in angular2

Thread ID:

Created:

Updated:

Platform:

Replies:

131127 Jun 22,2017 12:59 PM UTC Jun 26,2017 05:35 AM UTC Angular 3
loading
Tags: ejDropDownList
Holger Erne
Asked On June 22, 2017 12:59 PM UTC

Hi,

I read quite a few times through the documentation and also checked the samples - I did not find any way to get the checked state of the list items. Also changing the check-state seems not to get reflected in the model...
If I understand correctly, the checkboxes should behave as "selected" - so a checked item would mean that the item is also selected...

Here is what I did:

<!-- HTML -->
<li><input id="dropdown1" ej-dropdownlist [dataSource]="filter" [fields]="filtersvalues" [showCheckbox]="true" [value]="flt_flags" (change)="onChange($event)"/></li>
     {{filter[0].selected}}
     {{filter[1].selected}}
     {{filter[2].selected}}
And the typescript side:
     filter: Array<Object> = [];
     filtersvalues: Object;
constructor() {
this.filter = [
{text: 'check 1', value: '1', selected: false },
{text: 'check 2', value: '2', selected: false },
{text: 'check 4', value: '4', selected: false }
];
this.filtersvalues = { dataSource: this.filter, text: 'text', value: 'value', selected: 'selected' };
Could you please help here or provide a sample?

Thanks!

Prince Oliver [Syncfusion]
Replied On June 23, 2017 12:00 PM UTC

Hi Erne,   
  
Thank you for using Syncfusion products.   
  
In our dropdownlist, the selected field is for selecting the values on initial rendering load only. This will not change the selected field in the model. Please refer to the following UG link: https://help.syncfusion.com/api/js/ejdropdownlist#members:fields-selected 
  
Therefore, this will not update the data source once the value is changed. If you need to modify the selected field in the data source, you need to do it manually in the change event. Kindly refer to the following code snippet.   

onChange(event) 
    { 
       for(var i=0;i<this.filter.length;i++){ 
          this.filter[i].selected = false; 
        } 
        for(var i=0;i<event.model.selectedIndices.length;i++){ 
          this.filter[event.model.selectedIndices[i]].selected = true; 
        } 
 
    } 



Regards, 
Prince 


Holger Erne
Replied On June 23, 2017 04:24 PM UTC

Hi Prince,

thank you very much - this exactly was the missing piece! Everything is now working.

Best regards!


Karthikeyan Viswanathan [Syncfusion]
Replied On June 26, 2017 05:35 AM UTC

Hi Erne,   
 
Thanks for the update.  
 
We are glad the suggestion helped you to achieve your requirement.  
 
Please let us know if you need further assistance.  
 
Regards,   
Karthikeyan V. 
 


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.

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

;