Unplanned
Last Updated: 26 Jul 2023 09:41 by ADMIN
Jeff
Created on: 03 Mar 2022 14:01
Category: KendoReact
Type: Feature Request
0
Collapse Panel, Tab Panel, etc should hide contents, not require us to conditionally render

All of the Kendo components that "hide" content (tab views, collapse panels, etc) don't actually hide any content. They require us to not render any children.


<ExpansionPanel
  {expanded === item.id && (
    <ExpansionPanelContent>

This just strikes me as an odd design decision. I guess I don't understand the point of these components if they don't do the 1 thing they are supposed to do; hide portions of the content.

Un-rendering the content is usually not desirable. The contents are often still important. Possibly for SEO purposes, A11y, or if they are part of a Form:


<Form
  render={() => {
    <FormElement>
      <ExpansionPanel>
        {expanded === item.id && (
          <ExpansionPanelContent>
            <Field
                name={"firstName"}
                component={Input}
                validator={() => 'always invalid'}
              />
          </ExpansionPanelContent>
      </ExpansionPanel>
    </FormElement>
  }}
/>

This makes the Form valid as long as the panel is collapsed.

 

Can check out how Bootstrap collapse panels work to see how most people would expect these components to behave. The contents is rendered into the DOM and JS and CSS are used to hide it. There should be a way to achieve this same behavior with Kendo.

As a workaround I end up having to do my own CSS/SASS to hide the contents


.k-expander {
  .k-expander-content-wrapper {
    height: 0;
    overflow: hidden;
  }

  &.k-expanded {
    .k-expander-content-wrapper {
      height: auto;
    }  
  }
}

4 comments
ADMIN
Konstantin Dikov
Posted on: 26 Jul 2023 09:41

Hi,

Another solution is to directly set the "display" of the ExpandedPanelContent conditionally:

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

ADMIN
Stefan
Posted on: 04 Mar 2022 13:31

Hello,

Thank you for the clarification.

We will monitor the interest in this and plan it accordingly.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jeff
Posted on: 04 Mar 2022 13:28

> Please let me know if you think that a similar option for the ExpansionPanel will cover the requirements?

I think that would be very useful if it can be added.

Thank you for letting me know about the keepTabsMounted property on the other components, that definitely helps.

ADMIN
Stefan
Posted on: 04 Mar 2022 07:40

Hello,

The TabStrip and the PanelBar components have a property called keepTabsMounted that will only visually hide the content when collapsed, but keep it in the DOM:

https://www.telerik.com/kendo-react-ui/components/layout/api/TabStripProps/#toc-keeptabsmounted

https://www.telerik.com/kendo-react-ui/components/layout/api/PanelBarProps/#toc-keepitemsmounted

Please let me know if you think that a similar option for the ExpansionPanel will cover the requirements?

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.