Making rows in a DataGrid clickable

Anvil Q&A
1

I’m trying to make rows in a data grid clickable. I want a user to be able to click a row in the data grid and be taken to an edit form or a details page.

How do I get the row id and how do I pass it to the form?

Regards,

Andrew

2

Hello and welcome :wave:,

Unfortunately, asking “how do I do X?”, without explaining where you’ve searched and what you’ve tried, is not a great way to ask for help.

My best advice would be to search to docs for “row id” and the other questions you have (passing variables to forms, data grid examples, etc).

I’m certain that there are examples in the docs and on the forum that you will find very helpful.

3

Unfortunately for clicking a row in a data grid there’s no in built Anvil event to setup (though maybe that would be a good Feature Request :thinking:). However, you can easily set one up yourself with just a few lines of code and jQuery like so in your Repeating Panel Template:

At the top with all your imports import jQuery and anvil.js:

from anvil.js.window import jQuery
import anvil.js

Then register the template’s show event with a function to setup your alert:

  def form_show(self, **event_args):
    """This method is called when the data row panel is shown on the screen"""
    jQuery(anvil.js.get_dom_node(self)).on("click", self.row_click)
    pass
  
  def row_click(self, js_args):
    alert(f"This is an alert from clicking the Row with these column values: {list(self.item.values())}")

For getting the row_id, I’m also not sure, but @campopianoa’s advice is good here :slight_smile:

2 Likes
4

If you’re using anvil-extras you can achieve something similar to @duncan_richards12 suggestion with:

from anvil_extras import augment

class RowTemplate(RowTemplateTemplate):
    def __init__(self, **properties):
        ...
        augment.set_event_handler(self, 'click', self.row_click)

    def row_click(self, **event_args):
        print("row clicked")

Another approach comes from the data grid tutorials:

I think it’s the add widget tutorial.
You create DataRowPanel’s inside the RowTemplate - turning off auto_display_data
And to make the DataRowPanel clickable you can place it inside a Link component - looks like that question was already answered in the forum :wink: :

And then there’s the option of using:

both of which have row click events out of the box.

2 Likes
5

Weird thing about being a noob at Anvil is I don’t really know the lingo, I haven’t build up the mental model, and I lack the framework knowledge to ask good questions.

Sorry if I offended you.

1 Like
6

I figured out that if I put something clickable into the RowTemplate then it’s effectively clickable.

Your method is way cooler though.

7

Oh yeah, of course adding buttons, etc. to a column would work too!

As a side note, I don’t think @campopianoa was angry (though of course I don’t want to speak for him). His response was more giving you advice on steps to a) solve this and other problems on your own with existing resources and b) improve the quality of your questions so that you don’t waste anyone’s (yours and the people answering the question) time trying to figure the question itself out.

He was basically giving you advice that will improve both the quality of experience answering your future questions and the quality of responses you will get as a result. :grin:

You’ll find that most people here on the forum really do want to help, but we also want to cultivate a community that helps each other out with Anvil without wasting people’s time copy pasting the Anvil Docs and Forum :+1:

5 Likes