Expand Modes

The PanelBar supports two different expand modes.

These modes are:

  • "single"—Enables you to expand only one item at a time. If you expand an item, the previously expanded item is collapsed.
  • "multiple"—This is the default expand mode of the PanelBar. It enables you to expand tow or more items at a time. Items can also be toggled.

To configure the expand modes, use the expandMode property of the PanelBar.

<style>
    label {
        font-weight: normal;
    }
</style>
class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            expandMode: 'multiple'
        };
    }

    handleExpandModeChange = (e) =>{
        this.setState({expandMode: e.target.value})
    }

    render(){
        const { expandMode } = this.state;

        return(
            <div>
                <div className="example-config row">
                    <div className="col-sm-4">
                        <h5>Expand  modes:</h5>
                        <input
                            type="radio"
                            id="single"
                            className="k-radio"
                            name="expandModeGroup"
                            value="single"
                            checked={expandMode === 'single'}
                            onChange={this.handleExpandModeChange}
                        />
                        <label htmlFor="single" className="k-radio-label" style={{marginBottom:"5px"}}>Single expand mode</label>
                        <br />
                        <input
                            type="radio"
                            id="multiple"
                            className="k-radio"
                            name="expandModeGroup"
                            value="multiple"
                            checked={expandMode === "multiple"}
                            onChange={this.handleExpandModeChange}
                        />
                        <label htmlFor="multiple" className="k-radio-label" style={{marginTop:"5px"}}>Multiple expand mode</label>
                    </div>
                </div>
                <PanelBar expandMode={expandMode}>
                    <PanelBarItem title={"Invasion Games"} expanded={true}>
                        <PanelBarItem title={"Hockey"}/>
                        <PanelBarItem title={"Soccer"}/>
                        <PanelBarItem title={"Rugby"}/>
                        <PanelBarItem title={"Basketball"}/>
                        <PanelBarItem title={"Water polo"}/>
                        <PanelBarItem title={"Netball"}/>
                    </PanelBarItem>
                    <PanelBarItem title={"Striking & Fielding Games"}>
                        <PanelBarItem title={"Cricket"}/>
                        <PanelBarItem title={"Softball"}/>
                        <PanelBarItem title={"Baseball"}/>
                    </PanelBarItem>
                    <PanelBarItem title={"Net & Court Games"} expanded={true}>
                        <PanelBarItem title={"Badminton"}/>
                        <PanelBarItem title={"Squash"}/>
                        <PanelBarItem title={"Tennis"}/>
                        <PanelBarItem title={"Table Tennis"}/>
                        <PanelBarItem title={"Volleyball"}/>
                    </PanelBarItem>
                        <PanelBarItem title={"Target Games"}>
                        <PanelBarItem title={"Golf"}/>
                        <PanelBarItem title={"Lawn bowls"}/>
                        <PanelBarItem title={"Tenpin bowling"}/>
                    </PanelBarItem>
                </PanelBar>
            </div>
        )
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
)
In this article
 /