Dynamically changing height of docked window

[sjkcwatsonParticipant]

I have a docking with 3 windows stacked vertically on top of each other. Each window has a grid control in it. Can I dynamically set the height of the docked window to be the height of the grid + some space after the grid has been populated?

<div id=”docking”>
<div>
<div id=”window1″>
window w/ grid control here
</div>
<div id=”window2″
another window with another grid control here
</div>
</div>
</div>

the page loads, but the height of the grid controls is configured on load and I’d like the windows to adjust height. I can get the height
var sectionsHeight = $(‘#jpxgridSiteSections’).jqxGrid(‘height’);
sectionsHeight = sectionsHeight + 200;

but cannot figure out the right place to adjust the height of the window so it displays the entire grid.

Thanks!

[TodorParticipant]

Hello sjkcwatson,

Please review the following example whether it fits your needs.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[sjkcwatsonParticipant]

Sort of – you’ve got the grid in the window. What I want to do is change the window size based on the grid – in your example the window height is set to 500. My grid has nested rows so when expanding they overlap the window. My goal with the docking windows was to collapse the various sections so they can open the section they want to work on. It might be easier to just handle with javascript to show/hide the div.

[TodorParticipant]

Hello sjkcwatson,

The jqxWindow has an initial height of 500px, but in grid’s callback function ready we take the grid’s height and set the window’s height:

ready: function() {
      var gridHeight = $('#jqxgrid').jqxGrid('height');
      $('#jqxwindow').jqxWindow({
        height: gridHeight + 200
      })
 },

I think that is what you want to achieve.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts