Mui-datatables: onFilterDialogClose not working

Created on 28 Oct 2020  ยท  5Comments  ยท  Source: gregnb/mui-datatables

We want to change the state according to the open/close event of the filter dialog. But the open event works, but the close event doesn't.

```
const handleFilterDialogOpen = () => {
setViewMode("filter");
};

const handleFilterDialogClose = () => {
setViewMode("table");
};

title={"User Report"}
data={_omaCrudReducer.omaList
?.map((subscriber, index) => (
renderRow(subscriber)
))}
columns={headerColumns}
components="div"
//https://github.com/gregnb/mui-datatables -- option ์ •์˜
options={{
serverSide: true,
filterType: "textField",
responsive: "simple",
selectableRows: "none", // set checkbox for each row
// search: false, // set search option
// filter: false, // set data filter option
// download: false, // set download option
// print: false, // set print option
// pagination: true, //set pagination option
// viewColumns: false, // set column option
//filterType: enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom')
elevation: 4,
count: _omaCrudReducer.recordsFiltered,
page: page,
rowsPerPage: rowsPerPage,

        rowsPerPageOptions: [10, 20, 40, 80, 100],
        jumpToPage: true,
        textLabels: {
          pagination: {
            next: "Next Page",
            previous: "Previous Page",
            rowsPerPage: "Rows per page",
            displayRows: "of",
          }
        },
        draggableColumns: {
          enabled: true,
          transitionTime: 300
        },

        confirmFilters: true,
        customFilterDialogFooter: (currentFilterList, applyNewFilters) => {
          return (
            <div style={{ marginTop: '40px' }}>
              <Button variant="contained" onClick={() => handleFilterSubmit(applyNewFilters)}>Apply Filters</Button>
            </div>
          );
        },

        // applyFiters callback
        onFilterConfirm: (filterList) => { 
          handleMatchParamMapping(filterList); 
        },
        // filter list delete callback
        onFilterChange: (column, filterList, type) => {
          if (type === 'chip') {
            handleMatchParamMapping(filterList); 
          }
        },

        onFilterDialogClose: handleFilterDialogClose,
        onFilterDialogOpen: handleFilterDialogOpen,

        onChangePage: handleChangePage,
        onChangeRowsPerPage: handleChangeRowsPerPage,
        onColumnSortChange: handleColumnSortChange,
        onRowClick: handleClickRow

        //onColumnViewChange
        //onFilterChange: handleFilterChange
        //onColumnOrderChange ์ปด๋Ÿผ ์ˆœ์„œ ๋ณ€๊ฒฝ ํ›„ ์ž‘๋™๋˜๋Š” ํŠธ๋ฆฌ๊ฑฐ
        //function(newColumnOrder:array, columnIndex:number, newPosition:number) => void
        //onRowClick ํ–‰ ํด๋ฆญ ํ›„ ์ž‘๋™๋˜๋Š” ํŠธ๋ฆฌ๊ฑฐ 
        //function(rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }) => void
      }}
    />

```

bug

All 5 comments

            onFilterDialogClose: () => {
              alert("123123");
              //not working..
            }, 
            onFilterDialogOpen: () => {
              alert("1345345");
            },

image

I can confirm this is a bug. It looks like the onFitlerDialogClose callback is setup to fire here:

https://github.com/gregnb/mui-datatables/blob/master/src/components/TableToolbar.js#L208

But that logic is never triggered. Instead it looks like the callback should be here:

https://github.com/gregnb/mui-datatables/blob/master/src/components/TableToolbar.js#L306

I can confirm this is a bug. It looks like the onFitlerDialogClose callback is setup to fire here:

https://github.com/gregnb/mui-datatables/blob/master/src/components/TableToolbar.js#L208

But that logic is never triggered. Instead it looks like the callback should be here:

https://github.com/gregnb/mui-datatables/blob/master/src/components/TableToolbar.js#L306

I don't understand. The tag I'm using is "MUIDataTable". But your code is "Tooltip".
How do I use that callback function?

@developergunny

There was a bug.
fix pr is here(#1564).

@developergunny

There was a bug.
fix pr is here(#1564).

How can I update that version on npm?

Was this page helpful?
0 / 5 - 0 ratings