PanelBarItem: how to add control next to title?

[Zach]

I have made a filter panel using the PanelBar. Each PanelbarItem contains the controls (checkboxes, multiselect, etc) to filter a dataset. I would like to add a checkbox to "select all" in the PanelBarItem title area so the user can manage the child controls in bulk. The component signature seems to be <PanelBarItem title="xxx" .../> where "xxx" is  a string. I tried to get lucky by passing <PanelBarItem title={ () => (<Checkbox ... />)}>, but didn't work. Any help would be appreciated.

 

 

[Stefan]

Hello, Zach,

Thank you for the details.

You were actually on the right track to add the Checkbox, with the small difference that the title will render a component not a function that returns a component:

https://stackblitz.com/edit/react-ar2ruy?file=app/main.jsx

I agree that it will be helpful to add this to the documentation.

I hope it proves helpful.

Regards,
Stefan
Progress Telerik

[Zach]

Hi Stefan, thanks for your reply. I was able to get the Checkbox positioned as in your example, but I can't seem to prevent the PanelBarItem from expanding/collapsing when the Checkbox changes. I can't seem to stop propagation in the expected place. Here's my example code:

class App extends React.Component {
    onCheckChanged = e => {
      // e.stopPropagation(); // Fails with "e.stopPropagation() is not a function"
      alert('Check successfully changed!');
    };

    render() {
        return(
            <div className="panelbar-wrapper">
                <PanelBar>
                    <PanelBarItem expanded={true}
                     title={<div><Checkbox onChange={this.onCheckChanged}/> Test</div>}
                     >
                      <ul>
                        <li>Foo</li>
                        <li>Bar</li>
                      </ul>
                    </PanelBarItem>
                    <PanelBarItem title="Second Title"/>
                </PanelBar>
            </div>
        )
    }
}

[Stefan]

Hello, Zach,

This can be done by stopping the propagation of the onClick event of the checkbox instead of the onChange event. This can be done via the ref of the component.

I updated the example to showcase this:

https://stackblitz.com/edit/react-ar2ruy?file=app/main.jsx

Regards,
Stefan
Progress Telerik