Sidebar menu

Sidebar menu

Posted by: ylipkin on 15 April 2020, 11:48 am EST

• 

  ylipkin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 April 2020, 11:48 am EST - Updated 3 October 2022, 4:41 pm EST

  Hi,
  
  What control could i use to create sidebar menu(please see attachment)
  
  Requirements: on click on the top level (no child/items) provide some action

  I was trying tabPanel (attachment show tabPanel as a side menu). Looks good but i found some tabPanel limitations for my scenario:

  1. for complex tab area with big chunk of database data tabPanel loaded/reloaded all tab at once at any get/post action.
  2. always load tab 0 on page load. I create separated page instead of each tab with the visually identical tabPanel on each. When i try to make specific tab as active it’s come back to tab 0 and as a result load page 0.

      var theTabPanel = new wijmo.nav.TabPanel('#theTabPanel', {
          selectedIndexChanged: function (s, e) {
  
              alert('current_profile_step   ' + current_profile_step);
              alert('selectedIndex   ' + s.selectedIndex);
  
              DefaultTabImage();
              ActiveTabImage(s.selectedIndex);
  
              //if (current_profile_step != s.selectedIndex) {
              switch (s.selectedIndex) {
                  case 0:
                      window.location.href = currentDomain + "Shared/UserProfile_Info";
                      break;
                  case 1:
                      window.location.href = currentDomain + "Shared/SupplierProfile_CorpAddress";
                      break;
                  case 2:
                      window.location.href = currentDomain + "Shared/SupplierProfile_Contacts";
                      break;
                  case 3:
                      window.location.href = currentDomain + "Shared/SupplierProfile_Services";
                      break;
                  case 4:
                      window.location.href = currentDomain + "Shared/SupplierProfile_Insurance";
                      break;
                  case 5:
                      window.location.href = currentDomain + "Shared/SupplierProfile_Sertification";
                      break;
                  default:
                  // code block
              }
  
              //current_profile_step = s.selectedIndex
              //}
          },
      });
      //current_profile_step = 4;
      theTabPanel.selectedIndex = parseInt(current_profile_step);
      DefaultTabImage();
      ActiveTabImage(theTabPanel.selectedIndex);
  
  

  Also, test Menu and TreeView. For both didn’t find how to handle top level click on header. It’s look like both work on items click event. For menu i’m pretty sure l’m mistaken. Menu suppose to work even without child items.

  

  913×825 60.8 KB

• 

  ylipkin

  • Post Options:
  • Link
    Copy

  Posted 15 April 2020, 11:56 am EST

  I afraid, i was not quit clear. Basically, I’m looking to mimic tabPanel capability with Menu or prevent automatic reloading to tab 0. For each web page var current_profile_step is hard coded and equal to corresponded tab Index. I did it to show what tab is active for current page after page loaded.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 April 2020, 8:55 am EST

  Hi,

  Menu and TreeView will not be suitable for your requirements. The best control is the TabPanel for this requirement. It seems that your main issue is that the TabPanel always loads with the 0 tab index.
  
  Can you please try to provide the selectedIndex while initializing the TabPanel like this:

  var theTabPanel = new wijmo.nav.TabPanel('#theTabPanel', {
  	selectedIndex: 4,
  	selectedIndexChanged: { ... }
  }
  

  Regards,
  
  Ashwin

• 

  ylipkin

  • Post Options:
  • Link
    Copy

  Posted 16 April 2020, 7:28 pm EST

  Hi,

  Adding row

  selectedIndex: current_profile_step, 

  create recursion. tabPanel constantly fire selectedIndexChanged event. I think that selectedIndexChanged not right event to actually change selectedIndex. Using ```
  
  window.location.href

  
  It's look like i need to use some kind of click event to use my Switch code. 
  
  Searched wijmo API and didn't find any on click event for any of NAV controls. Am i right?
  
  Out of desperation i start thinking to use styled version of List or Grid. Although, would be better to use something more suited for the task.
  
  I clean code from some leftovers what i didn't notes before. 
  Difference from page to page should be only:
  1. value of current_profile_step equal to corresponded tab index for loaded page
  2. HTML code stays in the corresponded tab panel for loaded page
  

  var current_profile_step = 1;
  
  var theTabPanel = new wijmo.nav.TabPanel(‘#theTabPanel’, {
  
  selectedIndexChanged: function (s, e) {

          //create recursion
          //selectedIndex: current_profile_step,
  
          //alert('current_profile_step   ' + current_profile_step);
          //alert('selectedIndex   ' + s.selectedIndex);
  
          switch (s.selectedIndex) {
              case 0:
                  window.location.href = currentDomain + "Shared/SupplierProfile_Info";
                  break;
              case 1:
                  window.location.href = currentDomain + "Shared/SupplierProfile_CorpAddress";
                  break;
              case 2:
                  window.location.href = currentDomain + "Shared/SupplierProfile_Contacts";
                  break;                
              default:
              // code block
          }
      },
  });
  // also create recursion
  //theTabPanel.selectedIndex = parseInt(current_profile_step);
  

  
  Coming back to Menu. Is it really not supported click on  header: 'File' ? 
  It's a very common for menu to not have any sub menus. If this event actually supported then i could style menu to my needs.     
  

  let menuFile = new input.Menu(‘#menu-file’, {
  
  header: ‘File’,
  
  displayMemberPath: ‘header’,
  
  subItemsPath: ‘items’,
  
  openOnHover: true,
  
  isAnimated: true,
  
  itemsSource: menuTree.fileMenu,
  
  itemClicked: (sender) => {
  
  target.innerHTML =

  Thank you for clicking [b][i]${sender.text}[/i][/b]!

  ;
  
  }
  
  });

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 April 2020, 9:16 am EST

  Hi,

  I will try to mimic your sample and will update you as soon as possible.

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 April 2020, 11:40 pm EST

  Hi,

  Please refer to the sample attached. In this sample, I have tried to mimic your requirements. Instead of adding the selectedIndexChanged while initializing the TabPanel, I have added it after initializing.

  Regarding the Menu control, only hierarchical menus are supported. If you will add itemsSource to the Menu without the sub items, if will automatically create drop-down menu.

  ~regards

  tabpanel_multiplepage.zip

• 

  ylipkin

  • Post Options:
  • Link
    Copy

  Posted 20 April 2020, 12:48 am EST

  Hi,
  
  Thank you for the sample. Work like a charm.
  
  Use selectedIndex: and selectedIndexChanged in two separated events was excellent idea.
  
  I’m closing this topic. Really appreciate your help.