Remove Icon Spacing in Context Menu

[Rachel]

I would like to hide the left-side spacing (the space intended for an icon) in the top-level items of my Context Menu.  I need to keep the space for checkmarks in the sub-items.  So far I have been unable to do so using the ControlTemplates and Styles.  Is there a way to hide this space?

Thank you,
Rachel

[Dani]

Hello Rachel,

Normally, the IconColumnWidth property would be used to control the width of the space you are referring to. This property is set on the RadMenu, however. If you wished to set different column width for each menu item, that would require that you edit each menu item control template.

Although what you wish to achieve would be possible with RadMenu, RadContextMenu on the other hand, does not provide the option to style the top level items and submenu items differently. This is because the context menu by concept contains only submenu items, altough visually it displays its items as top~ and sub~ items. So, currently it is not possible to set the width of the icon column to be 0 for top level items, and Auto or 28px for the submenu items. 

We apologize if this causes inconvenience in your case. We will consider implementing this type of behavior in the future.

Regards,
Dani
the Telerik team

[Rachel]

I am adding the items to my context menu dynamically, one at a time.  Would it not be possible to assign one template to the top level item, and a different template to the subitems?  If I only knew how to get rid of the left-side spacing in a RadMenuItem template, I could give it a try.

Thanks again,
Rachel

[Dani]

Hello Rachel,

I tested the case further and I found a solution to your scenario. First of all, as I explained, RadContextMenu does not respect top level items and practically TopLevel templates do not exist in RadContextMenu. And this is the intended behavior by default.

So to force each RadMenuItem to have the correct template, you have to explicitly set  the template for each item. I have included a sample here, demonstrating the visual appearance you wish to accomplish. Some of the templates are applied through the Template property of the RadMenuItem, while others use the SubMenuHeaderTemplateKey property. The method is a bit hacky and is surely logically incorrect, but is working fine with your scenario.

What you could do is have an ItemContainerStyleSelector for your RadContextMenu that determines what is the level of the RadMenuItem and pass a different Style for the uppermost level items and lower level items. In the Style for the upper level items you can set the Template property, and for the lower level items you can set the SubMenuHeaderTemplateKey (submenu header items) or again simply the Template property (ordinary submenu items).

The sample contains a few comments starting with the word NOTE. You can check them to see the modified spots.

I hope this will help you achieve the context menu look you wish to have. If you need further guidance on this issue, please let me know.

Best wishes,
Dani
the Telerik team

[Rachel]

Thank you very much for giving it a second look.  I will give it a try!

Thanks,
Rachel