Hi everyone,
I have a question regarding the tabulator dependency.
I am trying to select a row programmatically using the method
self.tabulator.select_row(row_number). However, it doesn’t work.
I also tried to explicilty follow the documentation of tabulator by accessing the library as follows:
self.tabulator._t.selectRow(1)
but it also did not work.
Is there something that I need to do in order to make it work?
The code I am using:
from anvil import *
import anvil.server
import anvil.users
import anvil.tables as tables
import anvil.tables.query as q
from anvil.tables import app_tables
from tabulator.Tabulator import Tabulator
Tabulator.modules.add("FilterModule")
Tabulator.modules.add("SelectRowModule")
Tabulator.theme = "simple"
TABULATOR_OPTIONS = {
"height": 800,
"progressive_load": "scroll",
"pagination": False,
"css_class":["table-striped", "table-bordered"],
}
class Form1(Form1Template):
def __init__(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
@property
def items(self):
return self._items
@items.setter
def items(self, i):
self._items = i
def form_show(self, **event_args):
"""This method is called when the form is shown on the page"""
self.init_tabulator()
def init_tabulator(self):
self.tabulator = Tabulator()
columns = [
{'formatter':"rownum", 'hozAlign':"center", 'width':40},
{'title': 'First Name', 'field': 'first_name'
'headerFilter':"input", "headerFilterFunc": "like",
},
{'title': 'Last Name', 'field': 'last_name',
'headerFilter':"input", "headerFilterFunc": "like",
}
]
tabulator_options = TABULATOR_OPTIONS.copy()
tabulator_options["selectable"] = 1
self.tabulator.options = tabulator_options
self.tabulator.columns = columns
# self.tabulator.index = 'id'
self.tabulator.data = self.items
self.tabulator.add_event_handler('row_selected', self.tabulator_row_selected)
self.add_component(self.tabulator, full_width_row=True)
self.tabulator.select_row(1)
# self.tabulator._t.selectRow(10)
def tabulator_row_selected(self, row, **event_args):
"""This method is called when the row selection changes"""
pass
Thanks everyone in advance.
Select row isn’t selecting a row number it’s the field you are using for the index field. By default this is set to id.
From the docs
table.selectRow(1); //select row with id of 1
In tabulator every row should have an index field.
I have modified the code and added index field like follows,
columns = [
{'field': 'id', 'hozAlign':"center", 'width':40},
{'title': 'First Name', 'field': 'first_name'
'headerFilter':"input", "headerFilterFunc": "like",
},
{'title': 'Last Name', 'field': 'last_name',
'headerFilter':"input", "headerFilterFunc": "like",
}
]
tabulator_options = TABULATOR_OPTIONS.copy()
tabulator_options["selectable"] = 1
self.tabulator.options = tabulator_options
self.tabulator.columns = columns
self.tabulator.index = 'id'
[/quote]
The data that I am passing to the tabulator is like this:
{‘id’: 1, ‘first_name’: ‘John’, ‘last_name’: ‘Brown’}
But still I nothing happens when I call the select_rows:
self.tabulator.select_row(1)
What is it that you’re expecting and is not happening?
The code you’ve shared does nothing in the event handler for a row being selected.
1 Like
Yes, I would expect to trigger the event handler function, or at least mark the specified row.
How do you know the event handler isn’t being triggered? It doesn’t do anything.
Sorry for the misunderstanding. I just removed from the function the print statement I have in my application. However, the status is still the same it does not print anything.
I can see you have manually added the event handler to the control (I missed that when I skimmed your code).
I’m a simple person, so I would try putting that in the properties/events in the IDE for the sake of experimentation and see if that changes anything. That’s never failed to work for me.
Thanks for your suggestion I would try that one for sure. However, I would like to note that the event handler function works fine when I select a row from the UI, but it doesn’t work when I use the select_row method.
Ah, ok. I’ve never done that, but I’m trying it now …
edit - see @owen.campbell 's response.
Sorry, also my misunderstandng. Calling that method won’t fire the event handler - that only happens in response to a UI event.
instead, use the developer tools in your browser to inspect the div elements for the rows. You should see the ‘selected’ class being added to the relevant row.
Whether that causes any visible change depends on the css.
1 Like
Nevertheless, I would expect the select_row method at least highlight the row of the specified index as it is in the example of the docs.
You’re using the simple theme. It probably doesn’t.
I have tested it with all available themes, and still no luck. Thanks for the help though.
Try adding a ‘mytabulator’ role, assigning that to your tabulator in your init and add this to the bottom of your theme.css and see what happens then
.anvil-role-mytabulator.tabulator {
background-color: transparent;
& .tabulator-tableholder .tabulator-table {
background-color: transparent;
}
& .tabulator-row {
background-color: transparent;
&.tabulator-selectable:hover {
background-color: blue !important;
}
&.tabulator-selected {
background-color: red !important;
}
}
}
1 Like
Did you check whether the class is being added to the div?
Yes, I checked and it is not being added. I think this is the issue in the first place.
Yep, without that, not much else will happen.
At this point, it’s probably worth putting an MWE together and sharing it. It’s tricky to help properly just from snippets.
Hi again.
I created a simple example of what I want to do.