Search results

How to

Initialize ButtonGroup using UTIL function

Though, it is a CSS component for easy initialization of ButtonGroup createButtonGroup util function can be used.

To use createButtonGroup util function, SplitButton dependencies should be configured and it should be added in system.config.js.

Using createButtonGroup method, the Button options, selector, and cssClass is passed and the corresponding classes is added to the elements.

Create basic ButtonGroup

To create a basic ButtonGroup, the target element along with the button elements should be created and createButtonGroup is to be imported from ej2-splitbuttons.

For radio type ButtonGroup

To create a radio type ButtonGroup, the target element along with the input elements should be created with type radio.

For checkbox type ButtonGroup

Checkbox type ButtonGroup creation is similar to radio type ButtonGroup, instead the type of the input elements should be checkbox.

The following example illustrates how to create ButtonGroup using createButtonGroup function for basic, checkbox, and radio type behaviors.

Source
Preview
app.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { createButtonGroup } from '@syncfusion/ej2-splitbuttons';

// To render ButtonGroup using `util` function.
class App extends React.Component<{}, {}> {
  public componentDidMount(): void {
    createButtonGroup('#basic', {
        buttons: [
            { content: 'HTML' },
            { content: 'CSS' },
            { content: 'Javascript'}
        ]
    });

    createButtonGroup('#checkbox', {
        buttons: [
            { content: 'Bold' },
            { content: 'Italic' },
            { content: 'Undeline'}
        ]
    });

    createButtonGroup('#radio', {
        buttons: [
            { content: 'Left' },
            { content: 'Center' },
            { content: 'Right'}
        ]
    });
  }
  render() {
    return (
      <div>
        <h5>Normal behavior</h5>
        <div id='basic'>
          <button></button>
          <button></button>
          <button></button>
        </div>
        <h5>Checkbox type behavior</h5>
        <div id='checkbox'>
          <input type="checkbox" id="checkbold" name="font" value='bold' />
          <input type="checkbox" id="checkitalic" name="font" value='italic' />
          <input type="checkbox" id="checkunderline" name="font" value='underline' />
        </div>
        <h5>Radiobutton type behavior</h5>
        <div id='radio'>
          <input type="radio" id="radioleft" name="align" value='left'/>
          <input type="radio" id="radiomiddle" name="align" value='middle'/>
          <input type="radio" id="radioright" name="align" value='right'/>
        </div>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

If null value is passed in button options, then that particular button will be skipped from processing in createButtonGroup util function.

Create ButtonGroup with icons

ButtonGroup with icons can be achieved by using iconCss property of the Button component.

The following example illustrates how to create ButtonGroup with icons.

Source
Preview
app.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

// To render ButtonGroup with icons.
class App extends React.Component<{}, {}> {
  render() {
    return (
      <div>
        <div className='e-btn-group'>
          <ButtonComponent iconCss='e-icons e-left-icon'>HTML</ButtonComponent>
          <ButtonComponent iconCss='e-icons e-middle-icon'>CSS</ButtonComponent>
          <ButtonComponent iconCss='e-icons e-right-icon'>Javascript</ButtonComponent>
        </div>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Create ButtonGroup with rounded corner

The ButtonGroup with rounded corner has round edges on both side. In the ButtonGroup with rounded corner, e-round-corner class is to be added to the target element.

The following example illustrates how to create ButtonGroup with rounded corner.

Source
Preview
app.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

// To render ButtonGroup with rounded corner.
class App extends React.Component<{}, {}> {
  render() {
    return (
      <div>
        <div className='e-btn-group e-round-corner'>
          <ButtonComponent>HTML</ButtonComponent>
          <ButtonComponent>CSS</ButtonComponent>
          <ButtonComponent>Javascript</ButtonComponent>
        </div>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Enable RTL

ButtonGroup supports RTL functionality. This can be achieved by adding e-rtl class to the target element.

The following example illustrates how to create ButtonGroup with RTL support.

Source
Preview
app.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

// To render ButtonGroup with RTL.
class App extends React.Component<{}, {}> {
  render() {
    return (
      <div>
        <div className='e-btn-group e-rtl'>
          <ButtonComponent>HTML</ButtonComponent>
          <ButtonComponent>CSS</ButtonComponent>
          <ButtonComponent>Javascript</ButtonComponent>
        </div>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Disable

Particular button

To disable a particular button in a ButtonGroup, disabled attribute should be added to corresponding button element.

Whole ButtonGroup

To disable whole ButtonGroup, disabled attribute should be added to all the button elements.

The following example illustrates how to disable the particular and the whole ButtonGroup.

Source
Preview
app.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

// To disable single button/whole ButtonGroup.

class App extends React.Component<{}, {}> {
  render() {
    return (
      <div>
        <div className='e-btn-group'>
          <ButtonComponent>HTML</ButtonComponent>
          <ButtonComponent disabled>CSS</ButtonComponent>
          <ButtonComponent>Javascript</ButtonComponent>
        </div>
        <div className='e-btn-group'>
          <ButtonComponent disabled>HTML</ButtonComponent>
          <ButtonComponent disabled>CSS</ButtonComponent>
          <ButtonComponent disabled>Javascript</ButtonComponent>
        </div>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

To disable radio/checkbox type ButtonGroup, the disabled attribute should be added to the particular input element.

Enable ripple

Ripple can be enabled by importing enableRipple method from ej2-base and set enableRipple as true.

The following example illustrates how to enable ripple for ButtonGroup.

Source
Preview
app.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To enable ripple in ButtonGroup.
class App extends React.Component<{}, {}> {

  render() {
    return (
      <div>
        <div className='e-btn-group'>
          <ButtonComponent>HTML</ButtonComponent>
          <ButtonComponent>CSS</ButtonComponent>
          <ButtonComponent>Javascript</ButtonComponent>
        </div>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Form submit

The name attribute of the input element is used to group the radio/checkbox type ButtonGroup. When the radio/checkbox type are grouped in the form, the checked items value attribute will be posted to the server on form submit that can be retrieved through the name. The disabled radio/checkbox type value will not be sent to the server on form submit.

In the following code snippet, the radio type ButtonGroup is explained with male value as checked. Now, the value that is in checked state will be sent on form submit.

Source
Preview
app.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

// To render ButtonGroup in form.
class App extends React.Component<{}, {}> {

public componentDidMount(): void {
 document.getElementById('male').checked = true;
}
  render() {
    return (
      <div>
        <form>
        <div className='e-btn-group'>
            <input type="radio" id="male" name="gender" value="male"/>
            <label className="e-btn" htmlFor="male">Male</label>
            <input type="radio" id="female" name="gender" value="female"/>
            <label className="e-btn" htmlFor="female">Female</label>
            <input type="radio" id="transgender" name="gender" value="transgender"/>
            <label className="e-btn" htmlFor="transgender">Transgender</label>
        </div>
        <ButtonComponent isPrimary={true}>Submit</ButtonComponent>
        </form>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Show ButtonGroup selected state on initial render

To show selected state on initial render, checked property should to added to the corresponding input element.

The following example illustrates how to show selected state on initial render.

Source
Preview
app.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

// To render checkbox type ButtonGroup.
class App extends React.Component<{}, {}> {
  render() {
    return (
      <div>
        <div className='e-btn-group'>
            <input type="checkbox" id="checkbold" name="font" value="bold" checked/>
            <label className="e-btn" htmlFor="checkbold">Bold</label>
            <input type="checkbox" id="checkitalic" name="font" value="italic" />
            <label className="e-btn" htmlFor="checkitalic">Italic</label>
            <input type="checkbox" id="checkline" name="font" value="underline"/>
            <label className="e-btn" htmlFor="checkline">Underline</label>
        </div>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>