How can I initialize the ag-grid component in each tab without visiting them?

[bajirama]

Question

I am facing a problem with saving a form that has a master-detail structure. The master part has a data grid component called ag-grid, The detail part has four tabs, each with an ag-grid component. There is a save button at the bottom of the screen. The issue is that the user can save the form without entering any values for the details, which is a valid scenario. However, when I try to save the form, I check if each ag-grid component has any values and then call a function to save the grid. This causes an error if I have not visited the second or third tab, because the ag-grid component in those tabs is not initialized. The error message is:

 line 62, in savedata
    agridDet = await aggirdTable.get_client_data()
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Python311\Lib\site-packages\nicegui\elements\aggrid.py", line 159, in get_client_data
    result = await self.client.run_javascript(f'''
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Python311\Lib\site-packages\nicegui\client.py", line 184, in send_and_wait
    raise TimeoutError('JavaScript did not respond in time')
TimeoutError: JavaScript did not respond in time

The error does not occur if I switch between the tabs before saving. How can I solve this problem? How can I initialize the ag-grid component in each tab without visiting them?

[falkoschindler]

Hi @bajirama, that's a tricky question. Here's a minimal reproduction:

with ui.tabs().classes('w-full') as tabs:
    one = ui.tab('One')
    two = ui.tab('Two')
with ui.tab_panels(tabs, value=one).classes('w-full'):
    with ui.tab_panel(one):
        async def get_data():
            ui.notify(await grid.get_client_data())
        ui.button('Get data', on_click=get_data)
    with ui.tab_panel(two):
        grid = ui.aggrid({
            'columnDefs': [{'headerName': 'Name', 'field': 'name'}],
            'rowData': [{'name': 'Alice'}, {'name': 'Bob'}],
        })

We have a similar issue with ui.log: #1869
Unfortunately I don't have an answer how to avoid this problem. UI elements on tabs don't seem to get mounted until the tab is visited. Therefore some important initialization doesn't happen until then.

[kyloe]

I had the same issue, I did some reading and it looks like quasar/vue does 'lazy loading' in these circumstances. I couldn't find an option to disable it. So I wrote a simple replacement using other nicegui components - "toggle" as the header/menu and "cards" as the panels - this seems to work. Styling is left as an excercise for the reader :)

tabs = {'names':['Tab One','Tab Two','Tab Three','Tab Four'],'buttons':[],'cards':[]}

def activate(i):
    nonlocal tabs
    tabs['cards'][i].classes(remove='hidden')

def deactivate_all():
    nonlocal tabs
    for c in tabs['cards']:
        c.classes('hidden')

def handle_button_click(button_name):
    deactivate_all()
    activate(tabs['names'].index(button_name))

initial_tab = 0

with ui.column():
    ui.toggle(tabs['names'],value=tabs['names'][initial_tab]).on('click',lambda e:(handle_button_click(e.sender.value))).classes('no-shadow')
    for i,grid_card in enumerate(tabs['names']):
        with ui.card().classes('no-shadow').style('width: 100%') as card:
            tabs['cards'].append(card)
            with ui.card_section():
                ui.label(grid_card)
            with ui.card_section():
                ui.label("GRID GOES HERE")
            
deactivate_all()
activate(initial_tab)

[falkoschindler]

Note that two days ago I created an issue for this problem: #3033.