I encountered weird issue using Infragistics ASP.NET WebDataMenu control. If total width of top-level items was bigger than menu’s width and scrolling kicked in – Google Chrome browser produces unexpected results.

Consider following basic markup for Infragistics WebDataMenu:

<ig:WebDataMenu ID="WebDataMenu1" runat="server" Width="300px">
   <ClientEvents Initialize="myInit" />
   <GroupSettings Orientation="Horizontal" />
   <Items>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
   </Items>
</ig:WebDataMenu>

It’s a pretty basic markup that defines 10-item horizontal menu with a limited width, so scrolling is enabled. Code in the Initialize event handler would handle some calculation based on menu dimensions and other items on the page would be affected by these calculations. In this case for the example sake I put simple alert there:

function myInit() {
   alert(1);
}

When you run this code in Firefox or Internet Explorer, you would see what you expected – menu is formed with scrolling enabled prior to alert:

But if you run it in Chrome – you will see that menu pushed the container and becomes multiline:

If you click OK – menu finishes resizing to what you expect, but at this point its too late – whatever calculations performed based on menu dimensions are already wrong.

After digging a while I realized that in Chrome and only in Chrome for some reason when menu Initialize event fires – menu hasn’t finished initializing yet. So the solution is to put code that uses the menu dimensions (or in our case – the test alert) into an event that happens long after. I tested it with window.load event and it seems to do the trick. Remove client event Initialize="myInit" in the above markup and add following to the JavaScript:

 $addHandler(window, 'load', function () {
   setTimeout(myInit, 1)
});

This fixes the code issue, but you still see a brief jump when menu resizes itself. The solution to this is to set height of the menu, this can be done via CSS if you don’t want to hardcode it. Add CssClass="topMenu" to the menu properties in the markup and following CSS to the page:

.topMenu {
   height:28px;
}

This combined with code above fixes the Chrome issue in WebDataMenu with scroll. Here’s complete markup with the solution:

<style type="text/css">
    .topMenu {
        height:28px;
    }
</style>

<ig:WebDataMenu ID="WebDataMenu1" runat="server" Width="300px" CssClass="topMenu">
    <GroupSettings Orientation="Horizontal" />
    <Items>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
    </Items>
</ig:WebDataMenu>

<script>
    function myInit() {
        alert(1);
    }

    $addHandler(window, 'load', function () {
        setTimeout(myInit, 1)
    });
</script>