ejs-toolbar items property not working properly

[Planful]

Hi team

Concern refernence link: https://stackblitz.com/edit/angular-rnjljp?file=app.component.ts

Here I want to give custom click event to toolbar items. But getting following error when click:

ERROR TypeError: eventObj.next is not a function

    at ToolbarComponent.push.HJ9Y.ComponentBase.trigger (component-base.js:308)

    at ToolbarComponent.clickHandler (ej2-navigations.es2015.js:3696)

    at ZoneDelegate.invokeTask (zone-evergreen.js:399)

    at Object.onInvokeTask (core.js:28578)

    at ZoneDelegate.invokeTask (zone-evergreen.js:398)

    at Zone.runTask (zone-evergreen.js:167)

    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

    at invokeTask (zone-evergreen.js:1621)

    at HTMLElement.globalZoneAwareCallback (zone-evergreen.js:1647)

Please check and respond ASAP

Thanks

[Satheesh Kumar Balasubramanian]

Hi Razvi, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "ejs-toolbar items property not working properly" and suggest you to bind click event in e-item tag helper instead of binding click in item collection to resolve the reported issue. For the same we have modified the sample which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/angular-toolbar-item-click?file=app.component.html  

  

app.component.html:      

        <ejs-toolbar> 

            <e-items> 

                <e-item text='icn-back' align='Left' (click)='iconClick($event)'></e-item> 

                <e-item text='Edit Approval Role' align='Left'></e-item> 

            </e-items> 

        </ejs-toolbar> 

  

app.component.ts:      

  public iconClick(e: ClickEventArgs) { 

    alert(e); 

  } 

  

Kindly try the above sample and let us know if this meets your requirement. If you still want to bind click in item collection, please share the details why you want to bind click in item collection? 

  

Regards, 

Satheesh Kumar B 

[Planful]

HI team,

I have some requirement due to which I need to give detail in json format.

Can you suggest me what wrong in my implementation. 

Thanks Team

[Planful]

HI Team

Any update on this issue?

Thanks

[Satheesh Kumar Balasubramanian]

Hi Razvi,

Sorry for the inconvenience. 

We have checked your reported problem at our end and let you know that we could reproduce it. So, we will validate the cause of the problem and will update the further details on September 17, 2021. We appreciate your valuable patience until then. 

Regards, 

Satheesh Kumar B

[Planful]

HI Team

is there any update on this ticket?

Thanks

[Planful]

HI team,

Is there any update regarding my issue?

Thanks
Ankit

[Satheesh Kumar Balasubramanian]

Hi Razvi, 

  

Sorry for the inconvenience. 

  

We have checked the reported issue, this way is not approachable for our component structure. You have to use e-items as updated in the previous update to resolve the issue. 

  

Please let us know if you have any concerns. 

  

Regards, 

Satheesh Kumar B 

[Planful]

HI  Satheesh Kumar B ,

That is not an option for us. In documentation syncfusion have option to add items in json format.
We only want to use this option. Please help us use this option.

Thanks

[Planful]

Any updates regarding this issue ?

[Satheesh Kumar Balasubramanian]

Hi Razvi, 

  

Sorry for the inconvenience. 

  

As mentioned earlier, in angular platform using e-item is the proper way. So, we suggest you to use ngFor to form the toolbar items using json format to resolve the reported issue. For the same we have modified the sample which can be viewed from the following link. Also, we let you know that we have not used json format to render toolbar items in angular documentation and sample browsers as in your shared example. 

  

Sample: https://stackblitz.com/edit/angular-toolbar-item-json-click?file=app.component.html 

Sample Browser: https://ej2.syncfusion.com/angular/demos/#/material/toolbar/default 

UG: https://ej2.syncfusion.com/angular/documentation/toolbar/getting-started/ 

  

app.component.html:   

<div class="control-section e-tbar-section"> 

  <div class="e-sample-resize-container"> 

    <!-- Render the Toolbar Component --> 

    <ejs-toolbar> 

      <e-items> 

        <e-item 

          *ngFor="let m of toolbarItems" 

          [text]="m.text" 

          [align]="m.align" 

          (click)="m.click($event)" 

        ></e-item> 

      </e-items> 

    </ejs-toolbar> 

  </div> 

</div> 

  

Kindly try the above sample and let us know if this works at your end. If you still face any problem, please share what are the problems at your end to use ‘e-items’ tag to validate and provide proper solution. 

Regards, 

Satheesh Kumar B 

[Planful]

HI Team

Can you explain what is role of "items" property in ejs-toolbar in angular platform. And what type of data we can send using "items" property. And how to use click property which has been described here:https://ej2.syncfusion.com/angular/documentation/api/toolbar/itemModel/.
And Please create example using "items" property.

Please check the documentation for reference
https://ej2.syncfusion.com/angular/documentation/api/toolbar/#items

Thanks

[Satheesh Kumar Balasubramanian]

Hi Razvi,

Sorry for the inconvenience.

As per your request, we have created the example using items property and suggest you use toolbar's clicked event instead of items click property to resolve the reported issue. 

Sample: https://stackblitz.com/edit/angular-item-click-issue?file=app.component.html

app.component.html:      

<div class="control-section e-tbar-section">

  <div class="e-sample-resize-container">

    <!-- Render the Toolbar Component -->

    <ejs-toolbar [items]="toolbarItems" (clicked)="toolbarClicked($event)">

    </ejs-toolbar>

  </div>

</div>

  

app.component.ts:      

  public toolbarClicked(e: ClickEventArgs) {

    if (e.item.id == 'Icon Back') {

      alert('Icon Back Clicked');

    } else if (e.item.id == 'Edit Approval Role') {

      alert('Edit Approval Role Clicked');

    }

  }

  public toolbarItems = [

    {

      text: 'icn-back',

      id: 'Icon Back',

      align: 'Left',

    },

    {

      text: 'Edit Approval Role',

      id: 'Edit Approval Role',

      align: 'Left',

    },

  ];

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

Regards,

Satheesh Kumar B