show drop down in grid in dialogue and fill data

[RakhiS]

Hi,

when i click on add button in tool bar of grid, a dialogue opens i want to show a column of grid as dropdown into it also want to fill data into it. Please share example for this.

I found example for the grid edit cell but mine is dialogue.

Thanks

[Manivel Sellamuthu]

Hi Rakhi, 

Greetings from Syncfusion support. 

You can achieve your requirement by mentioning editType for a column as ‘dropdownedit’. Please find the below code example and documentation link for more information. 

    <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

             

<e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column> 

        </e-columns> 

    </ejs-grid> 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/dialog-editing 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#dialog 

Please get back to us, if you need further assistance. 

Regards, 

Manivel 

[RakhiS]

Hi Rakhi, 

Greetings from Syncfusion support. 

You can achieve your requirement by mentioning editType for a column as ‘dropdownedit’. Please find the below code example and documentation link for more information. 

    <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

             

<e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column> 

        </e-columns> 

    </ejs-grid> 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/dialog-editing 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#dialog 

Please get back to us, if you need further assistance. 

Regards, 

Manivel 

In the shared example I am not able to get how they bind the shipcountry dropdown. 

Please help. even I searched in the data .ts file but I am not getting this field binding.

[Manivel Sellamuthu]

Hi Rakhi, 

Thanks for your update. 

Query: In the shared example I am not able to get how they bind the shipcountry dropdown. 

 

In EJ2Grid we already have built-in support for some components to render while editing. When we mention the edit type as ‘dropdownedit’ the dropdown will be rendered from source-level. 

Query: but I am not getting this field binding. 

 

From your query we cannot clearly understand your requirement. But we suspect that you want to customize the dropdown properties, which can be done in two ways. 

1. Edit params – Define edit type as dropdown edit and modify the properties through column.edit.params. Please refer the below link for more information. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-type-and-its-params 

 

2. Cell Edit template: Using cell edit template, we can render the dropdown using write function column.edit. Here we can render the dropdown and customize it’s properties. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-template 

If the above does not meet your requirement or this is not your exact requirement, please explain clearly about your requirement. 

Regards, 

Manivel