React
Demos
Support
Forum
Download
Search results

Set item wise custom template

The Toolbar supports adding template commands using the template property. Template property can be given as the HTML element that is either a string or a query selector.

As string

The HTML element tag can be given as a string for the template property. Here, the checkbox is rendered as a HTML template.

template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"

As selector

The template property also allows getting template content through query selector. Here, checkbox ‘ID’ attribute is specified in the template.

template: "#Template"
Source
Preview
index.jsx
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
class ReactApp extends React.Component {
    render() {
        return (<ToolbarComponent>
            <ItemsDirective>
              <ItemDirective text="Cut"/>
              <ItemDirective type="Separator"/>
              <ItemDirective text="Paste"/>
              <ItemDirective type="Separator"/>
              <ItemDirective template="<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"/>
              <ItemDirective text="Undo"/>
              <ItemDirective text="Redo"/>
              <ItemDirective template="#Template"/>
            </ItemsDirective>
           </ToolbarComponent>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Tooltip } from '@syncfusion/ej2-popups';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';

class ReactApp extends React.Component<{}, {}> {
  render() {
       return (
           <ToolbarComponent >
            <ItemsDirective>
              <ItemDirective text="Cut" />
              <ItemDirective type="Separator"/>
              <ItemDirective text="Paste"/>
              <ItemDirective type="Separator"/>
              <ItemDirective template="<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"/>
              <ItemDirective text="Undo"/>
              <ItemDirective text="Redo"/>
              <ItemDirective template="#Template"/>
            </ItemsDirective>
           </ToolbarComponent>
       );
  }
}
ReactDOM.render(<ReactApp/>, document.getElementById("toolbar"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Toolbar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .custom_bold .e-tbar-btn-text {
            font-weight: 900;
        }

        .custom_italic .e-tbar-btn-text {
            font-style: italic;
        }

        .custom_underline .e-tbar-btn-text {
            text-decoration: underline red;
        }

        .e-txt-casing .e-tbar-btn-text {
            font-variant: small-caps;
        }

        .e-tbar-btn .e-icons {
            font-family: 'Material_toolbar';
            font-size: 16px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
        }
    </style>
</head>

<body>
    <button id='Template' class='e-btn'>Template</button>
    <div id='toolbar'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Previous
Next