Panel template header and first render

Hello,
Is there a way to find out if panel header render is first rendering ?
I have to wrap ais-Panel-header in a div but only one time…

Hi there,

Could you please share a bit more about what you’re trying to achieve, and what flavor and version of InstantSearch you’re using? This will be easier to provide the right answer to your issue.

Best,

Hi,

version “instantsearch.js”: “^4.7.0”.
I want to create an horizontal facet with dropdown facet item; i m also using bootstrap dropdown and i want to modify the default rendering of panel (panel don t have connector) to unwrap header panel from ais-Panel-header div.

for example :

    templates : {
        header(options){
            if(firstRenderingOfPanel){
                //do something...
            }

Hi @prestarocket,

Unfortunately, InstantSearch doesn’t provide this information to the panel templates. The solution I can think of is to keep track of this render on your side with an external variable (could be a global variable, an element in the DOM, …). It is a very hacky solution but it could do the trick. Here is an example on CodeSandbox.

The alternative is to implement a custom renderer for the widget. You could implement the panel logic at this level but it means you also have to re-implement the UI logic of the panel + widget. It is not the simplest solution but it would work.

Hope that helps!

1 Like

Hi @samuel.vaillant,
yes i found a hacky solution with a check of this :

        header(options){     

let panelBody = $(’.ais-Panel-body’,parent_container);
if(!panelBody.length > 0){
// is first render

                }