Context Menu Size

[Michael Salzlechner]

how can we change the context menu width of the built in context menu of the datagrid for one specific grid or make sure it autosizes to the items in the menu

we can set it globally for all grids in css but not sure how to change it for one grid

thanks

Mike

[Prathap Senthil]

Hi Mike,

Based on your requirement to adjust the width of the grid context menu—either for a specific grid or to automatically size it based on the menu items—we would like to clarify that, by default, the context menu popup width is automatically resized according to the length of its items. For your reference, we have attached a sample and a screenshot.

Screenshot:

Sample : Check the attachment .

So, before proceeding further with your requirement, we kindly request a few additional clarifications from your end:

    • Could you please explain the purpose of changing the width of the grid context menu popup?
    • Could you please confirm whether you are rendering multiple grids on the same Razor page or one grid?
    • Could you please share a reproducible issue sample with duplicate data?

The requested details will help us validate the reported query and provide a solution as quickly as possible. Thank you for your understanding and cooperation.

Regards,
Prathap Senthil

[Michael Salzlechner]

out context menus have the following style

<ul class="e-control e-contextmenu e-lib e-menu-parent" role="menu" tabindex="0" style="display: block; width: 120px;"><li role="menuitem" tabindex="-1" aria-label="Autofit this column" class="e-menu-item e-blankicon" id="sfgridfywzcbwpfvz_cmenu_AutoFit" style="padding-left: 38px;">Autofit this column</li><li role="menuitem" tabindex="-1" aria-label="Autofit all columns" class="e-menu-item e-blankicon e-focused" id="sfgridfywzcbwpfvz_cmenu_AutoFitAll" style="padding-left: 38px;">Autofit all columns</li><li role="menuitem" tabindex="-1" aria-label="First Page" class="e-menu-item e-disabled e-menu-hide" id="sfgridfywzcbwpfvz_cmenu_FirstPage"><span class="e-menu-icon e-icons e-icon-first"></span>First Page</li><li role="menuitem" tabindex="-1" aria-label="Previous Page" class="e-menu-item e-disabled e-menu-hide" id="sfgridfywzcbwpfvz_cmenu_PrevPage"><span class="e-menu-icon e-icons e-icon-prev"></span>Previous Page</li><li role="menuitem" tabindex="-1" aria-label="Last Page" class="e-menu-item e-disabled e-menu-hide" id="sfgridfywzcbwpfvz_cmenu_LastPage"><span class="e-menu-icon e-icons e-icon-last"></span>Last Page</li><li role="menuitem" tabindex="-1" aria-label="Next Page" class="e-menu-item e-disabled e-menu-hide" id="sfgridfywzcbwpfvz_cmenu_NextPage"><span class="e-menu-icon e-icons e-icon-next"></span>Next Page</li></ul>


you can see the display:block and width: 120px

maybe an issue with the version we are using (v28.x)?

[Prathap Senthil]

Thanks for the update ,

Based on the details you shared, you are using the context menu items “AutoFit,” “AutoFitAll,” “FirstPage,” “PrevPage,” “LastPage,” and “NextPage” in version v28.x. We attempted to reproduce the issue using the same version; however, we were unable to replicate the problem on our end. For your reference, we have attached the sample and the screenshot.

Sample : Check the attachment.

So, to proceed further with the issue you reported, we kindly request a few additional clarifications from your end:

• Could you please confirm whether you are rendering multiple grids on the same Razor page or just one grid?
• Could you please share a reproducible sample of the issue with duplicate data, or try to replicate the issue using the attached sample?

The requested details will help us validate the reported query and provide a solution as quickly as possible. Thank you for your understanding and cooperation.

Attachment: DatagridDemo_9c59c816.zip