Number of lines in pagesize

[Emil]

is it possible to calculate how many lines there should be in the initial pagesize from the gridsize so I can at least initialize the grid without a scrollbar ?

A more advanced question would resize the pagesize depending on how large the browser is and follow its resizing, this might require a refresh of its data Im not sure.

 

I have a kendo grid in MVC and I get double scrollbars most of the time, one for the grid and one for the page, slightly annoying.

 

Regards,

Emil

 

[Stefan]

Hello Emil,

If there is no a record which is taking more that one line, the line numbers should be equal to the initially set pageSize.

As for setting the pageSize based on the window dimensions, this will require manual calculation to determine the page size and then using the pageSize method to set the newly calculated pageSize:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-pageSize

Also, if the Grid should have no scrollbar, I can suggest setting its scrollable property to false, then the Grid will only be scrolled with the page content if needed leaving only one scrollbar on the page:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-scrollable

I hope this will help to achieve the desired result.


Regards,
Stefan
Telerik by Progress

[Emil]

Very close.

 

Let me explain my problem. When I set the pagesize to lets say 13 lines, the grid doesnt get that much smaller, it takes the same space on screen just doesnt use the full space.

I have some text at the top and text below the grid, I would like this to be exacly large enough to use the full screen realestate without the browser coming up with a scrollbar. 

This ofcourse changes if you resize the browser window.

Any suggestions on reducing the grids height ?

 

Regards,

Emil

[Stefan]

Hello Emil,

In this scenario, I can suggest using the height property of the Grid, as this will allow setting a fixed height to the Grid regardless of the Grid page size:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-height

If this needs to be changed on page resize, I can suggest using the setOptions method of the Grid to set the new height:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

Regards,
Stefan
Telerik by Progress

[Emil]

I tried 

 

            $('#grid').getKendoGrid({height: 50 });
or 100 doesnt matter it has no effect on the grid, and there is no javascript error.

 

my problem is that the grid is slightly to tall so I have to scroll of the screen to see a total count below (a label from me)

if I could just set it to maybe 90-95% of previous heigh I would be golden.

 

[Alex Hajigeorgieva]

Hello Emil,

To use the approach suggested by my colleague, you should make a call to the setOptions() method. So if you modify the code in your previous response like below, it should all work as expected:

var grid =  $('#grid').getKendoGrid();
grid.setOptions({height: 200});

Here is a runnable example:

http://dojo.telerik.com/aviQU

Alternatively, you may use the resize()  method of the Kendo UI Grid as it is designed for scenarios as the one you have:

http://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages#apply-resize-method 

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Emil]

I tried the resize method ,with the following code

Im 100% sure there is a gridObj object, I tried that with an alert command, I dont see any errors in firebug and everything looks ok, the grid just doesnt resize its height when I resize the browser, and the most annoying thing is that on a 4k display it only uses about 40% of the screen height, width works fine though.

        $(document).ready(function () {
            gridObj = $('#grid').getKendoGrid();
            gridAutoHeight(gridObj);
        });
        function gridAutoHeight(gridObj, bottomMargin) {
            try {
                if (gridObj) {
                    gridObj.wrapper.height($(window).height() - gridObj.element[0].offsetTop - (bottomMargin || 40) - 50);
                    gridObj.resize();
                }
            } catch (e) {
                console.log('Error resizing grid: ' + e.toString());
            }

 

any ideas ?

 

[Stefan]

Hello Emil,

I can assume that this may be a timing issue.

I can suggest another take the window height apply the custom calculations and then set the value to the Grid height using the setOptions method:

http://dojo.telerik.com/aviQU/2

Regards,
Stefan
Telerik by Progress