PanelBarItem: how to add control next to title?

4 posts, 0 answers
  1. Zach
    Zach avatar
    2 posts
    Member since:
    Jun 2020

    Posted 08 Jul 2020 Link to this post

    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.

     

     

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 09 Jul 2020 Link to this post

    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.
  3. Zach
    Zach avatar
    2 posts
    Member since:
    Jun 2020

    Posted 09 Jul 2020 in reply to Stefan Link to this post

    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>
            )
        }
    }
  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 09 Jul 2020 Link to this post

    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.
Back to Top