[Solved] menu appears behing the grid

[Bernard Simmons]

Hi,

1st let me say thank you for a great product and documentation.

Using the standard template for ASP.Net MVC 1, I replaced the menu with the Telerik MVC Grid and on menu that have 6 or more items, items 6 and beyond appear behind the Telerik grid. The menu is in the site,master page and the grid is in the index.aspx view. Is there anyway control the order of the controls so that the menu items appear on top of the grid? (Hope this is clear).

Thanks

Bernard

[Alex Gyoshev]

Hello Bernard,

The problem should be resolved when you add .HtmlAttributes(new { style="position: relative; z-index: 100" }) to the menu.

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.

[Bernard Simmons]

Hi Alex,

Thaks for the response but it does not seem to work. I have tried different values and at different locations, all to no avail.\
Here is my menu from my Site.Master file:

 

<%

 

Html.Telerik().Menu()

.Name(

"myMenu")

 

 

/*.HtmlAttributes(new { style = "text-align: right;" })*/

 

.HtmlAttributes(

new { style = "position: relative; z-index: -1" })

 

.Items(items =>

{

items.Add().Text(

"Home").Url("/Home/Index");

 

items.Add().Text(

"Members").HtmlAttributes(new { style = "text-align: left;" }).Items(sub1 =>

 

{

sub1.Add().Text(

"Create New").Items(sub10 =>

 

{

sub10.Add().Text(

"Family").Url("/Family/Create");

 

sub10.Add().Text(

"Person").Url("/Person/Create");

 

sub10.Add().Text(

"Company").Url("/Company/Create");

 

sub10.Add().Text(

"Contact").Url("/Contact/Create");

 

});

sub1.Add().Text(

"New Members").Url("/Contact/NewMembers");

 

sub1.Add().Text(

"Families").Url("/Family/Index");

 

sub1.Add().Text(

"Persons").Url("/Person/Index");

 

sub1.Add().Text(

"Companies").Url("/Company/Index");

 

sub1.Add().Text(

"All Contacts").Url("/Contact/Index");

 

});

.....

})

.Render();

%>

 

Hope this helps Identify where my error is.

Thanks
Bernard

[Alex Gyoshev]

Hello Bernard,

The z-index should be high, not -1. If a high z-index doesn't help, then probably an element around the menu is being overlapped by one of its siblings. Please check this demo - understanding z-index - or send a sample application, in order for us to help.

All the best,
Alex Gyoshev
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.

[Bernard Simmons]

Hi Alex,
Thanks for your help and the reference, I got it working by setting the z-index to 500.

Bernard

[David]

Thanks Alex - this fixed me up too.

... I knew if I walked away for a few days, I would come back on here and find my answer in seconds.

[Eric]

I am trying to embed a menu control within a grid control to show multiple
command options for the user (edit, delete, details, etc).  I got the menu
on the grid, but the menu is blocked by the other table entries when it
expands.  It also looks like only the first menu works.

Any solutions:

     Html.Telerik().Grid<Model.test>()
        .BindTo((List<Model.test>)ViewData["Data"])
        .Name("Test")
        .DataKeys(k => k.Add(r => r.id))
        .Columns(c =>
        {
            c.Add(col =>
            {
                Html.Telerik().Menu().Orientation(MenuOrientation.Vertical)                
                .Name("Menu")
                .Items(menu =>
                {
                    menu.Add()
                        .Text("ASP")
                        .Items(item =>
                        {
                            item.Add().Text("Test1");
                            item.Add().Text("Test2");
                            item.Add().Text("Test3");
                            item.Add().Text("Test4");
                        });
                }).Render();
            }).Title("Action").HtmlAttributes(new { style = "position: relative; z-index: 100000" });
            c.Add(col => col.test1).HtmlAttributes(new { style = "position: relative; z-index: 1" });
            c.Bound(o => o.test2).Title("Test2").ReadOnly().Width(120);
            c.Bound(o => o.test3).Title("Test3").ReadOnly().Width(120);
            c.Bound(o => o.test4).Title("Test4").Width(220);
})