Toolbar shows at demo but other

[walker1234Participant]

I have this demo where rendertoolbar is showing properly

Demo #1: Toolbar Rendering properly

https://stackblitz.com/edit/react-ts-wv4ahu?file=index.tsx

However, in this demo, where I’ve two grids, it’s not showing for some reason. What’s wrong with the code?

Demo #2: Toolbar not rendering at all

https://stackblitz.com/edit/react-ts-jmhkfn

[MartinParticipant]

Hello walker1234,

In the second example you have missed to set the showtoolbar property of the grids to ‘true’.
I have updated your Example.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[walker1234Participant]

Thanks. Is there a way I could hide other button(s) on the toolbar if I’m in a particular tab and grid? OR maybe completely make other tabs disappear. Please feel free to modify the following example:

https://stackblitz.com/edit/react-ts-eat5px

I’m going to have 9 grids and it may confuse user if they see all buttons active on the toolbar.

For example, if I’m in US Indexs tab, I would maybe want to keep only Add New US Index button active and may disappear or make inactive other button(s).

Thanks

[MartinParticipant]

Hello walker1234,

One option is to extend the state interface and use two different rendertoolbar methods, if you don’t need the second button at all in the first grid.
You can see this Example.

Another way is to hide or disable the button when the grid in the first tab is rendered.
You can check this Example.

Or you can just use css for hiding the button.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[walker1234Participant]

In your first option example (to extend the state interface and use two different rendertoolbar methods), it’s still showing Add New US Index button when I click on second tab. Could you tell me why?

https://stackblitz.com/edit/react-ts-s1d169?file=index.tsx

Q2: Same is the case with your second example as well. Could you take a look at it as well?

https://stackblitz.com/edit/react-ts-pxmxks?file=index.tsx

Q3. Could you give an example of css for hiding other tool bar buttons except one (the tab I’m viewing).

Thanks

[MartinParticipant]

Hello walker1234,

In the first example two rendertoolbar methods are used. You can remove the first button from the rendertoolbar method for the second grid, if you wish.
Here is an Example.

For the second example you could also hide the button in initGrid2 render’s method callback.
Here is an Example.

Here is also an Example of using css. Please, note that you need to import the css file in your component (tsx file).

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[walker1234Participant]

I used the first approach

https://stackblitz.com/edit/react-ts-6u1ad1?file=index.tsx

But I didn’t use this feature in my code and it still works:

private onTabSelected = (event: any) => {
    switch (event.args.item) {
      case 0:
       // this.hideButton();
        break;
      case 1:
      //  this.showButton();
        break;
    }
  };

Could you tell me what’s the significance of using this in the example you mentioned?

Thanks

[MartinParticipant]

Hello walker1234,

You are right. You can remove this method. It is of no significance in the above example.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts