1. Home
  2. Forum
  3. Angular - EJ 2
  4. DropdownList inside column of Grid: JS2, Angular, TypeScript

DropdownList inside column of Grid: JS2, Angular, TypeScript

Hello,

I'm having some trouble when trying to add a dropdownList in a grid. I'm trying to designate an array of objects, but the demo/documentation for angular isn't very clear on how to do this.

->"simplified"<-
 
                          [columns]='columns'
                          [dataSource]='data'
                          [rowHeight]='30'
                          [editSettings]='editSettings'>
               

dropdown: object[] = [{ type: "example1" }, { type: "example2" }];

  columns: object[] = [
    { field: 'name', headerText: 'Name', textAlign: 'Left', width: 50 },
    { field: 'type', headerText: 'Type', textAlign: 'Left', width: 20, editType: 'dropdownedit', dataSource: this.dropdown },
    { field: 'length', headerText: 'Length', format: 'N', textAlign: 'Center', width: 15 },
    { field: 'format', headerText: 'Format', textAlign: 'Left', width: 30 }
  ];

When trying to edit the column, the grid freezes and it always gives me the following error:
ERROR DataManager - executeLocal() : A query is required to execute
The error persists, even when datasource isnt there.

Question:
Do you have any idea how to solve this? or another way on how to designate data to a column(dropdownlist) in a grid?

Contextinfo:
Angular 7+, Typescript 3+, 
(package.json)
 "@syncfusion/ej2-base": "^16.2.46",
    "@syncfusion/ej2-data": "^16.2.46",
    "@syncfusion/ej2-ng-buttons": "^16.2.50",
    "@syncfusion/ej2-ng-diagrams": "^16.2.50",
    "@syncfusion/ej2-ng-grids": "^16.2.52",
    "@syncfusion/ej2-ng-inputs": "^16.2.53",
    "@syncfusion/ej2-ng-lists": "^16.2.50",
    "@syncfusion/ej2-ng-navigations": "^16.2.50",
    "@syncfusion/ej2-ng-splitbuttons": "^16.2.50",

greetings,

Laurens

8 Replies
LA Laurens Albers November 16, 2018 03:57 PM UTC

I tried the following:
Updating the packages to:
"@syncfusion/ej2-angular-base": "^16.3.32",
    "@syncfusion/ej2-angular-buttons": "^16.3.30",
    "@syncfusion/ej2-angular-diagrams": "^16.3.30",
    "@syncfusion/ej2-angular-grids": "^16.3.32",
    "@syncfusion/ej2-angular-inputs": "^16.3.30",
    "@syncfusion/ej2-angular-lists": "^16.3.30",
    "@syncfusion/ej2-angular-navigations": "^16.3.30",
    "@syncfusion/ej2-angular-splitbuttons": "^16.3.30",

The error dissapears, but creates a weird button on top of the grid with "OK"??? and the dropdownList creates a message The request has failed.
Same as previously mentioned ->  { field: 'type', headerText: 'Type', textAlign: 'Left', width: 20, editType: 'dropdownedit', dataSource: this.dropdown },


LA Laurens Albers November 19, 2018 08:36 AM UTC

!!!!! Fixed using:
  dropdown: object[] = [{ type: "example1" }, { type: "example2" }];
  editParams: any = {
    params: {
      dataSource:  this.dropdown,
      fields: { value: 'type', text: 'type' }
  }

    { field: 'type', headerText: 'Type', textAlign: 'Left', width: 20, editType: 'dropdownedit', edit: this.editParams },


MF Mohammed Farook J Syncfusion Team November 19, 2018 09:38 AM UTC

Hi Laurens, 
 
Thanks for contacting Syncfusion support. 
 
From your query, we found that you want to change the dataSource of the dropdownlist in Grid column. So we suggest you to use editParams property of the Grid column to achieve your requirement. Please refer the below code snippet, 
 
public columns: object[] = [ 
       { 
            field: "type", headerText: "type", editType: "dropdownedit", edit: { 
                params: { 
                    query: new Query(), 
                    dataSource: this.dropdown, 
                    fields: { value: "type", text: "type" } 
                } 
            } 
        } 
    ]; 
 
 
 
Refer the below link to know about editParams property of the Grid column, 
 
 
Regards, 
J Mohammed Farook 


MF Mohammed Farook J Syncfusion Team November 20, 2018 12:50 PM UTC

Hi Laurens, 
 
Query: But it seems the data in dataSource cannot be changed unless it is passed directly into the property. Any idea why? 
 
Based on your requirement, we have set datasource for dropdown dynamically by using actionBegin event. Please find the below code example and sample for your reference. 
 
[code example] 
[app.component.ts] 
... 
export class AppComponent implements OnInit { 
  public data: object[]; 
  public editSettings: object; 
  public toolbar: string[]; 
  public dropdown: object[] = [{ type: "example1" }, { type: "example2" }, { type: "example3" }, { type: "example4" }, 
{ type: "example5" }, { type: "example6" }, { type: "example7" }]; 
  public dropdown1: object[] = []; 
  public columns: object[] = [ 
    { field: "OrderID", headerText: "OrderID", isPrimaryKey: true, width: 120 }, 
    { 
      field: "type", headerText: "type", editType: "dropdownedit", edit: { 
        params: { 
          query: new Query(), 
          dataSource: this.dropdown, 
          fields: { value: "type", text: "type" } 
        } 
      } 
    }, 
    { field: "type2", headerText: "type 2", editType: "dropdownedit", edit: { 
        params: { 
          query: new Query(), 
          dataSource: this.dropdown1, 
          fields: { value: "type2", text: "type2" } 
        } 
      }} 
  ]; 
 
  ngOnInit(): void { 
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
    this.data = data; 
  } 
  actionBegin(args: any): void { 
    if(args.requestType === "beginEdit"){ 
    (this.columns[2] as any).edit.params.dataSource = [{"type2":"solution1"},{"type2":"solution2"},{"type2":"solution3"},{"type2":"solution4"},{"type2":"solution5"},{"type2":"solution6"}, 
{"type2":"solution7"},{"type2":"solution8"}]; 
    } 
  } 
} 
 
[app.component.html] 
<ejs-grid #Grid [dataSource]='data' [columns]='columns' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)="actionBegin($event)"> 
 
</ejs-grid> 
 
 
 
 
We need more information regarding this requirement.  
 
Im asking this because im trying to change the source based on the value of column(type) 
 
  • Do you want to change the dropdown datasource based on type of column?
 
Please ensure whether this is your requirement or not. If this is not your requirement, then please provide more information regarding your requirement. It will be helpful to provide solution as early as possible. 
 
Regards, 
J Mohammed Farook 
 


LA Laurens Albers November 20, 2018 01:33 PM UTC

Hi,

sorry, that it wasnt that clear what im trying to do. I mixed code in the example. But it works now with your example, Thanks!!!

//////////////////////////////////////////////////

  dropdown1: object[] = [{ type: "example1" }, { type: "example2" }, { type: "example3" }, { type: "example4" }]; //fixed list through service
  dropdown2: object[] = [];
// this one needs to change based on value from 
dropdown1
  public columns: object[] = [ 
    { field: "OrderID", headerText: "OrderID" }, 
    { 
      field: "type", headerText: "type", editType: "dropdownedit", edit: { 
        params: { 
          query: new Query(), 
          dataSource: this.dropdown1, 
          fields: { value: "type", text: "type" } 
        } 
      } 
    }, 
    { field: "type2", headerText: "type 2", editType: "dropdownedit", edit: { 
        params: { 
          query: new Query(), 
               dataSource: this.dropdown2 
// this one needs to change based on value from 
dropdown1
,
          fields: { value: "type2", text: "type2" } 
        } 
      }} 
  ]; 
 
actionBegin(args: any) {
  if(args.requestType === "beginEdit"){
      if (args.rowData['type'] === "Date") {
        this.columns[1]['edit'].params.dataSource = [{ type2: 'test1' }]; // WORKS
      } else if (args.rowData['type'] === 'Byte') {
        this.columns[1]['edit'].params.dataSource = [{ type2: 'test2' }];  } // WORKS
}          

greetings,

Laurens

MF Mohammed Farook J Syncfusion Team November 21, 2018 12:42 PM UTC

Hi Laurens, 
 
Query: sorry, that it wasnt that clear what im trying to do. I mixed code in the example. But it works now with your example, Thanks!!! 
 
Based on your request, we have explain the code flow for you. Here, we have initially define datasource first dropdown(dropdown) and define empty datasource for second dropdown(dropdown1). Both dropdown datasources are set to columns by using editParams property. In actionBegin event, we have checked the first dropdown values and change corresponding values to second dropdown based on first dropdown values. 
 
[code example] 
... 
export class AppComponent implements OnInit { 
  public data: object[]; 
  public editSettings: object; 
  public toolbar: string[]; 
  public dropdown: object[] = [{ type: "Date" }, { type: "Byte" }];  //set dropdown data at initial for dropdown 1 
  public dropdown1: object[] = [];                                   //set dropdown data as empty as initial   for dropdown 2 
  public columns: object[] = [ 
    { field: "OrderID", headerText: "OrderID", isPrimaryKey: true, width: 120 }, 
    { 
      field: "type", headerText: "type", editType: "dropdownedit", edit: { 
        params: { 
          query: new Query(), 
          dataSource: this.dropdown,                                 //assign datasource to dropdown column using editParams 
          fields: { value: "type", text: "type" } 
        } 
      } 
    }, 
    { 
      field: "type2", headerText: "type 2", editType: "dropdownedit", edit: { 
        params: { 
          query: new Query(), 
          dataSource: this.dropdown1,                                //assign datasource to dropdown column using editParams 
          fields: { value: "type2", text: "type2" } 
        } 
      } 
    } 
  ]; 
 
  ngOnInit(): void { 
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
    this.data = data; 
  } 
  actionBegin(args: any) { 
    if (args.requestType === "beginEdit") { 
      if (args.rowData['type'] === "Date") {   check whether the first dropdown contains Date value 
        this.columns[2]['edit'].params.dataSource = [{ type2: 'test1' },{ type2: 'test2' },{ type2: 'test3' }];  //set datasource to second dropdown column if the value contains “Date” 
      } else if (args.rowData['type'] === 'Byte') {      check whether the first dropdown contains “Byte” value 
        this.columns[2]['edit'].params.dataSource = [{ type2: 'run2' },{ type2: 'run1' },{ type2: 'run3' }];      //set datasource to second dropdown column if the value contains “Byte” 
 
      } 
    } 
  } 
} 
 
 
Please get back to us if you need further assistance. 
 
 
Regards, 
J Mohammed Farook 


SM Shannon McCoy July 18, 2019 06:26 PM UTC

The code example does not quite work. It does change the droplist but not during the same edit session. For example in StackBlitz if you go into edit mode and the type of the first field is Byte the drop list on type2 is run1,1run2,run3 and if you edit a row where the type is Date the drop list is test1,test2,test3 as expected. However if you edit a field and change the type from Byte->Date (or vise versa) the type2 droplist does not update until you exit the update and return to edit mode. It is not working in realtime. Is there a refresh or other bump method that needs to be called to make this complete?


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 19, 2019 10:24 AM UTC

Hi Laurens,  
 
We could see you the second dropdownlist were not updated after changing the values from the first dropdownlist. We have handled this case using the Edit (a edit params) property of the first dropdown column. In the type  column, we have bound the change event to the respective dropdownlist. In the change event, datasource to the type2 column’s dropdown is changed. Refer to the following code example.  
 
 
    import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core'; 
import { data } from './datasource'; 
import { GridComponent, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids'; 
import { DropDownList } from '@syncfusion/ej2-dropdowns'; 
import { Query } from '@syncfusion/ej2-data'; 
 
@Component({ 
  selector: 'my-app', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
}) 
export class AppComponent implements OnInit { 
    @ViewChild('grid') 
    public grid: GridComponent; 
  public date: object[] = [{ type2: 'test1' },{ type2: 'test2' },{ type2: 'test3' }]; 
  public byte: object[] = [{ type2: 'run2' },{ type2: 'run1' },{ type2: 'run3' }]; 
  public data: object[]; 
  public editSettings: object; 
  public toolbar: string[]; 
  public dropdown: object[] = [{ type: "Date" }, { type: "Byte" }]; 
  public columns: object[] = [ 
    { field: "OrderID", headerText: "OrderID", isPrimaryKey: true, width: 120 }, 
    { 
      field: "type", headerText: "type", editType: "dropdownedit", edit: { 
        params: { 
          query: new Query(), 
          change: (args) => { 
            var type2 = document.getElementById(this.grid.element.closest('.e-grid').getAttribute('id')+'type2')['ej2_instances'][0]; 
            type2.value = null; 
            type2.dataSource = args.itemData.type === 'Date' ? this.date : this.byte; 
          }, 
          dataSource: this.dropdown, 
          fields: { value: "type", text: "type" } 
        } 
      } 
    }, 
    { 
      field: "type2", headerText: "type 2", editType: "dropdownedit", edit: { 
        params: { 
          query: new Query(), 
          dataSource: this.dropdown1, 
          fields: { value: "type2", text: "type2" } 
        } 
      } 
    } 
  ]; 
 
  ngOnInit(): void { 
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
    this.data = data; 
  } 
  actionBegin(args: any) { 
    if (args.requestType === "beginEdit") { 
      if (args.rowData['type'] === "Date") { 
        this.columns[2]['edit'].params.dataSource = this.date; 
      } else if (args.rowData['type'] === 'Byte') { 
        this.columns[2]['edit'].params.dataSource = this.byte; 
      } 
    } 
  } 
} 

 
Regards,  
Seeni Sakthi Kumar S. 


Loader.
Up arrow icon