Rowdetails custom height based on nested grid height

[dan123Participant]

Hi i am trying to solve this issue where i have this nested grid inside the rowdetails.
I saw the example in jqxgrid demos to set custom height, where whenever you expand a row it the details will be the same height as the nested grid. Remember the nested grid is set to autoheight.
Would like to know if there is a workaround to set the rowdetails height same as the nested grid?

Here is my jsfiddle:
http://jsfiddle.net/fz85ye1o/1/

[MartinParticipant]

Hello dan123,

You could set different heights to the row details. However, in order to be the same as the nested grid you would need to know its height.
You can check this Example.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[dan123Participant]

Hi Martin. Is there a way to set the height of rowdetails based on the number of records in the nested grid?
So for example if there are 5 records in nested grid, then set rowdetails height to 150px.

Or if there are 10 records in the nested grid, then set rowdetails height to 300px.

If there is a workaround like this that will be very helpful please.

[MartinParticipant]

Hello dan123,

Please, take a look at the following Example.
The height of the rowdetails is calculated depending on the number of the nested grid rows.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[dan123Participant]

Hi Martin,

Sorry again. So i tried to put all the nested data together under one variable ‘level2Data’. And i am trying to just retrieve nested records by using common id value using ‘CustomerID’ based on each parent record. I am not sure how to define this, and would like a workaround if available. The height calculation is good by the way and i want to incorporate with this.

So based on the created example
Parent Record 1: Bakery
Expanded records: Shows two records which are Jake and Phil

Parent Record 2: PizzaStore
Expanded records: Shows three records which are Chase, Mario, and Gab

Here is the jsfiddle:
http://jsfiddle.net/fya3cedw/

[MartinParticipant]

Hello dan123,

I have updated your code by filtering the level2Data array by ‘CustomerID’.
Please, check this Example.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[RomainParticipant]

Hello,

I search on this forum but i found nothing.

I would like the same thing but I work with Angular. Do you know how is it possible to transcode your example with Javascript to Angular ?

Regards

Romain

[MartinParticipant]

Hello Romain,

Here is the same Example but for Angular.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[dan123Participant]

Hi Martin,

I noticed a issue with the dynamic rowdetails logic

So when i turned on the showfilterrow and sortable, then the dynamic rowdetails are not working anymore and causing the grid to freeze and act strange.

Reproduce:
Filter for ‘Pizzastore’, and then do row expand. You will notice that the dynamic height don’t work anymore.
Similar issue when doing sorting and clicking expand.

I would appreciate if you have a workaround for this.

Here is example:
http://jsfiddle.net/sgrto0eq/1/

[dan123Participant]

Hi @martin_jqwidgets,

Sorry to reach out again, but i was checking if you had chance to review my previous post that i am facing issue still. Thanks for helping with this.

[adminKeymaster]

Hi dan123,

Martin is currently in summer vacation. He will be able to look at this again and answer you on Monday.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[MartinParticipant]

Hello dan123,

The issue is caused because when you filter or sort the parent grid the index parameter of the rowdetailstemplate no longer corresponds to the index of the localdata. For example, when you filter by “Pizzastore” the index is 0 and not 1, because that is the first row now.

As a workaround, I could suggest you to set the height of the parentElement inside the initrowdetails callback. Here is an Example. However, it would still not be displayed perfectly.

Another solution would be to set a bigger height so all child grids fit in, if this would be OK for your needs.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[dan123Participant]

@martin_jqwidgets,

Anyway to make the grid to refresh so that we don’t see the line issue when viewing the row details while filtering or sorting.

[MartinParticipant]

Hello dan123,

No, unfortunately, refreshing the grid would not resolve this line issue.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts