Send arguments to template

[Eden Zadikove]

Hi,

I am trying to creat an <IteamDirective>  with a template property.

How can I send arguments to the template?

for example:

I would like to send the following arguments to "info" function- 

     1. arg "icon"

     2. arg "text"

In addition, is it possible to make a specific ItemDirective to float to the right corner of the toolbar?

BR,

Eden

export const info = () => {

    return (

        <IconBtnWrapper>

            <FontAwesomeIcon

                className="top-toolbar-icons-btn"

                onClick={handleClickInfo}

                icon={faInfoCircle} />

        </IconBtnWrapper>

    )

}

<ToolbarComponent id='top_toolbar'>

     <ItemsDirective>

          <ItemDirective template={edit} />

     </ItemsDirective>

</ToolbarComponent>

[Ravikumar Venkatesan]

Hi Eden, 

Greetings from Syncfusion support. 

We have validated your requirement “Send arguments to the template” at our end and achieved it with the help of the template property of the Toolbar items and you can align the toolbar items using align property, we have prepared a sample for your reference which can be available from the below link. 

[index.js] 

export const ToolbarItemTemplte = props => { 

  return (<div className="e-tbar-btn" title={props.text}> <span className={props.prefixIcon} /> </div>); 

}; 

 

export class Default extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.toolbarItems = [ 

      { text: "Cut", prefixIcon: "e-cut-icon tb-icons e-icons", align: "Left" }, 

      { text: "Copy", prefixIcon: "e-copy-icon tb-icons e-icons", align: "Left" }, 

      { text: "Paste", prefixIcon: "e-paste-icon tb-icons e-icons", align: "Left" }, 

      { text: "Underline", prefixIcon: "e-underline-icon tb-icons e-icons", align: "Right" }, 

      { text: "Italic", prefixIcon: "e-italic-icon tb-icons e-icons", align: "Right" }, 

      { text: "Bullets", prefixIcon: "e-bullets-icon tb-icons e-icons", align: "Right" } 

    ]; 

  } 

  render() { 

    return ( 

      <ToolbarComponent> 

        <ItemsDirective> 

          {this.toolbarItems.map(function (item, i) { 

            return (<ItemDirective align={item.align} template={ToolbarItemTemplte.bind(this, item)} key={i}/>); 

          })} 

        </ItemsDirective> 

      </ToolbarComponent> 

    ); 

  } 

} 

 

render(<Default />, document.getElementById("sample")); 

Sample: https://stackblitz.com/edit/ej2-react-toolbar-item-template-sample-7oz1ds?file=index.js 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Eden Zadikove]

Thank you so much!

this is excatly what I was looking for!

BR,

Eden

[Nevitha Ravi]

Hi Eden, 

You are most welcome..! We are glad that our provided solution helps you, please get back to us for further assistance. 

Regards, 

Nevitha