This example demonstrates how to select grid records and perform on them some action.
grid.toggleSelected method.grid.toggleSelectAll method.grid.getAllSelected method.Let’s implement a simple grid which will consist of ‘name’, ‘surname’, ‘phone’, ‘age’, ‘gender’ fields and first column ‘bulk’ containing checkboxes for toggling selection of records.
In our example
columns.onClickRefs() at columns.js
by calling grid.toggleSelected(recordId).toggleSelectMode()
by calling this.grid.toggleSelectAll() at MainComponent.jsMainComponent.js:
class MainComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
model: model,
bulkMode: false, // state for toggle button (Select all / Clear all)
selectedNum: 0
};
this.onSelectedChange = this.onSelectedChange.bind(this);
this.toggleSelectMode = this.toggleSelectMode.bind(this);
this.someAction = this.someAction.bind(this);
}
onSelectedChange(records) {
this.setState({
selectedNum: records.length
});
}
toggleSelectMode() {
this.setState({
bulkMode: !this.state.bulkMode
});
this.grid.toggleSelectAll();
}
someAction() { // this function can do anything what you need
const records = this.grid.getAllSelected();
alert('BulkMode: ' + this.state.bulkMode + ' Records: ' + records.join(', '));
}
render() {
const buttonText = this.state.bulkMode ? 'Clear all' : 'Select all';
let numText; // selected records
if (this.state.bulkMode) {
numText = 'Selected all records.';
} else {
numText = `Selected ${this.state.selectedNum} ${this.state.selectedNum === 1 ? 'record' : 'records'}`;
}
return (
<div className="container">
<div className="row">
<div className="col-sm-12">
<a className="btn btn-success" onClick={this.toggleSelectMode}>{buttonText}</a>
{numText}
<UIKernel.Grid
ref={(grid) => this.grid = grid}
cols={columns}
model={this.state.model}
viewCount={10}
onSelectedChange={this.onSelectedChange}
/>
<a className="btn btn-success" onClick={this.someAction}>Some action</a>
</div>
</div>
</div>
);
}
}columns.js:
const columns = {
bulk: {
width: '40px',
className: 'text-center',
render: [(record, selected) => {
return '<input ref="checkbox" type="checkbox"' + (selected ? ' checked' : '') + '/>';
}],
onClickRefs: {
checkbox: (function (event, recordId, record, grid) {
grid.toggleSelected(recordId); // toggle our record id
})
}
},
name: {
name: 'First Name', // columns title
sortCycle: ['asc', 'desc', 'default'], // sort cycle
render: ['name', record => _.escape(record.name)]
},
/* ...configuration of other fields... */
};model.js:
const model = new UIKernel.Models.Grid.Collection({
data: _getRandomRecords(20),
/* ... some other methods which are not important in this example */
});