can i set the grid height or the number of rows adapt to the div outside?

[africanfarmerMember]

if there is a div as the outline of grid, how to make the grid automatically change its row height  or line number when this grid change size?

i means when outside div enlarge from 10  to 20, the row height may change from 3 to 4 if there is 10 rows in one page, or maybe the number of rows change from 10 to 20, in order to fulfill this out div.

[DimitarParticipant]

Hello africanfarmer,

Unfortunately, jqxGrid does not support this functionality.

Best Regards,
Dimitar

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

[africanfarmerMember]

Thanks Dimitar,

So i face a problem that i place a grid in a window. it is ok when show in 15 inch screen, however, the bottom part of grid will be insert into the bottom of window means hide in 13 inch. i donot wish to use scrollbar just wish all rows show in one page on every screen.

[DimitarParticipant]

Hi africanfarmer,

As I understand it, this is the same requirement you posted earlier. Unfortunately, there is no way to achieve it. You may, however, size the window according to the grid inside by setting jqxWindow’s width and height to “auto”.

Best Regards,
Dimitar

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

[dperryParticipant]

I’ve done something similar to this in a project. What I did was set the wrapper div to fixed positioning with hidden overflow, docked to the window edges with space at the top for a header

css:

#gridWrapper {
  position: fixed;
  top: 100px;
  bottom: 0;
  right: 0;
  left: 0;
}

add a event listener to the window.resize event to call a method you have, such as resizeGrid, that calculates the height of the grid based on the window size and the number of records being displayed

    var resizeGrid = function () {
        var gridHeight = maxGridHeight;
        var $window = $(window);
        var screenHeight = minHeight < $window.height() ? $window.height() : minHeight;
        var remainHeight = screenHeight - 190; // extra padding
        if (remainHeight < minHeight) {
            remainHeight = minHeight;
        }
        if (remainHeight > gridHeight) {
            gridHeight = gridHeight + scrollbarPadding;
        }
        else {
            gridHeight = remainHeight;
        }
        gridElement.jqxGrid({height: gridHeight});
    };

This relies on maxGridHeight being set when the grid data is loaded as follows:

maxGridHeight = gridElement.jqxGrid(‘rowsheight’) * (items.length + 1 /* filter row */ ) + parseInt(gridElement.jqxGrid(‘columnsheight’), 10) + extraPadding;

and minHeight being set to some minimum height you want in place for the grid — for example, to accommodate a grid with no items.

Call resizeGrid after setting maxGridHeight in your data load method.

Note, this is a modified / cleaned up version of what I’m using, so I haven’t tested it as listed here.

[Author]

Posts