This is a migrated thread and some comments may be shown as answers.

How set row per page

11 Answers 1152 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Paweł Korczak
Top achievements
Rank 1
Iron
Paweł Korczak asked on 21 May 2020, 06:06 PM

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ł 

11 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 25 May 2020, 11:41 AM

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.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Paweł Korczak
Top achievements
Rank 1
Iron
answered on 26 May 2020, 06:00 AM

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ł

0
Paweł Korczak
Top achievements
Rank 1
Iron
answered on 26 May 2020, 06:07 AM

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") ); });


0
Nikolay
Telerik team
answered on 27 May 2020, 09:13 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Paweł Korczak
Top achievements
Rank 1
Iron
answered on 28 May 2020, 10:09 PM

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ł 

0
Paweł Korczak
Top achievements
Rank 1
Iron
answered on 28 May 2020, 10:14 PM
https://dojo.telerik.com/@p.korczak@info-kor.pl/oxIjuPaf
0
Paweł Korczak
Top achievements
Rank 1
Iron
answered on 28 May 2020, 10:16 PM
https://dojo.telerik.com/IBuNIQoN
0
Paweł Korczak
Top achievements
Rank 1
Iron
answered on 31 May 2020, 10:33 AM

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

 

0
Nikolay
Telerik team
answered on 01 Jun 2020, 02:54 PM

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.

Regards,
Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Paweł Korczak
Top achievements
Rank 1
Iron
answered on 02 Jun 2020, 07:55 AM

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ł 

0
Nikolay
Telerik team
answered on 04 Jun 2020, 07:55 AM

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:

Regards,


Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Paweł Korczak
Top achievements
Rank 1
Iron
Answers by
Nikolay
Telerik team
Paweł Korczak
Top achievements
Rank 1
Iron
Share this question
or