Command Column showing countries that only exist in the record set rather than showing complete list

[Adeel Siddiqui]

While working on Command Column I noticed that when I updated all the records to few specific countries then it only shows that countries (in a record set updated by me) instead of showing all the countries. How can I show all the countries.

Before Updating :

After Updating :

Here is my requirement that I want to list all the countries whether they exist or not in the record set.

[Manivel Sellamuthu]

Hi Adeel, 

Greetings from Syncfusion support. 

We can understand that your requirement and you can achieve your requirement by providing custom dataSource for dropdown through editParams. Please refer the below code example and sample for more information. 

import { Component, OnInit } from '@angular/core'; 

import { data } from './data'; 

import { CommandModel, EditSettingsModel,iterateExtend } from '@syncfusion/ej2-angular-grids'; 

 

@Component({ 

    selector: 'app-root', 

    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' height='400px'> 

                <e-columns> 

                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=100></e-column> 

                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 

                    <e-column field='Freight' headerText='Freight' textAlign= 'Right' 

                     editType= 'numericedit' width=120 format= 'C2'></e-column> 

                    <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit'  [edit]='ddParams' width=150></e-column> 

                    <e-column headerText='Commands' width=120 [commands]='commands'></e-column> 

                </e-columns> 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

 

    public data: object[]; 

    public editSettings: EditSettingsModel; 

    public commands: CommandModel[]; 

    public ddParams: any; 

 

    ngOnInit(): void { 

        this.data = data; 

        // here we are iterating and extending the grid data to dropdown to avoid object reference 

        this.ddParams = { params: { dataSource:  iterateExtend(data) } }; 

   . . . 

} 

Sample: https://stackblitz.com/edit/angular-154933-custom-datasource?file=app.component.ts 

Documentation: https://ej2.syncfusion.com/documentation/grid/edit/#cell-edit-type-and-its-params 

Screenshot:  

 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Adeel Siddiqui]

Thanks but not working accordingly, now I have few questions

•  What in case if it is the array of object with some extra information, then how can I specify the value(text to show in dropdown) and id (primary key value to be saved in database later).
• How can I define some specific event along with the same dropdown.
• As you can see after clicking edit it is clearing the field how can I keep the selected value while editing.
• 
  

[Balaji Sekar]

Hi Adeel, 

Query #1: What in case if it is the array of object with some extra information, then how can I specify the value(text to show in dropdown) and id (primary key value to be saved in database later). 

We have validated your query with provided information and we suspect that you have used dropdown data and Grid column data are different. By default, Need to existing the Grid column data  in dropdown dataSource property. If you missed this case, please check and use this way in dropdown editing. 

Query #2: How can I define some specific event along with the same dropdown. 

You can define the dropdown event through edit params from the Grid. Please refer the below code example and Documentation for more information. 

[app.component.ts] 

 this.ddParams = { params: { dataSource:  iterateExtend(data),change:this.dropdownChange } }; 

  dropdownChange(args){ 

      // write your c 

    } 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#events 

Sample link: https://stackblitz.com/edit/angular-154933-custom-datasource-1q8qbv 

Query #3: As you can see after clicking edit it is clearing the field how can I keep the selected value while editing. 

We have clear the selection while edit row then it will bind a edit form in that row it is default behaviour. We cannot achieve your requirement in this case. 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar