Wijmo Multiple Tabs - Highlight particular tab on data load

Wijmo Multiple Tabs - Highlight particular tab on data load

Posted by: saisreeja.gadi on 21 October 2023, 5:56 pm EST

• 

  saisreeja.gadi

  • Post Options:
  • Link
    Copy

  Posted 21 October 2023, 5:56 pm EST - Updated 21 October 2023, 6:03 pm EST

  Hi,

  

  1001×497 11 KB

  In the above image. I have nodes in the left hand side. I have multiple tabs in the right hand side. we have grid as response in every tab.

  When we click on particular node I need to display the respective grid in the respective tab by calling API. I can able to get the grids in the tabs.

  But when I click on any node. Everytime first tab is getting highlighted in the multiple tabs. I need to highlight the tab based on what I clicked in the left hand side.

  In the below code I am getting index dynamically also (i.e., getting index as 0,1,2…) But that tab will not getting highlighted. Everytime first tab is getting highlighted. View is not getting updated

  <wj-tab-panel #pTabPanel (initialized)="tabInit(pTabPanel)" [selectedIndex]="getting index dynamically">
   <wj-tab *ngFor="let tab of tabsInfo">
  <a>{{tab.header}}</a>
  <wj-flex-grid #flexGrid [isReadOnly]="true" [itemsSource]="tab.data" (initialized)="flexGrid.autoSizeColumns(); flexInitialized(flexGrid)">
  </wj-flex-grid>
   </wj-tab>
   </wj-tab-panel>

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 22 October 2023, 9:35 pm EST

  Hi,

  To select a particular tab in the TabPanel, please pass the index to the selectedIndex property of the TabPanel. You need to handle the selectedItemChanged property of the TreeView and set the selected index accordingly.

  We are able to successfully change the selected tab on our end by using the selectedIndex property. In case, if you are facing an issue even after using this property then please share a working sample replicating the issue. You may also modify the attached sample such that it replicates the issue.

  Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-4qspg6

  Regards
  
  Anirudh