Auto-Resize height of nested grid

[mattkayParticipant]

Hi Peter:

We are not able to find a way to auto-resize the height of a nested grid and was hoping that you might have a solution for us. lets say for example that the main grid contains invoices and the nested grid contains invoice items. lets also assume that we have 10 invoice rows in the main grid. since each invoice can have differing numbers of products, the height of the nested grids will vary from invoice to invoice. we are not able to find a method to auto-resize the height of the nested grid. the desired feature would be to adjust the height of the nested grid when the user clicks the arrow to expand the nested grid. if there are 5 rows in the nested grid then the grid height should expand to the max available remaining browser height or whatever height is required to accommodate the 5 rows.

currently we have to fix the height of the nested grid at some random height and if the nested grid has more rows than the height then the nested grid will scroll. while this might sound like a trivial feature, our application UI is quite complex and our inability to re-size the nested grid makes the UI very awkward for users. I am wondering if you might have some suggestions or work-around to solve this issue.

btw, we are using the latest version 3.1.0. also, we are not able to use the jqxTreeGrid in this case because the column headers are different between the main grid and the nested grid so we have to use the jqxgrid in a hierarchical manner. your help on this would be greatly appreciated.

best,

Matt

[Peter StoevKeymaster]

Hi Matt,

The height of a nested Grid could be Fixed only, because the row details in jqxGrid are with Fixed height. If you need to display many rows in a nested Grid and do not want to have scrolling behavior, then the only other option is to enable paging.

Best Regards,
Peter Stoev

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

[mattkayParticipant]

Hi Peter:

thanks for the response. i understand your point about paging within the nested grid and we have thought of that concept. but even if we decide to show up to 5 rows in the nested grid for example, in the scenario where there are less than 5 rows the grid will still consume the space of 5 rows. By any chance, do you have any future plans to allow for variable height of the nested grid/variable height of row details? any feedback on your future plans here will help us in our development plans.

Best,

Matt

[Peter StoevKeymaster]

Hi Matt,

If you enable paging, you can set up the page’s size through the pagesize property and you can also modify the list of pagesize options by using the pagesizeoptions property.We do not have plans to modify the Row Details functionality. Our future development plans are published on our Roadmap page.

Best Regards,
Peter Stoev

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

[ganeshParticipant]

Hi Peter,
is there updated or developed rowdetailstemplate rowdetailsheight= auto with new version or in purchase license .
Thank you,
Ganesh.

[Peter StoevKeymaster]

Hi Ganesh,

No, auto-height in row details is not supported. Due to the virtualization and for performance reasons of the Grid, this specific functionality cannot be achieved.

Best Regards,
Peter Stoev

jQWidgets team
https://www.jqwidgets.com

[ganeshParticipant]

Thanks Peter about your response and I understand due to virtualization and performance reasons dynamic height for row details is not made available through standard options. My question is regarding work around to address this issue. In current way of implementation we loose too much of vertical space and in some case we have scroll bar.

After studying the HTML output of nested grid, it looks like divs with rowdetailsHeight in their style are already created before we render nestedgrid in them. Do we have any work around to update the style containing height in such Divs?

Thank you,
Ganesh

[bcit6kParticipant]

Hi All,

i found a solution for this problem. I know how many rows my nested grid has (count them in the datastore for the parent grid)

$("#yourgrid").on('cellclick', function (event) {
                  var datafield = event.args.datafield;
                  var datarow = $("#yourgrid").jqxGrid('getrowdata', event.args.rowindex);
                  var rowHeight = 43+datarow[16]*32; //<-calc your height, in my case the cnt of the rows is in column 16, an i added 43px for the header
                  $("#yourgrid").jqxGrid('rowdetailstemplate').rowdetailsheight = rowHeight;
});

br

chris

[MartinParticipant]

Hello Chris,

Thank you for your contribution!

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts