Resetting MultiSelect

UI Components for React
Post Reply
roshitjain
Posts: 1
Joined: 10 May 2020, 09:02

10 May 2020, 09:40

I have Datable in which I am using a multiselect to filter the rows to perform batch operation like delete.

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>
        );
        }
My multi select is dynamic in that I use the data that is retrieved from the server to populate the multiselect options.

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.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest