Creating Submenu using Knockout and wjMenu

Creating Submenu using Knockout and wjMenu

Posted by: j.puetz on 5 August 2020, 7:58 am EST

• 

  j.puetz

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 August 2020, 7:58 am EST

  Hi!
  
  I am trying to add (dynamic) sub menus to my Wijmo Menu Component, but I am not able to display the sub menus.
  
  I had created the menu component with some help from here. (https://www.grapecity.com/forums/wijmo/using-flexgrid-and-context
  
  )

  This is my current menu definition:

  <!-- ko with: menuViewModel -->
      <div id="contextmenu"
          data-bind="wjMenu: { 
              initialized: initMenu,
              itemClicked: contextMenu,
              header: 'File', 
              subItemsPath: 'items',
          }"
          style="display: none"></div>
  <!-- /ko -->
  

  In the initMenu function I add the menu items now like this:

  const menuItems = getMyMenuItems();
  menuItems.forEach((menuItem, index) => menu.itemsSource[index] = menuItem)
  menu.itemsSource.length = menuItems.length;
  

  menuItems looks like this:

  [
     {
        "header":"Löschen",
        "value":"delete"
     },
     {
        "header":"Submenu",
        "value":"with_submenu",
        "items":[
           {
              "header":"test",
              "value":"sub_test"
           },
           {
              "header":"test2",
              "value":"sub_test2"
           }
        ]
     }
  ]
  

  I am wondering if I am doing anything wrong, because it does show both top level entries, but no sub menu for the 2nd entry.

  I also tried removing the value of the 2nd entry, but then the menu only shows the first entry.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 August 2020, 8:14 pm EST

  Hi Janis,

  We are sorry but we were unable to replicate the issue at our end. Please refer to the sample link below that we used to replicate the issue:

  https://stackblitz.com/edit/js-y7ydkq

  Can you please let us know whether we are missing something in order to replicate the issue? You can also modify the above sample so that it replicates your issue.

  Regards,
  
  Ashwin

• 

  j.puetz

  • Post Options:
  • Link
    Copy

  Posted 6 August 2020, 6:32 am EST

  Hi Ashwin,

  thank you for the sample. It seems very helpful, but I was not able to reproduce my error there yet.

  One difference I found there, is that you also have wijmo.meta in package.json, although it is not imported in the js file.
  
  What is the purpose of wijmo.meta? Is that maybe needed? I tried importing it (with systemjs) in my project, but then I get a runtime error:

  Uncaught TypeError: e._registerModule is not a function
  <anonymous> http://localhost/lib/wijmo/Dist/interop/meta/wijmo.meta.min.js:14
  

  Another thing I noticed is that I dont have a wijmo.knockout.input module.
  
  The one I have is just called wijmo.knockout:

  "wijmo.knockout": "./lib/wijmo/Dist/interop/knockout/wijmo.knockout.js"
  

  So I think I am using the wijmo.knockout.all module. When I tried using that one in the sample instead, it did not show the context menu at all anymore.

  Regards,
  
  Janis

• 

  j.puetz

  • Post Options:
  • Link
    Copy

  Posted 6 August 2020, 7:27 am EST

  The reason it is not working, is because we are using an older version of wijmo, which didnt support sub menus yet.

  I found this topic about the implementation of sub menus:
  
  https://www.grapecity.com/forums/wijmo/how-to-add-submenu-using-m

  I will talk to my team lead whether we can update to a newer version, which supports the sub menus.

  Regards,
  
  Janis

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 August 2020, 3:41 pm EST

  Hi Janis,

  The wijmo.meta modules contains metadata information about each wijmo module like their properties, events etc. There is no need to install this package because it will automatically get installed if you will use knockout. Also, I have added the knockout module because I am using the modular version of knockout in the sample. If you are using CDN links for knockout and interop, then no need to install these packages.

  Also, I think wijmo.meta was added in the later versions. It may not be present in the version which you are using.

  Since, you found the reason for this issue, I am closing this ticket. Please feel free to ask if you face any issues while upgrading.

  ~regards