[Solved] Using MVC menu within Cell of MVC Grid

[Michael Strasser]

I'm attempting to use the MVC menu within a cell/column of the MVC grid (as a templated item).  I figured that would be a good way to organize the many actions that could be associated with each particular row.

I got that working okay, but the menu items are cut off by the boundries of the cell (see attached image).

I assume this could be a z-index issue, but...

Could you help me overcome this problem?

Many thanks!

[Alex Gyoshev]

Hello Michael,

The problem is caused because the grid cells have overflow: hidden. If you add the following CSS to your page (after the telerik.common stylesheet), the menu should open nicely

.t-grid td
{
    overflow: visible
}

As a side-note, using the menu hides the available actions - if they are not too many, it would be more user-friendly if you list them in an actions column, like the grid editing example.

All the best,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michael Strasser]

Sorry Alex, your suggestion didn't work.

Thanks!
Mike

[Alex Gyoshev]

Hello Michael,

I'm sorry I misguided you - there were some more styles that were needed in order to make it work:


        .t-grid td,
        .t-grid td .t-header
        {
            overflow: visible;
        }
        
        .t-grid td .t-header
        {
            padding: 0;
        }
        
        .t-grid td .t-header .t-link
        {
            height: auto;
            line-height: normal;
            margin: 0;
            padding: 0.25em 0.97em;
        }

I've attached a sample solution that I used for testing.

Sincerely yours,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michael Strasser]

Thanks!  That worked great!
-Mike

[Shashikant]

Hi,
Can you please suggest me how to use the MVC menu within a cell/column of the MVC grid.
Please reply me....

[Michael Strasser]

Shashikant,
I haven't looked at this code in a long time.  But here is an abbreviated section of our code that adds a menu to the grid cell.
Hope it works for you.
-mastrasser


.Columns(columns =>

    {

        columns.Add(O =>

            {

                Html.Telerik().Menu()

                    .Name(string.Format("EntityMenux{0}", O.Id.ToString()))

                    .Items(menu =>

                        {

                            menu.Add()

                                .Text("Row Options")

                                .HtmlAttributes(new { title = "Click to see available options.", style = "z-index: 200000;" })

                                .Items(item =>

                                {

                                    item.Add()

                                        .HtmlAttributes(new { title = "Click to edit this organization." })

                                        .Text("Edit")

                                        .ImageUrl("~/content/styles/common/menuicons/edit.png")

                                        .Url(Url.Action("Edit", "Organization", new { id = O.Id }));

                                    item.Add()

                                        .Text("<hr />")

                                        .HtmlAttributes(new { title = "", longdesc = "Line acting as a menu separator" });

                                    item.Add()

                                        .Text("Organization Staff <span class=\"EntityCountWrapper\">(<span class=\"EntityCount\">" + O.UserOrganizations.Count().ToString() + "</span>)</span>")

                                        .ImageUrl("~/content/styles/common/menuicons/autolist16x16.png")

                                        .HtmlAttributes(new { title = "Click to maintain administrative staff." })

                                        .Url(Url.Action("Summary", "UserOrganization", new { organizationId = O.OrganizationId }));

                                });

                        }//.Items(Menu)

                    )

                    .Orientation(MenuOrientation.Vertical)

                    .HighlightPath(true)

                    .OpenOnClick(false)

                    .Render();

            }//columns.Add()

        ).Width(125).Title("Actions").HtmlAttributes(new { @style = "overflow: visible;" });

        /* additional grid columns follow */

    })