Help with simple menu selector

Radzen.Blazor Components
1

I'm so sorry to bother you, I'm a newbie, I been trying to use your products, I think these are awesome but also a little confusing on the docs... descriptions are sometimes poor and I would like to mention an example of this: (Class RadzenMenuItem) it says: Icon: => DESCRIPTION: The icon... and the next one... Image => DESCRIPTION: The image... anyway, it would be nice if we see these to in action in an example.

Again, I love your work, I hope my suggestion help make this a little better :slight_smile:

The reason of my visit is to ask for your help on resolving something that is not working as expected (or at least that's what I think). I'm using your RadzenDataGrid to display a list of rooms (I'm learning blazor, and we are creating a Hotel...) like in a table, at the end, I created an empty cell without a Property like this:

<RadzenDataGridColumn TItem="HotelRoomDTO" Property="null" Title="">
            <Template Context="mycontext">
               MENU HERE!
            </Template>
        </RadzenDataGridColumn>

The idea was to leave space to put a button to "Edit" a room. Now I'm working on "delete" a room, so I was thinking... why not add a menu? bootstrap 5 has some good options (Dropdowns · Bootstrap v5.0) but I noticed these doesn't work inside the RadzenDataGridColumn why? not sure but simply doesn't work... according to my understanding, I should be able to add inside any HTML or component and should work just fine but no... ok, so I decided to use your component, in this case RadzenMenu but 2 things happen:

  1. If I add the label RadzenMenu, it shows only the main option, when I click nothing is shown (like the bootstrap example)
  2. if I remove RadzenMenu and leave only RadzenMenuItem it works but its just weird, please take a look at my screenshot.

screenshot
screenshot785×469 54.6 KB

Thank you for your help! :slight_smile:

PD The page Class RadzenMenu has an error, in the first example, it opens RadzenMenuItem and try to close the code with RadzenMenuItemItem, (an extra item) which result in failure.

2

Hi,
I would suggest you follow this example to use buttons instead of menu or use context menu

3

Thank @Vinod_Pillai for your suggestion but 2 questions come to my mind:

  1. I'm supposed to be able to use any type of component inside another component, why this limitation? why simple things like bootstrap dropdown is not working inside?

  2. What I'm asking is nothing extra ordinary... what if we don't want to use buttons?

4

I tried having what you want to have in a datagrid. Indeed it's problematic. The best I could do is inspect the element with the nested menu. It is some unordered list. It is having position:absolute. Changing the position to relative made the menus visible, but the whole row resizes accordingly on collapse/expand. Not so bad, but still couldn't find a way to make it appear over the row.

5

This thread explains why: DataGrid and menu - #3 by Snami

You can try with the Blazor SplitButton | a free UI component by Radzen

6

@korchev The first suggested option of using z-index for whole menu or items did not work.

image

Same behavior, when clicking only the little arrow on the right changes, no menu.

The second option works like a charm except for 2 questions, (sorry, I hope you don't mind asking):

image

I'm having a hard time trying to style the component and do mainly 2 things:

  1. How can I tell this to ocupy the 100% of the cell (width) I tried with adding css, a class, nothing works...
  2. How to decide what color to use? when was established this ugly orange color as the color?

Thank you for all your help and patience! I could resolve all these problems if I switch to a regular table and bootstrap selector but I would like to learn here, thank you so much!

7

Add the following CSS to your app and the setting <RadzenSplitButton style="width: 100%"> would work:

 .rz-splitbutton  .rz-button-text-icon-left {
     flex: 1;
 }

We will add it as a built-in behavior with the next Radzen release.

8

In my current project, I am changing the color of the split button too:

.rz-splitbutton button {
background-color: darkcyan;
}