Under Review
Last Updated: 15 Oct 2020 11:49 by ADMIN
Steven
Created on: 31 Aug 2020 15:08
Type: Feature Request
2
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')
);

4 comments
ADMIN
Stefan
Posted on: 15 Oct 2020 11:49

Hello,

Thank you for the feedback, we agree that this property will be helpful.

It is expected to have differences in Kendo UI, KendoReact, and Kendo UI for Angular as those components are made on different technologies and they follow the best practices for their respective technology.

Also, please have in mind that Kendo UI is being developed for over 10 years where KendoReact is a newer product and it will take time to have most of the features of Kendo UI.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Gamehub
Posted on: 15 Oct 2020 08:39

I think it is really not good because there is inconsistency between kendoui jquery and kendo react / angular.

To implement the single mode selection in Kendoreact, the developer must write many lines of code for the already existing feature.

I hope kendo ui team add the single mode selection api into kendoui react / angular soon.

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).