RadMenu - Metro Skin issue with Seperator

[Vijaianand]

I have a radmenu with SiteMap source and I am trying to show the seperator in certain places. I have code and also style to show them but it's not showing property in Metro skin. It shows fine in other skin. What's going on?

protected void RadMenu1_ItemDataBound(object sender, Telerik.Web.UI.RadMenuEventArgs e)
       {

           if (e.Item.Level == 1 && e.Item.Value == "Units")
           {
               Telerik.Web.UI.RadMenuItem separator = new Telerik.Web.UI.RadMenuItem();
               separator.IsSeparator = true;

               Telerik.Web.UI.RadMenuItem itm = (Telerik.Web.UI.RadMenuItem)e.Item;
               itm.Owner.Items.Insert(e.Item.Index + 1, separator);
           }

       }

<style type="text/css">
        /* <Separators> */

 .rmSeparator  {
            height: 1px !important;
            margin: 1px 0 0 !important;
            width: 25px !important;
            background-color: #A8A8A8 !important;
        }
    </style>

[Kate]

Hello Vijaianand,

I tested the issue that you describe but I am not quite sure what is the appearance that you are trying to achieve. Attached to this post you can find the look that I get from my side (as well as the code that I am currently using for testing purpose). Lem know if this is what you get from your side and if I am missing something.

Regards,
Kate
Telerik

[Vijaianand]

That's what I am exactly getting. See the attached. But aren't we suppose to get the link through the full width of the menu?

[Kate]

Hi Vijaianand,

Try using the following css class selectors instead and check if you get the desired look of the control:

<style type="text/css" media="screen">
       .rmSeparator {
           margin-left: 0px;
           width: 25px;
           background-color: #A8A8A8;
           height: 1px;
       }

       div.RadMenu_Metro .rmSeparator .rmText {
           background-color: #A8A8A8;
       }
   </style>

Regards,
Kate
Telerik

[Vijaianand]

Nope it didn't work.

[Kate]

Hi Vijaianand,

For further reference I will attach again my sampel testing page and a screenshot of the result that I get from my side. Let me know hwta is different in your scenario.

Regards,
Kate
Telerik

[Vijaianand]

You got for skin "Metro" not Metrotouch. It doesn't work for Metrotouch even after changing the class names in the style. Also Metrotouch skin doesn't perform similar to metro. For example, when you make a selection in the menu, Metro skin retains the selection but not Metrotouch. Looks like Metrotouch is not really working well.

[Kate]

Hi Vijaianand,

I attached a very simplified runnable page where I applied a new custom skin that is based on the BlackMetroTouch one and applied the needed styles to ge the desired look of the separators. You can also further modify the stylesheet to match your requirements.

Regards,
Kate
Telerik

[Vijaianand]

I tried taking some code from the css file in the sample but nothing. it doesn't work for metrotouch skin at all. 

[Vijaianand]

I am talking about just MetroTouch not BlackMetroTouch.

[Kate]

Hello Vijaianand,

My apologies for that. Attached to this post you can find a css file that you can use instead of the BalackMetroTouch skin file that I previously sent you. By applying the approach described in the previus post and the skin file in this one You can easily get the desired results.

Regards,
Kate
Telerik

[Vijaianand]

Kate

Isn't the css part of the skin dll already and should work as expected when I apply the skin to the RadMenu? Why do I have to apply it seperatly.

Vijai

[Kate]

Hello Vijaianand, 

In general you are correct that the skin is part of the dll assembly file. However, currently it seems that there is an issue with the skins that I sent you and the separators in the RadMenu and in order to workaround it and get the desired appearance you can use it as a separate skin. 

Regards,
Kate
Telerik

[Vijaianand]

I checked my code when I applied MetroTouch skin for the RadMenu and only see RadMenu_MetroTouch as class names not MetroTouchS as its in the css file you attached. So surely its not going to work. I changed the class names to metrotouch and no luck. There is some missing piece for the separator to show up properly in the Metrotouch Skin.

[Kate]

Hello Vijaianand,

Indeed currently we experience some issues with the separators of the RadMenu is some of the skins. For this reason I provided the different workarounds for the particular skins. I have already logged these in our internal system so our developers can inspect it further and resolve them. I also updated your Telerik points for reporting that.

Regards,
Kate
Telerik