Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

113
Views
Controlling the Expanded state of a Kendo PanelBar using props in React

Is there a way to dynamically expand/collapse a PanelBar and/or PanelBarItems utilizing a prop?

    export default function Vehicles(props) {
    <PanelBar
      style={props.style}
      expanded={props.expanded}
    >
... several PanelBarItems
</PanelBar>
} 

This is more or less my PanelBar.

What I want to do it make a simple "navigation" bar the will list all the "contents" of the PanelBar(the titles of the PanelBarItems). It should expand the PanelBarItem(s) that were clicked which I cannot seem to make happen. I have a function that grabs the corresponding key to whichever item is supposed to be expanded based on the navigation and adds it the expanded array.

I've tried passing in an array of keys, like they show in the docs, but that only works on the initial render. If I pass in expanded=[".0",".0.0"], it will do what I expect and expand the PanelBar and the first child. If I pass in expanded=[], and then add ".0" and ".0.0", the sections do not expand.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

There is an open issue about this exact issue. There is no controlled mode for the PanelBar. The only way to "dynamically open" and close them is to update the key and force a remount. I just used key={props.expanded.toString()} to force the component to update.

about 4 years ago · Juan Pablo Isaza Report

0

Yes, You can do it. Item is expanded when prop expanded={true}.
So pass to Vehicles component props in this shape

const expanded = {
  item1: true,
  item2: false,
  // etc.
}

Then use

`expanded={pros.expanded.item1}`
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!