ActiveWidgets • DHTML menus

Are there any plans to implement DHTML menus in AW in future release?. It would be very nice to have a toolbar on top of the grid that serves as a container for different methods in the grid. For example, a file menu, edit menu, etc. (like in excel).

Yes, I agree - the menu/toolbars would be a good addition, probably as a separate script to keep the grid code size as small as possible.

I included the Dynach menus (http://www.dynarch.com/products/dhtml-menu/) on top of an extended grid and they look nice. However, I found two issues that perhaps are related to the refresh function of the grid.

1. When I mouse over the menu, the header disappears
2. When I sort the table the style for the menu is lost and therefore the functionality is gone.

Any suggestions?

I am including the code but you need to register and download the Dynarch DHTML menus in order to see the problem.

<html>



  <head>

    <title>ActiveWidgets</title>

    <script src="ActiveWidgets/runtime/lib/aw.js"></script>

    <script src="DynarchMenu/hmenu-2.9/src/hmenu.js"></script>

    <link href="ActiveWidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>

    <link href="DynarchMenu/hmenu-2.9/src/skin-xp-extended.css" rel="stylesheet"></link>

  </head>



  <body onload="DynarchMenu.setup('menu', { electric: 1000, timeout: 0 });">



    <script>



      var obj = new AW.Grid.Extended;

      obj.setCellText(function(i, j){return j + "." + i});

      obj.setHeaderText("header");

      obj.setColumnCount(10);

      obj.setRowCount(100);

      obj.setCellEditable(true);



      var toolbar = new AW.HTML.DIV;

      toolbar.setId("toolbar");

      toolbar.setContent("mytoolbar", "<ul id='menu'><li>_File<ul><li>_Open</li><li>_Save</li></ul></li><ul>");



      obj.defineTemplate("toolBar", toolbar);



      var panel = new AW.Panels.Horizontal;

      panel.changePanelHeight(25, "top");

      

      obj.setLayoutTemplate(panel);

      

      obj.setPanelTemplate(function(i){

          switch(i){

              case "top"   : return this.getToolBarTemplate();

              case "center": return this.getScrollTemplate();

              case "bottom": return '';

          }

      });



      document.write(obj);



    </script>





  </body>



</html>

Ok . It is fixed. I just needed to overwrite the refresh function.

// save the original method

 obj.refresh1 = obj.refresh; 

 obj.refresh = function(){

   obj.refresh1();

   // Initialize the menus

  DynarchMenu.setup('menu', { electric: 1000, timeout: 0 });

}

So also I don't need the onload event in the body either.

DHTML menus

Post a reply:

Forum search