1. Home
  2. Forum
  3. Angular
  4. How to remove item from drop down data source dynamicly

How to remove item from drop down data source dynamicly

Hi,

I have one drop down and one button on my view:

View:

       "<div class="drop-down">
                <input  ej-dropdownlist
                        [dataSource]="DDDS"
                        [fields]="DDFields" />  
        </div>
    
        <div class="button">
                <button type="button" (ejclick)="removeDataSourceItem()" contentType="textonly" text="Remove Drop Down Item" ej-button></button>  
        </div>" 

ViewModel:

   DDDS: any[] = [];
   DDFields: any = { value: 'value', text: 'text' };

  constructor() {
  }

  ngOnInit() {
    let data: any[] = [{
      value: 'value1',
      text: 'item1'
    },
    {
      value: 'value2',
      text: 'item2'
    },
    {
      value: 'value3',
      text: 'item3'
    }];

    this.DDDS = data;
  }

  removeDataSourceItem() {
    this.DDDS.splice(-1, 1);
  }

Click on the button remove last item in data source (attached example).
When I remove item from data source in view model item is still on the view.

What is the correct way removing item from datasource and removing from the view ?


Regards,
Milos

Attachment: Syncfysion_7d55afc6.zip

5 Replies
KR Keerthana Rajendran Syncfusion Team December 27, 2017 07:10 AM UTC

Hi Milos,   
   
Thank you for contacting Syncfusion support.   
   
We checked your sample. We suggest you to rebind the modified dataSource to DropDownList via setModel as shown below to remove an item from DropDownList.   
   
  <div class="drop-down">   
                <input  ej-dropdownlist id="ddl"   
                        [dataSource]="DDDS"   
                        [fields]="DDFields"      
                        width="250px" />     
        </div>   
   
removeDataSourceItem() {   
          this.DDDS.splice(-1, 1);   
            var ddlobject=$("#ddl").data("ejDropDownList");   
            ddlobject.setModel({ dataSource: this.DDDS });                     
  }   
   
Modified sample can be downloaded from the below link   
   
   
Please refer to the below given UG for more details   
   
   
   
Regards,   
Keerthana.   
 


MI Milos December 27, 2017 09:59 AM UTC

Hi Keerthana,

Thank for the swift response.

1) The point here is to we change the reference of the data source if we want data in drop down to be reloaded if I understand well ?

2) Angular advice is to avoid using jquery. Is it better solution to we use Angular way to do this ?

    Example:

     View: 
       "
               ej-dropdownlist
               [dataSource]="DDDS"
               [fields]="DDFields"   
               width="250px" />

Model:

   @ViewChild('dropDownId') dropDownRef: EJComponents;

   this.dropDownRef.widget.setModel({dataSource: someData}); 


3) Is there any way doing this without changing the reference of the data source ?
     I have on array of data which is binded to view, some tables, drop down and so on...
     Syncfusion table data source works perfectly in this case, with adding and removing single item from data source it immediately reload view.
     I have this problem only with drop down. If I need to change drop down reference when I need to reload data, I will louse proper reference. Or I need to change      reference to all other controls (in case to synchronize data) which are connected to the same array and reload many data which is not good solution.


4) When I want to check data in my data source with:

     this.dropDownRef.model.dataSource

It is always empty ?



Regards,
Milos

KR Keerthana Rajendran Syncfusion Team January 2, 2018 11:17 AM UTC

Hi Milos,   
   
Query 1: The point here is to we change the reference of the data source if we want data in drop down to be reloaded if I understand well ?   
   
Yes, we have to reload the data in dropdownlist once the item is removed.   
   
Query 2: Angular advice is to avoid using jquery. Is it better solution to we use Angular way to do this ?   
   
You can either use jquery or you can set dataSource for DropDownList through ViewChild option as shown below   
   
export class AppComponent implements OnInit  {   
  @ViewChild("ddl") dropdownRef: EJComponents<ej.DropDownList,any>;   
  DDDS: any[] = [];   
  DDFields: any = { value: 'value', text: 'text' };   
   
  constructor() {   
  }   
   
   
  removeDataSourceItem() {   
    this.DDDS.splice(-1, 1);   
    this.dropdownRef.widget.setModel({ dataSource: this.DDDS });       
  }   
   
   
   
We have modified our previous sample based on this which can be downloaded from the below link   
   
   
Query 3: Is there any way doing this without changing the reference of the data source ?   I have on array of data which is binded to view, some tables, drop down and so on...     Syncfusion table data source works perfectly in this case, with adding and removing single item from data source it immediately reload view.I have this problem only with drop down. If I need to change drop down reference when I need to reload data, I will louse proper reference. Or I need to change  reference to all other controls (in case to synchronize data) which are connected to the same array and reload many data which is not good solution.   
   
Currently, we don’t have two-way binding support for dataSource property in DropDownList and we have to rebind the modified dataSource for DropDownList. We will consider your suggestion and include this feature in future releases.   
   
Query 4: When I want to check data in my data source with:   this.dropDownRef.model.dataSource. It is always empty ?   
   
We were able to get the dataSource updated in model both before and after removing an item. Please refer to the below screenshot   
   
Before Remove:   
   
    
   
After Remove:   
   
    
   
Please ensure whether you are testing this after data is bound to DropDownList. Kindly, ensure this scenario in the provided sample and if issue persists get back to us with issue reproducing steps so that we can proceed further.   
   
Regards,   
Keerthana.   
 


MI Milos January 30, 2018 08:35 AM UTC

Hi Keerthana,

Thank you for your response.
Everything is clear now.

Regards,
Milos 

KR Keerthana Rajendran Syncfusion Team January 31, 2018 04:10 AM UTC

  
Hi Milos, 
 
Most Welcome. Please get back to us if you require further assistance on this. We will be happy to assist you. 
 
Regards, 
Keerthana. 
 


Loader.
Up arrow icon