Syncfusion AI Assistant

How can I help you?

Template in React Mention component

21 Feb 202624 minutes to read

The Mention provides several options to customize suggestion list items, display values, and data loading indicators.

Item template

Customize the content of each list item using the itemTemplate property.

In the following example, list items are divided into two columns to display relevant data:

[Class-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
    fields = { text: "FirstName", value: "EmployeeID" };
    itemTemplate(data) {
        return (<span><span>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
    }
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} itemTemplate={this.itemTemplate} query={this.query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

export default class App extends React.Component<{}, {}> {

  private mentionTarget: string = '#mentionElement';
  private dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  private query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  private fields:Object  = { text: "FirstName", value: "EmployeeID" };
  private itemTemplate(data: any): JSX.Element {
    return (
    <span><span>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
    );
  }

  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} itemTemplate={this.itemTemplate} query={this.query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
    let fields = { text: "FirstName", value: "EmployeeID" };
    function itemTemplate(data) {
        return (<span><span>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
    }
    return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} itemTemplate={itemTemplate} query={query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

function App (){

  let mentionTarget: string = '#mentionElement';
  let dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  let query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  let fields:Object  = { text: "FirstName", value: "EmployeeID" };
  function itemTemplate(data: any): JSX.Element {
    return (
    <span><span>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
    );
  }

    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} itemTemplate={itemTemplate} query={query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>
    );
}

ReactDOM.render(<App />, document.getElementById('sample'));

Display template

Customize the display appearance of selected mention values using the displayTemplate property.

In the following example, the selected value displays combined text from FirstName and City fields, separated by a hyphen:

[Class-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
    fields = { text: "FirstName", value: "EmployeeID" };
    itemTemplate(data) {
        return (<span><span>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
    }
    displayTemplate(data) {
        return (<React.Fragment>
        <span>{data.FirstName} - {data.City}</span>
      </React.Fragment>);
    }
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} itemTemplate={this.itemTemplate} displayTemplate={this.displayTemplate} query={this.query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

export default class App extends React.Component<{}, {}> {

  private mentionTarget: string = '#mentionElement';
  private dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  private query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  private fields:Object  = { text: "FirstName", value: "EmployeeID" };
  private itemTemplate(data: any): JSX.Element {
    return (
    <span><span>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
    );
  }
  private displayTemplate(data: any): JSX.Element {
    return (
      <React.Fragment>
        <span>{data.FirstName} - {data.City}</span>
      </React.Fragment>
      );
  }
  
  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} itemTemplate={this.itemTemplate} displayTemplate={this.displayTemplate} query={this.query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
    let fields = { text: "FirstName", value: "EmployeeID" };
    function itemTemplate(data) {
        return (<span><span>{data.FirstName}</span><span className='city'>{data.City}</span></span>);
    }
    function displayTemplate(data) {
        return (<React.Fragment>
        <span>{data.FirstName} - {data.City}</span>
      </React.Fragment>);
    }
    return (<div id='mention_default'>
          <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag user'></div>
              </td>
            </tr>
          </table>
          <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} itemTemplate={itemTemplate} displayTemplate={displayTemplate} query={query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
        </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

function App() {

  let mentionTarget: string = '#mentionElement';
  let dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  let query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  let fields:Object  = { text: "FirstName", value: "EmployeeID" };
  function itemTemplate(data: any): JSX.Element {
    return (
    <span><span>{data.FirstName}</span><span className ='city'>{data.City}</span></span>
    );
  }
  function displayTemplate(data: any): JSX.Element {
    return (
      <React.Fragment>
        <span>{data.FirstName} - {data.City}</span>
      </React.Fragment>
    );
  }

    return (
        <div id='mention_default'>
          <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag user'></div>
              </td>
            </tr>
          </table>
          <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} itemTemplate={itemTemplate} displayTemplate={displayTemplate} query={query} sortOrder={'Ascending'} popupWidth={'250px'}></MentionComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('sample'));

No records template

Customize the popup list content when no data is found or no search matches exist using the noRecordsTemplate property.

[Class-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    dataSource = [];
    noRecordsTemplate = "<span class='norecord'> NO DATA AVAILABLE</span>";
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} noRecordsTemplate={this.noRecordsTemplate}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';

export default class App extends React.Component<{}, {}> {

private mentionTarget: string = '#mentionElement';
private dataSource :[] = [];
private noRecordsTemplate: string = "<span class='norecord'> NO DATA AVAILABLE</span>";

  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} noRecordsTemplate={this.noRecordsTemplate} ></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = [];
    let noRecordsTemplate = "<span class='norecord'> NO DATA AVAILABLE</span>";
    return (<div id='mention_default'>
          <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag user'></div>
              </td>
            </tr>
          </table>
          <MentionComponent dataSource={dataSource} target={mentionTarget} noRecordsTemplate={noRecordsTemplate}></MentionComponent>
        </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';

function App (){

  let mentionTarget: string = '#mentionElement';
  let dataSource :[] = [];
  let noRecordsTemplate: string = "<span class='norecord'> NO DATA AVAILABLE</span>";
  return (
        <div id='mention_default'>
          <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag user' ></div>
              </td>
            </tr>
          </table>
          <MentionComponent dataSource={dataSource} target={mentionTarget} noRecordsTemplate={noRecordsTemplate} ></MentionComponent>
        </div>
  );
}

ReactDOM.render(<App />, document.getElementById('sample'));

Spinner template

Display a custom loading spinner while data fetches for the suggestion list using the spinnerTemplate property:

[Class-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
    fields = { text: "FirstName", value: "EmployeeID" };
    spinnerTemplate() {
        return (<React.Fragment>
       <div className="spinner_loader"></div>
      </React.Fragment>);
    }
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} query={this.query} sortOrder={'Ascending'} spinnerTemplate={this.spinnerTemplate} popupWidth={'250px'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

export default class App extends React.Component<{}, {}> {

  private mentionTarget: string = '#mentionElement';
  private dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  private query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  private fields:Object = { text: "FirstName", value: "EmployeeID" };
  
  private spinnerTemplate(): JSX.Element {
    return (
      <React.Fragment>
       <div className="spinner_loader"></div>
      </React.Fragment>
    );
  }
  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} query={this.query} sortOrder={'Ascending'} spinnerTemplate={this.spinnerTemplate} popupWidth={'250px'}></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let query = new Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(10);
    let fields = { text: "FirstName", value: "EmployeeID" };
    function spinnerTemplate() {
        return (<React.Fragment>
       <div className="spinner_loader"></div>
      </React.Fragment>);
    }
    return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} query={query} sortOrder={'Ascending'} spinnerTemplate={spinnerTemplate} popupWidth={'250px'}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

function App () {

  let mentionTarget: string = '#mentionElement';
  let dataSource: DataManager = new DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
      adaptor: new ODataV4Adaptor,
      crossDomain: true
  });
  let query:Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(10);
  let fields:Object = { text: "FirstName", value: "EmployeeID" };
  
  function spinnerTemplate(): JSX.Element {
    return (
      <React.Fragment>
       <div className="spinner_loader"></div>
      </React.Fragment>
    );
  }

  return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} query={query} sortOrder={'Ascending'} spinnerTemplate={spinnerTemplate} popupWidth={'250px'}></MentionComponent>
      </div>
  );

}

ReactDOM.render(<App />, document.getElementById('sample'));