This is a migrated thread and some comments may be shown as answers.

PanelBarItem: how to add control next to title?

3 Answers 13 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Zach
Top achievements
Rank 1
Zach asked on 08 Jul 2020, 02:56 PM

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

Sort by
0
Stefan
Telerik team
answered on 09 Jul 2020, 06:33 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Zach
Top achievements
Rank 1
answered on 09 Jul 2020, 08:26 PM

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>
        )
    }
}
0
Stefan
Telerik team
answered on 10 Jul 2020, 04:53 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Zach
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Zach
Top achievements
Rank 1
Share this question
or