|
export class Default extends SampleBase {
listObj;
// define the JSON of data
sportsData = [
{ Id: 'Game0', Game: 'All' },
{ Id: 'Game1', Game: 'American Football' },
{ Id: 'Game2', Game: 'Badminton' },
{ Id: 'Game3', Game: 'Basketball' },
{ Id: 'Game4', Game: 'Cricket' },
{ Id: 'Game5', Game: 'Football' },
{ Id: 'Game6', Game: 'Golf' },
{ Id: 'Game7', Game: 'Hockey' },
{ Id: 'Game8', Game: 'Rugby' },
{ Id: 'Game9', Game: 'Snooker' },
{ Id: 'Game10', Game: 'Tennis' },
];
// maps the appropriate column to fields property
fields = { text: 'Game', value: 'Id' };
// set the value to select an item based on mapped value at initial rendering
value = 'Game0';
render() {
return (
<div id="dropdowndefault" className="control-pane">
<div className="control-section">
<div className="col-lg-8">
<div className="content-wrapper">
<div id="default">
<DropDownListComponent
id="games"
dataSource={this.sportsData}
ref={(dropdownlist) => {
this.listObj = dropdownlist;
}}
fields={this.fields}
placeholder="Select a game"
value={this.value}
popupHeight="220px"
/>
</div>
</div>
</div>
</div>
</div>
);
}
}
render(<Default />, document.getElementById('sample'));
|
