Under Review
Last Updated: 01 Sep 2020 12:35 by Steven
Steven
Created on: 31 Aug 2020 15:08
Type: Feature Request
1
Add Selection Mode Property for React Button Group

The Angular ButtonGroup has a 'selection' property that is not present in the React ButtonGroup. 

This functionality would be nice to have in React.

 

The following code snippet is the temporary fix that has been provided to me by support to mimic Angulars functionality in React.  
import React from 'react';
import ReactDOM from 'react-dom';

import { Button, ButtonGroup } from '@progress/kendo-react-buttons';

class ButtonGroupContainer extends React.Component {
  state = {
    selected: null
  }
  groupButtonClick = (e) => {
    this.setState({
      selected: e.target.id
    })
  }

  isSelected = (index) => {
    return index === parseInt(this.state.selected) ? true : false
  };

  render() {
    return (
      <div className="row">
        <div className="col-xs-12 col-sm-6 example-col">
          <ButtonGroup>
            <Button togglable={true} id={1} selected={this.isSelected(1)} onClick={this.groupButtonClick}>
              Bold
                     </Button>
            <Button togglable={true} id={2} selected={this.isSelected(2)} onClick={this.groupButtonClick}>
              Italic
                     </Button>
            <Button togglable={true} id={3} selected={this.isSelected(3)} onClick={this.groupButtonClick}>
              Underline
                     </Button>
          </ButtonGroup >
        </div>
      </div>
    )
  }
}
ReactDOM.render(
  <ButtonGroupContainer />,
  document.querySelector('my-app')
);

2 comments
Steven
Posted on: 01 Sep 2020 12:35
Thanks Stefan! 
ADMIN
Stefan
Posted on: 01 Sep 2020 05:04

Hello, Steven,

Thank you for submitting the request.

We will monitor the interest and plan it accordingly.

I have also added your vote for conveniences, as the votes are what we use to measure the popularity.

Regards,
Stefan
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).