Event in React Speed dial component

30 Jan 20239 minutes to read

This section explains the Speed Dial events that will be triggered when appropriate actions are performed.

clicked

The SpeedDial component triggers the clicked event with SpeedDialItemEventArgs argument when an action item is clicked. You can use this event to perform the required action.

import { SpeedDialComponent, SpeedDialItemModel, SpeedDialItemEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* Initialize action items. */}
function App() {

  const items: SpeedDialItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];

  function itemClick(args:SpeedDialItemEventArgs){
    //Your required action here
  }

  return (
    {/* Initialize the SpeedDial component */}
    <SpeedDialComponent id='speeddial' items={items} content='Edit' clicked={ itemClick }></SpeedDialComponent>
  );
}
export default App;

created

The Speed Dial component triggers the created event when SpeedDial component rendering is completed.

import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* Initialize action items. */}
function App() {

  const items: SpeedDialItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];

  function created(){
    //Your required action here
  }

  return (
    {/* Initialize the SpeedDial component */}
    <SpeedDialComponent id='speeddial' items={items} content='Edit' created={ created }></SpeedDialComponent>
  );
}
export default App;

beforeOpen

The SpeedDial component triggers the beforeOpen event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is opened.

import { SpeedDialComponent, SpeedDialItemModel, SpeedDialBeforeOpenCloseEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* Initialize action items. */}
function App() {

  const items: SpeedDialItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];

  function beforeOpen(args:SpeedDialBeforeOpenCloseEventArgs){
    //Your required action here
  }

  return (
    {/* Initialize the SpeedDial component */}
    <SpeedDialComponent id='speeddial' items={items} content='Edit' beforeOpen={ beforeOpen }></SpeedDialComponent>
  );
}
export default App;

onOpen

The SpeedDial component triggers the onOpen event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is opened.

import { SpeedDialComponent, SpeedDialItemModel, SpeedDialOpenCloseEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* Initialize action items. */}
function App() {

  const items: SpeedDialItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];

  function onOpen(args:SpeedDialOpenCloseEventArgs){
    //Your required action here
  }

  return (
    {/* Initialize the SpeedDial component */}
    <SpeedDialComponent id='speeddial' items={items} content='Edit' onOpen={ onOpen }></SpeedDialComponent>
  );
}
export default App;

beforeClose

The SpeedDial component triggers the beforeClose event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is closed.

import { SpeedDialComponent, SpeedDialItemModel, SpeedDialBeforeOpenCloseEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* Initialize action items. */}
function App() {

  const items: SpeedDialItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];

  function beforeClose(args:SpeedDialBeforeOpenCloseEventArgs){
    //Your required action here
  }

  return (
    {/* Initialize the SpeedDial component */}
    <SpeedDialComponent id='speeddial' items={items} content='Edit' beforeClose={ beforeClose }></SpeedDialComponent>
  );
}
export default App;

onClose

The SpeedDial component triggers the onClose event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is closed.

import { SpeedDialComponent, SpeedDialItemModel, SpeedDialOpenCloseEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* Initialize action items. */}
function App() {

  const items: SpeedDialItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];

  function onClose(args:SpeedDialOpenCloseEventArgs){
    //Your required action here
  }

    return (
      {/* Initialize the SpeedDial component */}
      <SpeedDialComponent id='speeddial' items={items} content='Edit' onClose={ onClose }></SpeedDialComponent>
    );
}
export default App;

beforeItemRender

The SpeedDial component triggers the beforeItemRender event with SpeedDialItemEventArgs argument for each SpeedDialItem once it is rendered.

import { SpeedDialComponent, SpeedDialItemModel, SpeedDialItemEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* Initialize action items. */}
function App() {

  const items: SpeedDialItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];

  function beforeItemRender(args:SpeedDialItemEventArgs){
    //Your required action here
  }

  return (
    {/* Initialize the SpeedDial component */}
    <SpeedDialComponent id='speeddial' items={items} content='Edit' beforeItemRender={ this.beforeItemRender=this.beforeItemRender.bind(this) }></SpeedDialComponent>
  );
}
export default App;

Below example demonstrates the clicked event of the Speed Dial component.

import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
{ /* Initialize action items. */ }
function App() {
    const items = [
        { text: 'Cut' },
        { text: 'Copy' },
        { text: 'Paste' }
    ];
    function itemClick(args) {
        alert(args.item.text + " is clicked");
    }
    return (<div>
      <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
      {/* Initialize the SpeedDial component */}
      <SpeedDialComponent id='speeddial' items={items} content='Edit' target='#targetElement' clicked={itemClick}></SpeedDialComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { SpeedDialComponent, SpeedDialItemModel, SpeedDialItemEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{/* Initialize action items. */}
function App() {

  const items: SpeedDialItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];

  function itemClick(args:SpeedDialItemEventArgs){
    alert(args.item.text + " is clicked")
  }

  return (
    <div>
      <div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
      {/* Initialize the SpeedDial component */}
      <SpeedDialComponent id='speeddial' items={items} content='Edit' target='#targetElement'  clicked={ itemClick }></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));