Updating FastGridTemplate contents with a Selector

Panel
1

I’m trying to update the contents of the GridSpec in the FastGridTemplate depending on the value of a Selector in the sidebar. I have a callback which updates template.main and I can verify that the objects dict of the GridSpec is updated as well as the _render_items on the template.
However, I don’t see the panel changing as I change the selector value. I do see the update if I change the value and refresh the browser.

Is it possible to trigger a redraw of the template in my callback to get the behavior I want?

Here is my code:

import panel as pn
pn.extension(sizing_mode='stretch_both')
template = pn.template.FastGridTemplate(save_layout=True)

markdowns = {
    'md1': pn.pane.Markdown(object='Markdown 1', name='Markdown 1', background='#f307eb'),
    'md2': pn.pane.Markdown(object='Markdown 2', name='Markdown 2', background='#23d7f5')
}

select = pn.widgets.Select(value='md1', options=['md1', 'md2'])
template.sidebar.append(select)

template.main[0, :2] = markdowns['md1']
template.main[1, :2] = pn.Spacer(background='orange', margin=0)

def _update_main(*events):
    md = markdowns[select.value]
    template.main[0, :2] = md
    for k, obj in template.main.objects.items():
        print(obj.name)

select.param.watch(_update_main, ['value'])
pn.serve(template)

I’ve tried also the Bootstraptemplate where I run into similar issues. I can workaround the problem there by padding my content in a pn.Column and updating that but that doesn’t help me for the grid template.

2

Template objects cannot be updated once the template has been served. You can only update panel layouts once served. I think we should add some warnings telling users that changing the template after it has been served has no effect.

3

Thanks, that makes sense and I suspected I wasn’t supposed to change template objects as the main param on the FastGridTemplate has constant=True.

Suppose I would want a FastGrid where I can modify its contents/layout with code, how would I do that? By making a ReactiveHTML?

4

I suspect the closest you’ll get is by inserting a GridStack layout on template.main

1 Like