Dropdown button in grid columns

[Juan Maldonado]

I was reading this Post, and i came with the same situation in my project, there is a way, the list of Actions be upper layer or outside the table? also i was able to use the " Template" on columns. at the moment its showing inside the table or columns content.




Thanks in advance,

[Vikram Sundararajan]

Hi Juan Maldonado,

Greetings from Syncfusion support,

Based on your query regarding the column template with dropdown, it seems that the dropdown list is showing inside the grid, but you need it to display on the upper layer or outside the table. We have reviewed your requirement regarding rendering the dropdown using a column template. By default, the popup opens outside the grid. Please refer to the screenshot and sample below for further reference:

 

Sample; https://stackblitz.com/edit/ps8shw-jmm633?file=index.js,index.html

If we misunderstood anything wrongly, please share the below details that would be helpful for us to provide better solution.

1. Please share your exact requirement with detailed description with video demonstration that would be helpful for us to provide better solution.
2. Share your complete Grid and column template rendering code. it we would like to check your implementation.
3. Share your Syncfusion package version.
4. If possible, please provide a sample that showcases the specific issue you're encountering. Having a sample will allow us to directly analyze and validate your query, resulting in a quicker and more precise resolution.

Regards,

Vikram S

[Juan Maldonado]

Thanks, question this work with this type of code?

 @Html.EJS().Grid("FilterMenu").DataSource((IEnumerable<object>)Model.Customers).ContextMenuItems(new List<object>() { "AutoFit", "AutoFitAll" }).AllowResizing(true).RowSelected("rowSelectedSf").AllowSelection().Columns(col =>

 {

     col.HeaderText("Action").Width("23").Template("#ActionsTemplate").Add();

 }).AllowPaging(true).AllowSelection(true).AllowSorting(true).AllowFiltering(true).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).PageSettings(page => page.PageSize(250)).AutoFit(false).Render()

[Aishwarya Rameshbabu]

Hi Juan Maldonado,

We have developed a sample based on the provided code example and successfully implemented a Syncfusion dropdown button to meet your needs. Please review the attached sample and screenshot demonstrating the proper rendering of the dropdown without any display issue. Therefore, we suggest using the Syncfusion dropdown button for your project to resolve the problems you are experiencing with the HTML dropdown button. If you encounter any difficulties, please do not hesitate to contact us for assistance.

For further information, please consult the documentation link below:

Documentation Link: Drop-down-button

Regards

Aishwarya R

Attachment: 187928SampleAndScreenshot_a7deb5c7.zip