Dropdown list in ejs-grid

[Narsimsetty Chalamaiah]

Hi Team,

I need dropdown list in ejs-grid ,

Please provide code asap.

Please find attached file.

Thanks & Regards

Chalamaiah N

Attachment: dropdownlist_in_ejs_grid_cc88d49.zip

[Praveenkumar Gajendiran]

Hi Narsimsetty,

Thanks for contacting Syncfusion support.

Query: “I need dropdown list in ejs-grid”

Based on your query and provided information, we suspect that your requirement is to render DropDownList component in the Grid column, for this we suggest you use column.template feature of Grid to achieve your requirement. 

Please refer the below code example, document and sample for more information, 

Code Example: 

<ejs-grid #normalgrid [dataSource]="data" height="350" allowPaging="true" [pageSettings]="pageSettings"> 

                             <e-columns> 

                                           <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true"> 

                                           </e-column> 

                                           <e-column field="CustomerID" headerText="Customer ID" width="150"> 

                                                          <ng-template let-data #template> 

                                                                        <ejs-dropdownlist id="CustomerID" name="CustomerID" [dataSource]="customerIDDistinctData" 

                                                                                      [fields]="fields" value={{data.CustomerID}} popupHeight="300px"> 

                                                                        </ejs-dropdownlist> 

                                                          </ng-template> 

                                           </e-column> 

                                           <e-column field="CustomerName" headerText="Customer Name" width="150"> 

                                           </e-column> 

                                           <e-column field="OrderDate" headerText="Order Date" width="130" format="yMd" textAlign="Right" 

                                           [format]="formatoptions"></e-column> 

                                           <e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column> 

                                           <e-column field="ShipCountry" headerText="Ship Country" width="150" textAlign="left" type="string"> 

                                           </e-column> 

                             </e-columns> 

              </ejs-grid> 

Sample: https://stackblitz.com/edit/angular-xfsmng-oy9ua6?file=app.component.html

Documentation Link: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-template

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid/column/#template

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[Mohammed Rahman]

Hi Team,

We are facing issue with e-js drop down during the edit operation, the values are not getting retained in the drop down. This is the code: Pls suggest what changes required here.

<e-column field='programName' headerText='Program Name' width='200' editType='dropdownedit' [edit]='programNameParams' defaultValue=""></e-column>​
 Copy

[Dineshnarasimman Muthu]

Hi ,

We have reviewed your query regarding the dropdownlist not populated with data in the dropdownedit. By default, when the column editType is set as dropdownedit, it will populate the data automatically. We suspect that you are providing custom data to the dropdownlist using column.edit property. We have discussed this topic in our UG documentation on providing the custom data to the dropdown list.

 this.editparams = {

      params: {

        dataSource: new DataManager(this.country),

        fields: { text: 'countryName', value: 'countryName' },

        query: new Query(), // need to add the query property

        actionComplete: () => false,

      },

    };

 

 

Sample: https://stackblitz.com/edit/angular-decadj?file=src%2Fapp.component.ts,src%2Fapp.component.html

Documentation: https://helpej2.syncfusion.com/angular/documentation/grid/editing/edit-types#provide-custom-data-source-for-dropdownlist-component

If this didn't meet resolve the issue, please provide the code implementation you have made in the programNameParams (column.edit property). Also ensure whether you are using custom dropdownlist using column.edit property. Please provide the pictorial image of the issue you are facing.

Regards,

Dineshnarasimman M