Refresh grid on button click

Hilla
1

hi,
there is an easy way to reload the data of a grid programmatically?
To be precise, I’m using a tree grid which use an object like this:

async function dataProvider(
  params: GridDataProviderParams<Person>,
  callback: GridDataProviderCallback<Person>
)

....
<Grid itemHasChildrenPath="manager" dataProvider={dataProvider}>

What I need is for the grid to run again this function.

thank you,
Fernando

2

What about dataProvider.refresh? You could take a look at the example code in this guide: How to show a form in dialogs and drawers in Hilla | Vaadin. It shows the usage of useDataProvider:

const dataProvider = useDataProvider<Proposal>({ 
  list: (pageable) => ProposalService.list(pageable),
});

...

dataProvider.refresh();
3

hi Rene`,
thanks, but can you provide an example for the tree grid? in the call to the backend I do something like this:

await CIController.findChildren(params?.parentItem?.id, pageable)

this is needed to navigate the tree. I’ve tried doing the following:

useDataProvider<CIFolder>({
        list: (pageable) => await CIController.findChildren(
            params?.parentItem?.id,
            series, pageable)
    });

but I don’t have params here. Is this useDataProvider also compatible with tree grid?

thank you again for your support
Fernando

4

Pretty sure that useDataProvider doesn’t support tree grid.

As an alternative, you can store the grid element in a ref, and then call the clearCache method, which should then refresh data from the data provider.