Multiselect on tables

Hi, is it possible to have a checkbox against each row in a datagrid for simultaneously carrying out operations on those rows? (e.g. delete, edit, etc.)

You can put any component into a Data Grid cell, so you can put a CheckBox in the RowTemplate and each row will have a CheckBox.

You can also create a header row by dragging-and-dropping a Data Row Panel into the Data Grid at the top (above the Repeating Panel), and checking pinned in its properties. This means it’s displayed on every page.

To create a CheckBox that checks all the CheckBoxes in the rows, you can drop a CheckBox into the appropriate column in your header row, then make its change handler set the checked property of the CheckBoxes in the rows.

What you’ll end up with will be similar to the Editable Rows Data Grid tutorial; an interactive component in each row, and a header with a different interactive component. So if you work through that tutorial, hopefully you’ll see how to set up your checkboxes.

I hope this makes sense, let me know how it goes :slight_smile:

3 Likes

A critical piece of information I missed while trying to implement a feature like this on my app was the raise_event_on_children method of a RepeatingPanel. This method can be used to fire a custom event on each instance of an ItemForm within the RepeatingPanel, e.g.:

self.repeating_panel.raise_event_on_children('x-checkall-event', checked=self.check_header.checked)

Then on my item form:

  def __init__(self, **properties):
    self.set_event_handler('x-checkall-event', self.check_checkbox)

  def check_checkbox(self, checked, **event_args):
    self.chk_select.checked = checked

Background: I was lost by the statement: you can drop a CheckBox into the appropriate column in your header row, then make its change handler set the checked property of the CheckBoxes in the rows. Specifically, I didn’t know how to get a reference to each check box within the Item Template form.

Hope this helps someone else.

4 Likes

The post above by @jamesralexander is very helpful and I’ve wanted to understand this better myself.

Here is a “bare bones” app that demonstrates using raise_event_on_children

I hope this is helpful for whoever might need an example.

clone:
https://anvil.works/build#clone:3NDEAUILXHPGMJ7K=GNRRKY7ETSU2GQEDUT2EEIV6

6 Likes