Grid with DropDownList cell on edit

[Duran]

Is there an easy way to create a DropDownList control, using a pre-defined data source, on a Grid's cell in edit mode?

I'm currently using the editTemplate properties to manually create a DropDownList on edit, but it seems like a lot of work.

[Jayaprakash Kamaraj]

Hi Duran, 

Thank you for contacting Syncfusion support. 

We suggest you to set editType as Dropdown in Grid column to render DropDownList control in grid cells. Please refer to the below help document, code example and sample. 

https://help.syncfusion.com/api/angular2/grid#members:columns-edittype 

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings"> 

    <e-columns> 

        <e-column field="EmployeeID" [isPrimaryKey]="true"></e-column> 

        <e-column field="FirstName" [editType]= "editType" ></e-column> 

        <e-column field="LastName" [allowEditing]="false"></e-column> 

    </e-columns> 

</ej-grid> 

export class GridComponent { 

    public gridData: any; 

    public pagesize: number; 

    constructor() { 

        this.gridData = window.employeeView; 

        this.pagesize = 5; 

              this.editType=ej.Grid.EditingType.Dropdown; 

              this.editSettings={allowAdding:true,allowEditing:true,allowDeleting:true}; 

this.toolbarSettings={ showToolbar: true,toolbarItems:["add","edit","update","cancel"]}; 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/131104/ze/angular2-seeds29962767-2127746091 

Regards, 

Jayaprakash K. 

 

 

[Duran]

1. The solution you provided does not allow the drop down to use a pre-defined data source.

2. Even though you could potentially use a pre-defined data source through the use of a column's "editParams" or "dataSource":

a. On edit, the drop down does not pre-select the data from the column

b. On saving an edit, the text displayed in the column is the drop down list's "value" property, not it's "text" property

Is there an easy way to do this?  possibly without the use of "editTemplate"?

Thanks.

[Jayaprakash Kamaraj]

Hi Duran, 

To overcome this problem, we suggest you to set both text and value is same in dropdown dataSource. Please refer to the below code example, 

 

   <ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings"> 

    <e-columns> 

        <e-column field="EmployeeID" [isPrimaryKey]="true"></e-column> 

        <e-column field="FirstName" [editType]= "editType" [dataSource]="data1" ></e-column> 

        <e-column field="LastName" [allowEditing]="false"></e-column> 

    </e-columns> 

</ej-grid> 

    this.data1 = [{ text: "Nancy", value: "Nancy" }, 

                        { text: "Andrew", value: "Andrew" }]; 

 

If we misunderstood your requirement, please share the following details, 

1.       Show the video or screenshot to show the issue. 

2. Share your first array object of your DataSource.
3. If possible, provide an issue reproducing sample or hosted link

 

Regards, 

Jayaprakash K.