Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ken
120
Problem with top-level separators
posted

Hello,

I am attempting to create a simple menu, rendered horizontally, containing separators between items. However, the separators are not rendered. The markup defining the menu is below:

<ignav:UltraWebMenu ID="UltraWebMenu1" runat="server" JavaScriptFilename=""

JavaScriptFileNameCommon="" LeafItemImageUrl="" ParentItemImageUrl=""

StyleSetName="" TopItemSpacing="Compact">

<IslandStyle BackgroundImage="~/Images/bg_nav2.png">

</IslandStyle>

<TopSelectedStyle BackgroundImage="~/Images/bg_nav.png">

</TopSelectedStyle>

<HoverItemStyle Cursor="Default" ForeColor="White"

BackgroundImage="~/Images/bg_nav.png">

</HoverItemStyle>

<ItemStyle Cursor="Default" Font-Bold="True" Font-Names="Arial"

Font-Size="Small" ForeColor="White" Height="28px" />

<Items>

<ignav:Item Text="Wage Reporting">

</ignav:Item>

<ignav:Item Separator="True" Text="">

</ignav:Item>

<ignav:Item Text="Membership Application">

</ignav:Item>

</Items>

<DisabledStyle Font-Names="MS Sans Serif" Font-Size="8pt" ForeColor="Gray">

</DisabledStyle>

<Levels>

<ignav:Level Index="0" />

</Levels>

<SeparatorStyle

CustomRules="background-repeat:repeat-x; "

BackgroundImage="~/Images/bg_page.png" CssClass="SeparatorClass" />

<ExpandEffects ShadowColor="LightGray"></ExpandEffects>

<MenuClientSideEvents InitializeMenu="" ItemChecked="" ItemClick="" SubMenuDisplay="" ItemHover=""></MenuClientSideEvents>

</ignav:UltraWebMenu>

The rendered HTML output follows:

<div menuframe='1' class="ig_d4377750_r1" style=" cursor:Default;" >

<table height='' submenu='1' border='0' cellpadding='2' cellspacing='1' id='ctl00UltraWebMenu1_MainM' tabIndex='0'>

<tr>

<td igitem='1'>

<table width='100%' cellpadding='2' cellspacing='0' id='ctl00UltraWebMenu1_1' class=" ig_d4377750_r2" igTop='1'>

<tr>

<td width='1' ></td>

<td align='left'>

<nobr>Wage Reporting</nobr>

</td>

</tr>

</table>

</td>

<td igitem='1'>

<table width='100%' cellpadding='2' cellspacing='0' id='ctl00UltraWebMenu1_3' class=" ig_d4377750_r2" igTop='1'>

<tr>

<td width='1' ></td>

<td align='left'>

<nobr>Membership Application</nobr>

</td>

</tr>

</table>

</td>

</tr>

<tr style='display:none; visibility:hidden'>

<td>

<span style="display:none" id="ctl00_UltraWebMenu1" name="ctl00_UltraWebMenu1"></span>

<input type="hidden" id="ctl00$UltraWebMenu1" name="ctl00$UltraWebMenu1" value=""> </td>

</tr>

</table>

</div>

All images are available in the Images folder, and all of them render correctly except for the separator image. As you can see from the above HTML, no markup whatsoever is rendered for the separator item, so the problem cannot be with the image being unavailable.

My suspicion is that the functionality I am trying to use is simply not supported. None of the menu samples on Infragistics's web site appear to use separators in this way. However, the application I am developing needs to support separators, so I will have to use the more basic ASP menu control if Infragistics cannot support them.

Thanks in advance for any advice.

Ken

  • 120
    posted

    Hey guys,

    Just in case anyone else was trying to do this, I accomplished my goal in the following way:

    1. Create a top-level item. Leave the Separator property set to false and set the Text property to &nbsp;. Also set Enabled to false.
    2. Give the item a CssClass.
    3. In the item's CssClass, set the background-image property. Also set the following:
      1. background-repeat: no-repeat;
      2. background-position: center;

    That's how I create top-level separators.

    Ken