Add a component into left side of Tab Component

[Chris Dietz]

I'm looking to have a permanent menu control on the far left side of the tab component.  Along the lines of this, but with the icon moved in line with the tabs and always pinned left as part of the first tab.  Is there anyway to accomplish this?   The icon itself its a really a React component that creates a drop down menu so I can't just use the out of the box icon control

[Satheesh Kumar Balasubramanian]

Hi Chris,

 

We have prepared sample to add menu component in first tab header.

 

https://stackblitz.com/edit/react-tab-menu-header-text?file=index.html

 

index.js:   

         function tabHeader1() {

      let menuItems = [

        {

          text: 'File',

          items: [

            { text: 'Open' },

            { text: 'Save' },

            { separator: true },

            { text: 'Exit' },

          ],

        },

      ];

      return (

        <div>

          <div>

            <div className="menu">

              <MenuComponent items={menuItems} />

            </div>

            <div className="header">Home</div>

          </div>

        </div>

      );

    }

 

index.css:   

.menu {

  width: 50%;

  float: left;

}

.header {

  width: 25%;

  float: right;

  padding-top: 13px;

}

 

Kindly try the above sample and let us know if this meets your requirement.

 

Regards,

Satheesh Kumar B

[Chris Dietz]

This is so very very close, however it breaks the Popover for responsive tabs if the screen is too small on launch.  The second you resize the browser, it fixes itself.   Launch the example you made note that there is no popover or scroller for overflow:

if I then tweak browser width a pixel it fixes itself

[Satheesh Kumar Balasubramanian]

Hi Chris,

 

You can use toolbar refreshOverflow method in tab created event to resolve the reported issue.

 

https://stackblitz.com/edit/react-tab-menu-header-text-ultfeo?file=index.js

 

index.js:   

  tabCreated() {

    var toolbarObj = document.querySelector('.e-tab-header').ej2_instances[0];

    toolbarObj.refreshOverflow();

  }

 

Could you please check the above sample and confirm whether the above solution resolves the problem at your end? 

Regards, 

Satheesh Kumar B

[Chris Dietz]

Thank you!

[Vengatesh Maniraj]

You are most welcome!!!