Demo bug?

1 Answer 44 Views
Grid
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
Janki asked on 28 Sep 2023, 02:21 PM

Hi there,

Is the demo here loading for you? https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-hide-grouped-columns/

  • When I click "Open in StackBlitz" or "Open in CodeSandbox", none of the dependencies are added and files that are required for importing are missing.
  • The embedded demo itself on the Kendo site is not working/loads forever.

 

Thank you in advance for your help!

Janki

1 Answer, 1 is accepted

Sort by
1
Accepted
Filip
Telerik team
answered on 02 Oct 2023, 10:00 AM

Hi, Janki,

I can confirm that there is an issue with the demo, apologies for any inconvenience that this might have caused you, for bringing this to our attention I have granted you some Telerik points. I have logged an internal task for fixing this and will patch it as soon as possible, it seems that the reason for it not opening is the mismatch of react and react-dom versions.

In the meantime here is the fixed runnable example, so that you don't have to wait:

https://stackblitz.com/edit/react-zmgboh-ir9pzb?file=app%2Fmain.jsx

Please let us know if further assistance is required.

Regards,
Filip
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!

Janki
Top achievements
Rank 4
Bronze
Iron
Iron
commented on 02 Oct 2023, 12:54 PM

Hi Filip,

Thank you for the link! Unfortunately, I'm not sure it's correct - it's collapsing down grouped rows but the demo page is for collapsing column groups. Please let me know if I misunderstood the demo's intention.

Best,

Janki

Wissam
Telerik team
commented on 04 Oct 2023, 08:22 AM

Hi, Janki,

I am entering instead of Filip since he is out of office today.

The demo is for hiding the grouped columns and not rows. For example, if you group the ID column, the column with the `ProductID` field will be hidden since its `show` property will be set to `false` and the Columns are rendered conditionally. Does this match what you need?

I do however agree that the `Collapse Groups` button should not be present since it is not related to the topic of this KB article. This is how the final example should look like:

As you could see, since the `CategoryName` column is initially grouped, its column is not rendered. However, if you remove this group, the `CategoryName` column will be shown again.

I hope this helps, but please let me know if you have any further questions on this matter.

Regards,
Wissam
Progress Telerik
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
commented on 04 Oct 2023, 12:53 PM

Hi Wissam,

That is actually a cool functionality that I wasn't looking for but will implement now!

I was moreso looking for the KendoReact version of this: https://docs.telerik.com/kendo-ui/knowledge-base/grid-expand-collapse-columns-group-button-click

  • I can follow the same structure/idea as the jQuery demo if there's no known/recommended "React" way to do it!

Please let me know what you recommend!

 

Thank you for your help with this,

Janki

Wissam
Telerik team
commented on 06 Oct 2023, 08:38 AM

Hello, Janki,

Thank you for getting back to me with more information.

I created an example similar to the one in jQuery using the MultiColumnHeaders feature, and the Custom Cells feature to render a custom header cell with a button. However, with the current implementation of the Grid, the functionality is not exactly the same as the one in jQuery as the columns would still visually appear with no data when collapsed:

Therefore, I would suggest not using MultiColumnHeaders, and adding the button either on one of the columns or rendering the button externally:

I hope this helps.

Regards,
Wissam
Progress Telerik
Tags
Grid
Asked by
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
Answers by
Filip
Telerik team
Share this question
or