How set row per page

[Paweł Korczak]

Hello ..

I made the kendo Grid widget.

How to adjust the number of lines per page to the current height of the hang and height of the entire grid object?

And how will this change when the height of the grid object changes?

Paweł 

[Nikolay]

Hello Paweł,

I would suggest following the approach demonstrated in the following article. It shows how to change the pageSize property of the Grid when the height changes so that as many rows as possible are always displayed.

• https://docs.telerik.com/kendo-ui/knowledge-base/grid-pagesize-relative-to-height

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Paweł Korczak]

Great solution ..

But I have another problem ...

I have many such GRIDs I made the parameterization of this procedures giving the address of a specific GRID.

The problem is that the row height calculation gives a null value because there is a direct reference to the variable.

And the second thing is how do you know how to use the class indicated in the GRID parameter?

function SetGridRowCount( gridElement ) {
    gridElement.data("kendoGrid").resize();
    var newHeight = gridElement.height();
    var headerHeight = $(".k-grid-header").height();
    var pagerHeight = $(".k-grid-pager").height();
    var rowHeight = $("#grid tr:last").height();

alert ( 'SetGridRowCount math= ( ' + newHeight + ' - '  + headerHeight  + ' - ' + pagerHeight + ' ) / ' + rowHeight  ) ;

if ( rowHeight == null ) { return ; }

    var numberOfRows = Math.round((newHeight - headerHeight - pagerHeight) / rowHeight);

    gridElement.data("kendoGrid").dataSource.pageSize(numberOfRows);
    gridElement.data("kendoGrid").refresh();
  }

Paweł

[Paweł Korczak]

Resizing detection does not work for DIV sections.

Paweł 

Example: 

tmpDivGridKlienci.innerHTML = 
   '<div id="divGridKlienci" > </div>'
 + '<div id="divKlienciInfo" > <form id="DivNowyKLient"></form> </div>' 
;

$("#IKORmainWork").append ( tmpDivGridKlienci )  ;

$("#divMainKlienci").kendoSplitter({
  orientation: "horizontal" ,
  panes: [  { collapsible: false , resizable: true, scrollable: false , size: "1200px" },
            { collapsible: false , resizable: true , scrollable: false  } ]
});

dsGridKlienci = new kendo.data.DataSource({ 
        transport: {
            read: function(o) {
               var akcja ={ };   
               ReadDataGrid ( o , MyURL + 'Faktury' , akcja ) ;
            }
         },
         schema: {
            data: function(response) { return JSON.parse(response).Klienci ;   },
            total: function(response) { return JSON.parse(response).Klienci.length; }
         },
        pageSize: 10 
    });

cfgGridKlienci ={ dataSource: dsGridKlienci , 
    autoBind: false , pageSize: 10 , height: "100%" , groupable: false ,  sortable: true , resizable: true,
    toolbar: [ { name: "excel" },{ name: "pdf" } ,
    { name:"nowy klient"  ,  
      template: '<button class="k-button" id="btNowyKlient"  onclick="NowyKlient()">Nowy klient</button>'
    } 
    , { name: "search" }  ],
    pageable: { refresh: true,  pageSizes: true,  buttonCount: 10  },     
    columns: [
     { field: "Id"  , title: "Numer"    , width: 60     },
     { field: "Nazwa"     , title: "Nazwa"    , width: 360    },
     ]
};

$("#divGridKlienci").kendoGrid(  cfgGridKlienci ) ;
$("#divGridKlienci").bind ( 'resize' , function() { SetGridRowCount( $("#divGridKlienci") ); });

[Nikolay]

Hi Paweł,

Thank you for getting back to me.

I am not sure what the requirement is. Can you please assemble a sample Dojo demo where I can examine what you are trying to achieve. This will help me better understand the case and so I will be able to advise further.

Regards,
Nikolay
Progress Telerik

[Paweł Korczak]

I wrote some code cut from my system for the example.

Look, the red frame comes out too green and is too low.

Does not fill the green.

Help me improve it a bit to read data from the given URL location

Paweł 

[Paweł Korczak]

https://dojo.telerik.com/@[e-mail]/oxIjuPaf

[Paweł Korczak]

https://dojo.telerik.com/IBuNIQoN

[Paweł Korczak]

There are many problems here from the beginning.

You have a new project.

The red frame is too small than expected. It should fill the green frame.

Secondly, the red band is wider than the green frame.

Only a minimal change with the backs sets the correct size.

But this causes the inner frames not to change their dimensions.

https://dojo.telerik.com/uGaxuBAN/2

 

[Nikolay]

Hi Paweł,

Thank you for sharing the Dojo and updating me on the case.

The problem here is due to the fact the height of the outer container IKORmainMAIN is set from the styles chick load a bit later. This means that the height gets applied later when the IKORmainWork container is already loaded. Thus, I would suggest setting the divIkorMAIN height inline upon initialization:

divIkorMAIN = document.createElement("div") ;
divIkorMAIN.id = "IKORmainMAIN" ;
divIkorMAIN.setAttribute("style", "height: 750px")
divIkorMAIN.innerHTML  =
    '<div id="IKORmainFiltr" >'
  + '</div>'
  + '<div id="IKORmainWork" ></div>'
  ;

Additionally, the padding and the border of the IKORmainWork container can be added in the element's total width and height with the below:

      #IKORmainWork {
        background-color: #F9BCCF;                 
        box-sizing: border-box;
        border-style: groove;
        border-color: red;
        border-width: 3px;
      }

Here I am posting a Dojo applying all of the above. Let me know if you have any questions.

• https://dojo.telerik.com/uGaxuBAN/4

Regards,
Nikolay
Progress Telerik

[Paweł Korczak]

Thank you great hint ... It's really secret knowledge ...

But I took the next 2 steps and see the details.

On the right, the red frame covers the green frame.

And look at the bottom ..

The blue frame cannot be seen and the grid is too large ...

But what's most interesting !!!

If I change the width of my program ...

The whole screen looks better.

You still can't see the blue frame at the bottom ...

https://dojo.telerik.com/uGaxuBAN/6

Increase the size of the blue border to 3 px. You can see better

Paweł 

[Nikolay]

Hi Paweł,

To allow the blue border of the divGridKlienci container to be visible I would suggest applying box-sizing: border-box to it.

      #divGridKlienci{ 
        border-style: solid;
        border-color: blue;
        border-width: 3px;
        box-sizing: border-box;
      }

Additionally, the Grid styles render after the Grid has rendered, I would recommend refreshing after it has loaded it so they apply correctly.

 $( document ).ready(function() {
    	var grid = $("#divGridKlienci").data("kendoGrid");
        grid.refresh();
  });

Here is a Doj applying the above:

• https://dojo.telerik.com/uGaxuBAN/9

Regards,

Nikolay
Progress Telerik