Code: Select all
[P.S.->My code might not be the most efficient one so please feel free to suggest improvements]
constructor() {
super()
this.state = {
cars: null,
message: null,
models: null,
selectedModels: null,
selectedCars: null,
}
delete() {
let carIds = this.state.selectedCars.map(car => Number(car.id));
ApiService.deleteCars(carIds)
.then(response => this.load(response)
);
}
load(response) {
//Filter all the model symbols first, this list may have duplicates
let allModels = response.data.result.map(car => car.model);
//Filter the model list to set of unique values.
let uniqueModels = allModels.filter((value, index, self) => { return self.indexOf(value) === index });
uniqueModels.sort();
//Use the unique model list to create the filter for the datatable.
let dropDownModels = [];
uniqueModels.forEach(model => { dropDownModels.push({ label: model, value: model }) });
this.setState({ selectedCars: null, cars: response.data.result, models: dropDownModels, selectedModels: null });
}
render() {
const modelFilter = <MultiSelect style={{ width: '100%' }} placeholder="Select Models" value={this.state.selectedModels} options={this.state.models} onChange={this.onCarChange} />;
return (
<div>
<div>
<h3>Inventory Editor</h3>
<DataTable ref={(el) => this.dt = el} value={this.state.cars} selection={this.state.selectedCars} onSelectionChange={e => this.setState({ selectedCars: e.value })}>
<Column selectionMode="multiple" style={{ width: '40px' }} />
<Column field="carId" header="Car Id" style={{ height: '3.5em', width: '70px' }} />
<Column sortField="model" filter={true} filterElement={modelFilter} field="model" header="Car Model" style={{ height: '3.5em', width: '135px' }} />
</DataTable>
</div>
<div style={{ float: "left" }}>
<Button label="Save" onClick={this.save} />
<Button label="Delete" onClick={this.delete} />
</div>
</div>
);
}
After filtering the datatable rows using mutilselect I am deleting the filtered records which can trigger a change in the mutiselect options because table data has changed due to delete action. I am able to see the new drop down options as a result.
However, after deleting the records, the datable continues to show 0 records as none is matching with my previous filter choice. (my guess). If I select all and deselect all then I am able to see all the records after deleting (No server request is made during this time)
Is there a way to reset the multi select once I have clicked the delete button? Or what am I missing in the above. Please suggest.