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.
3 Answers, 1 is accepted
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
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
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> ) }}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
Our thoughts here at Progress are with those affected by the outbreak.