Auto Grid Delete Button

Hilla
1

Is there any way to configure the autogrid to have a delete button at the end of a Row? Many thanks.

2

Not a super elegant solution, but you can add a delete public method to your BrowserCallable service. For example:

@BrowserCallable
@AnonymousAllowed
public class ProductListRepositoryService extends ListRepositoryService<Product, Long, ProductRepository> {

    public void deleteProduct(Long productId) {
        getRepository().deleteById(productId);
    }
}

Then create a custom column in the AutoGrid with a delete button that calls the delete method on the backend:

export function ProductsView() {

    function DeleteButtonRenderer({ item }: { item: Product }) {
        return (
          <Button onClick={() => {
            ProductListRepositoryService.deleteProduct(item.id);
            //refresh the grid
            //@ts-ignore
            document.getElementById('my-autogrid').clearCache();
          }
        }> Delete
        </Button>
        );
      }

      
    return (
        <div className='p-l'>
            <AutoGrid id='my-autogrid' service={ProductListRepositoryService} model={ProductModel} 
            customColumns={[
                <GridColumn
                  key={'delete-column'}
                  autoWidth
                  renderer={DeleteButtonRenderer}
                  header="Delete"
                />,
              ]}/>
        </div>
    );
}
3

Thanks thats great will give it a try. :+1:

4

Worked a charm, did change the line document.getElementById(‘my-autogrid’).clearCache(); to update a count that has a watcher refreshTrigger={updateCount}. Many thanks for your help