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

Grid with DropDownList cell on edit

Thread ID:

Created:

Updated:

Platform:

Replies:

131104 Jun 20,2017 04:44 PM UTC Jun 22,2017 03:52 PM UTC Angular 3
loading
Tags: ejGrid
Duran
Asked On June 20, 2017 04:44 PM UTC

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 [Syncfusion]
Replied On June 21, 2017 09:14 AM UTC

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. 


<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"]}; 
    } 
} 


Regards, 

Jayaprakash K. 
 
 


Duran
Replied On June 21, 2017 08:52 PM UTC

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 [Syncfusion]
Replied On June 22, 2017 03:52 PM UTC

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. 
  1. Share your first array object of your DataSource.
  2. If possible, provide an issue reproducing sample or hosted link
 
Regards, 

Jayaprakash K. 


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.

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

;