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

How set row per page

11 Answers 2464 Views

Grid

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

11 Answers, 1 is accepted

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ł

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

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.

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

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.

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ł

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:

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

Regards,

Nikolay
Progress Telerik