Number of lines in pagesize

8 posts, 0 answers
  1. Emil
    Emil avatar
    46 posts
    Member since:
    Mar 2016

    Posted 16 Feb 2017 Link to this post

    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

     

  2. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 20 Feb 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Emil
    Emil avatar
    46 posts
    Member since:
    Mar 2016

    Posted 22 Feb 2017 in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 23 Feb 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Emil
    Emil avatar
    46 posts
    Member since:
    Mar 2016

    Posted 27 Feb 2017 in reply to Stefan Link to this post

    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.

     

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1017 posts

    Posted 01 Mar 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Emil
    Emil avatar
    46 posts
    Member since:
    Mar 2016

    Posted 31 Mar 2017 in reply to Alex Hajigeorgieva Link to this post

    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 ?

     

  8. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 04 Apr 2017 Link to this post

    Hello Emil,

    I can assume that this may be a timing issue.

    I can suggest another approach to 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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top