autosizing of pagesize

[Emil]

Hi,

 

if my browser is on a 4k display I can get a lot more result lines on each screen than on 1080p is there a way for the grid to size its results based on the size of the display? its kind of awkward to have results that only use 20% of the screen size when you have a lot more space to use.

 

Regards,

Emil

[Patrick | Technical Support Engineer, Senior]

Hello Emil,

We have a great demo in our documentation which shows how to resize and expand the Kendo UI Grid to 100% height.  

To change the amount of records shown in a Grid, you can set the pageSize of the DataSource.    

var grid = $("#grid").data("kendoGrid");
grid.dataSource.pageSize(30);

Please take a look at this Kendo UI Dojo by Progress which shows one approach using the resize demo and setting the pageSize.  The example sets the pageSize based on the window size.  

Hope this helps!  

Regards,
Patrick
Telerik by Progress

[Emil]

I tried the demo you pointed to and things work great there, I on the other hand create the grid in c# code not javascript/jquery

it looks like this

 

I tried messing about with it and I have no idea what it is in the demo that makes the grid follow the sizing of the browser viewport

I added the resize window event and that is called without error still no resizing happens.

suggestions ?

 

<div class="container customClass" style="font-family:Calibri">
        @(Html.Kendo().Grid<VaultLeitarvefur.Models.VaultNidurstodur>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.File.Name).ClientTemplate(@Html.ActionLink("#=File.Name#", "saekjaSkra", "saekja", new { Id = "#=File.Id#", FolderId = "#=File.FolderId#" }, new { target = "_blank" }).ToHtmlString()).Title("Heiti").Width(100).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.Verkefni).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key01).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.Verkefnisnumer).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key02).Width(100).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.NanariStadsetning).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key03).Width(100).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.EfniTeikningar).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key04).Width(100).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.Teikninganumer).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key08).Width(100).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.Utgafa).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key13).Width(100).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.DagsetningUtgafu).Title(VaultLeitarvefur.Models.VaultNidurstodur.Key14).Format("{0:dd/MM/yyyy}").Width(100).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        //columns.Bound(p => p.file.Name).Filterable(false);
        columns.Bound(p => p.Id).Filterable(false).Visible(false);
    })
    .Events(events =>events.Change("row_change")) // handle the "change" event
    .Events(events =>events.DataBound("onDataBound"))
    .DataSource(dataSource => dataSource
        .Ajax() // or .Server()
        .PageSize(40)
        .Model(model => model.Id(p => p.Id))
        .Read(read => read.Action("Read", "Home",new { searchString = "$('#searchString').val()" })
        .Data("searchReadData")
            )
    )
    .Filterable(f => f.Mode(GridFilterMode.Row))
    .Pageable(pager => pager
        .PageSizes(true) // Default page sizes are 5, 10 and 20
        .PageSizes(new[] { 10, 20, 30 })
        .Messages(message => message.ItemsPerPage("Fjöldi á síðu"))
        .Messages(message => message.Page("Síða"))
        .Messages(message => message.Of("Af"))
        .Messages(message => message.Display("Sýna"))
        .Messages(message => message.Empty("Tómt"))
        .Messages(message => message.First("Fyrsta"))
        .Messages(message => message.Last("Síðasta"))
        .Messages(message => message.Next("Næsta"))
        .Messages(message => message.Previous("Síðasta"))
        .Messages(message => message.Refresh("Uppfæra"))

        )
    .Selectable()
    .Sortable()
    .Scrollable()
    .Resizable(rl => rl.Columns(true))
    //.Filterable()
    .HtmlAttributes(new { style = "height:750px;width:1800px;" })
    .ClientDetailTemplateId("client-template")
    .Filterable(f => f.Messages(m => m.Info("custom info")))
    .Filterable(f => f.Operators(m => m.ForNumber(n => n.IsEqualTo("Jafngilt")
                        .IsGreaterThan("Er Stærra en"))))
    .Filterable(f => f.Operators(m => m.ForString(n => n.IsEqualTo("Jafngilt")
                        .EndsWith("Lýkur með")
                        .IsEmpty("Er tómt")
                        .IsNotEmpty("Er Ekki tómt")
                        .IsNotEqualTo("Er ekki jafngilt")
                        .IsNotNull("Er ekki null")
                        .IsNull("Er null")
                        .StartsWith("Hefst með")
                        .Contains("Inniheldur")
                        .DoesNotContain("Inniheldur ekki")
                         )))
    .Filterable(f => f.Messages(m => m.And("Og")
        .Info("custom info")
        .Cancel("Hætta við")
        .CheckAll("Velja allt")
        .Info("Sía")
            .Operator("Inniheldur")
            .Or("eða")
            .And("Og")
            .Cancel("Hætta við")
            .CheckAll("Velja allt")
            .Clear("Hreinsa")
            .Filter("Sía")
                .And("Og")
                .Cancel("Hætta við")
                .CheckAll("Velja allt")
                .Clear("Hreinsa")
            .IsFalse("ErÓsatt")
            .IsTrue("ErSatt")
            .SelectValue("Velja gildi")
            .Value("Gildi")
    ))
    .Filterable(messages => messages
        .Enabled(true)
        )
        )
    <br />
    Fjöldi niðurstaðna : <label id="countElement"></label>
</div>

[Konstantin Dikov]

Hello Emil,

The problem might be due to the fact that you are setting the Height of the Grid through attribute. Can you please remove the height from the Grid configuration and see if this will resolve the issue.


Best Regards,
Konstantin Dikov
Telerik by Progress

[Emil]

Excellent, well spotted. that solved the resizing.

But in the process it created another problem, the result grid is only 5 lines, no matter how many results I select per page.

is it possible to have the number of result lines also follow the size of the browser viewport ?

 

or is there something else in there that Im missing that causes the result to be so narrow ? 

I attached a file showing the problem

 

[Konstantin Dikov]

Hello Emil,

Can you please follow the second link from the first reply in this thread, where the PageSize is calculated based on the height of the Grid. However, please note that the Height of the grid should be set to "100%" as in the example, so it could extend to the height of the wrapping element.


Regards,
Konstantin Dikov
Telerik by Progress

[Emil]

I tried the demo you mentioned. seems to be fine in the dojo example. No matter what I try to move over to my project it doesnt matter.

Still this grid takes about 40% of the height of the browser screen. there is lots of empty space below the grid and footer (text from layout.cshtml).

Im using MVC and the grid is generated from there NOT in javascript.

 

I tried using the style to set as in the example, I tried removing all divs that were containing the grid and still didnt change.

 

Regards,

Emil

[Emil]

Just to clarify further. I use a "standard" bootstrap 3 setup, that is I create a new visual studio project with bootstrap.

so the grid will be in several divs

 

can you give an example that will work with bootstrap ?

[Konstantin Dikov]

Hi Emil,

We do not have such example, but you can inspect the elements that wrap the Grid and see which of them is causing the height issue. Note that Grid with 100% height will expand to the height of its wrapping elements.


Regards,
Konstantin Dikov
Telerik by Progress

[Curt Rabon]

@Email,

I use Kendo MVC also, and this is how I make the grid auto-height to fill the remaining space in the browser:

First, in the MVC view (razor code), I use the following for the scrollable/height setting on the grid:

.Scrollable(s => s.Height(800))

The 800 here is not important, it would work if you put only 200 or 1200.  This will be the initial height only, however I recommend a large enough value to make the grid *about* the same height as the window, so that when it gets resized, it doesn't flicker as bad.

Then in the bottom of the razor view code, I have the following JavaScript:

<script>
    var gridObj;

    $(document).ready(function () {
        gridObj = $('#yourGridID').getKendoGrid();
        gridAutoHeight(gridObj);
    });

    $(window).resize(function () {
        gridAutoHeight(gridObj);
    });

    function gridAutoHeight(gridObj, bottomMargin) {
        try {
            if (gridObj) {
                gridObj.element.height($(window).height() - gridObj.element[0].offsetTop - (bottomMargin || 40));
                gridObj.resize();
            }
        } catch (e) {
            console.log('Error resizing grid: ' + e.toString());
        }
    }
</script>

 

What the JavaScript does is this:

As soon as the DOM is ready, you get a reference to the grid (gridObj variable), and then tell the grid to resize height right now.  In the gridAutoHeight() function, I'm calculating the grid height using this formula:  the total window height - the "top" of the grid (where it's now in relation to the top of the page) - either a custom margin for the bottom or defaulting to 40.

Then when the browser is resized, I run this same function.

[Curt Rabon]

@Emil,

Also, I put the autoGridHeight() function in a .js library so I can call it from multiple views/pages.

[Emil]

Great answer, great solution. works very well.

 

Thank you