Persist the searched filter in ag-grid-vue after refresh by using localStorage

Viewed 12

How can we show the persist the searched word in searched box.enter image description here Results in image are after refreshing by using local storage but how we can also show the searched name? I want to display the supplier name also after refresh. If anyone have other solution than please share it.

<ag-grid-vue v-if="current_status == 'All'" style="width: 100%; height: 600px;clear: both"
            class="ag-theme-alpine ag-grid-status-bg-color" :columnDefs="fields" :defaultColDef="defaultColDef"
            @grid-ready="onGridReady" @cell-value-changed="onCellValueChanged" @cell-double-clicked="cellDoubleClicked"
            :suppressRowClickSelection="true" :rowSelection="rowSelection" :allowContextMenuWithControlKey="true"
            :getContextMenuItems="getContextMenuItems" @selection-changed="onSelectionChanged"
            :rowModelType="rowModelType" :serverSideStoreType="serverSideStoreType" :pagination="true"
            :paginationPageSize="paginationPageSize" :cacheBlockSize="cacheBlockSize">
        </ag-grid-vue>

        onGridReady(params) {
            this.gridApi = params.api;
            let that = this;

            const dataSource = {
                getRows(params) {
                    const { endRow, filterModel, sortModel } = params.request
                    let perPage = 15;
                    const page = endRow / perPage;
                    let location_id = parseInt(localStorage.getItem('location_id'));
                    let url = `/api/purchase/All?location_id=${location_id}&`

                    //Sort
                    if (sortModel.length > 0) {
                        url += `sort=${sortModel[0].colId}=${sortModel[0].sort}&`
                    }
                    // Filter
                    const filterKeys = Object.keys(filterModel);
                    filterKeys.forEach(filter => {
                        url += `${filter}=${filterModel[filter].filter}&`
                        localStorage.setItem('supplier_name', `${filterModel[filter].filter}`);
                    });

                    let user = localStorage.getItem('supplier_name')
                    if (user) url = `/api/purchase/All?supplier_name=` + user + `&`

                    // Pagination
                    url += `per_page=${perPage}&page=${page}`
                    fetch(url)
                        .then(resp => resp.json())
                        .then(response => {
                            const arrayOfObj = Object.entries(response.data.data).map((e) => (e[1]));
                            params.successCallback(arrayOfObj, response.data.total);
                        })
                        .catch(error => {
                            params.failCallback();
                        })
                }
            }

            params.api.setServerSideDatasource(dataSource);
        }, 
0 Answers
Related