Dynamic toolbar

[Hussain]

Hi,

Basic scenario is:

I want the toolbar to be dynamic, so, when navigating to different component the toolbar should change.

For example: 

- HomeComponent: 

will have in toolbar: search box.

- UserComponent:

will have in toolbar: create user button, filter users list dropdown.

-> The toolbar will be placed in NavigationComponent. Is this possible? Example will help. 

Thanks.

[Keerthana Rajendran]

Hi Hussain, 

 

Thank you for contacting Syncfusion support. 

 

We have prepared a sample with search bar in home component and create user button with dropdown in user component. Please download the sample from 

 

http://www.syncfusion.com/downloads/support/forum/133215/ze/Navigation-407571345 

 

On switching home tab , search bar will be displayed and on clicking toolbar in the above sample create user button toolbar will be displayed. If we have misunderstood your requirement , please provide us some clear details on your requirement so that we can provide sample accordingly. 

 

Also , please check whether you require the toolbar functionality as such in the below link 

 

http://ng2jq.syncfusion.com/#/toolbar/default;theme=bootstrap 

 

Clicking a button on first toolbar will load items in second one. Please confirm whether this is your requirement so that we can proceed further. 

 

Regards, 

Keerthana. 

[Hussain]

Hi Keerthana,

It's not what I want exactly. Let's apply the scenario on your sample app:

- In app component, you've navigation links for Home & Toolbar components.

What I want is:

when you click on home link, you will show the toolbar items related to home component at the far right of the app component, and when you click on the toolbar link, you will get the toolbar items related to toolbar component at that same location.

Please see the screenshots to get clear understanding:

This is when you click home:

And this is when you click Toolbar:

[Ilakkiya Baskar]

Hi  Hussain, 

Thank you for contacting Syncfusion Support.  

Response: We suggest you to use display property of style attribute to show the toolbar items related to home component at the far right of the app component. We suggest you to change the display property to none for disappearance of the inappropriate toolbar items. 

 

<div id="fileExplorerSearchbar" style="float:right;padding-top:10px" [style.display]="search"> 

              <input class="e-searchBar e-tool-input"  type="text" placeholder="Search"> 

</div> 

 

<div style="float:right;padding-top:10px" [style.display]="ddl" width="50%"> 

                             <input id="bookSelect" ej-dropdownlist [dataSource]="data" [fields]="fieldsvalues"   [(value)]="value" /> 

</div> 

 

<div style="float:right;padding-top:10px" [style.display]="button"> 

                             <input type="button" ej-button id="button" value="create" size="small" /> 

</div> 

 

 

We have attached a sample for your reference. Please download the sample from the below link     

     

Sample:  

http://www.syncfusion.com/downloads/support/forum/133215/ze/Incident-1899791349918571 

 

Regards  

Ilakkiya.B 

[Hussain]

I could do that, but it is not dynamic solution I'm afraid. If we've many components, let's say 10 and each component have different actions in the toolbar, then the code won't be minimal. I'm looking for a way like having separate toolbar component per component and dynamically inject that toolbar component.

[Prince Oliver]

Hi Hussain, 

You can have a <div> element in the toolbar area and render different toolbar in each page. Using the OnInit, we can append the toolbar component in that page in to the toolbar area. Hence, the toolbar will be varied based on the page. Refer to the following code. 

[HTML] 

<ej-toolbar   id="toolbarJson" > 

        <table> 

            <tr> 

            <td> 

            <div> 

                    <ej-togglebutton type="checkbox" id="togglebutton2" contentType="textandimage" defaultText="Play" size="mini" activeText="Pause" ></ej-togglebutton> 

            </div> 

            </td> 

            <td id="Dropdown" title="Dropdown Control"> 

                <input id="bookSelect" ej-dropdownlist [dataSource]="data" [fields]="fieldsvalues" width="100%" [(value)]="value"/> 

             

            </td> 

            </tr> 

        </table> 

    </ej-toolbar> 

[TS] 

ngOnInit() { 

    var tool = document.getElementById("tool"); 

    tool.innerHTML = ""; 

    var toolbar = document.getElementById("toolbarJson"); 

    tool.appendChild(toolbar); 

} 

  

We have prepared a sample for your convenience, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/133215/ze/toolng2359483733 

Regards, 

Prince