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

DropdownList inside column of Grid: JS2, Angular, TypeScript

Thread ID:

Created:

Updated:

Platform:

Replies:

140970 Nov 16,2018 12:29 PM UTC Nov 21,2018 12:42 PM UTC Angular - EJ 2 6
loading
Tags: Grid
Laurens Albers
Asked On November 16, 2018 12:33 PM UTC

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

Laurens Albers
Replied On 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 },


Laurens Albers
Replied On 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 },


Mohammed Farook J [Syncfusion]
Replied On 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 


Mohammed Farook J [Syncfusion]
Replied On 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 
 


Laurens Albers
Replied On 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!!!

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

  dropdown1object[] = [{ type: "example1" }, { type: "example2" }, { type: "example3" }, { type: "example4" }]; //fixed list through service
  dropdown2object[] = [];
// 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

Mohammed Farook J [Syncfusion]
Replied On 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 


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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

;