Fill in pagesize of grid with empty rows

[B]

Hello, just started with kendo and angular so this might be a basic question.

I have set up a template for a grid:

<h2>Peoples</h2>

<div class="peoplesOverview">

  <kendo-grid [data]="gridData"

    [scrollable]="'virtual'"

    [pageable]="true"

    [pageSize]="10">

    <kendo-grid-column field="Name" title="Name"></kendo-grid-column>

    <kendo-grid-column field="Title" title="Title"></kendo-grid-column>

  </kendo-grid>

  <kendo-button class="downloadButton">Download</kendo-button>

</div>

 

And in my component.ts I set up a sample dataset to test:

export class PeopleOverviewComponent {

  public gridData: Person[] = [

    {

      Name:"Jane",

      Title: "Worker",

    }

  ];

}

 

Currently this creates a grid with one row, I would like to have the grid be filled in with empty rows to fill the page size to 10.

 

All the help is appreciated!

[Martin]

Hi Bart,

Thank you for the provided code snippet.

In order to display empty rows to fill the page size, the developer needs to add empty objects to the items collection. Please keep in mind that empty rows have different heights that is why some custom CSS needs to be used.

Please check the following example that demonstrates the suggestions:

https://stackblitz.com/edit/angular-s8czoq

I hope this helps.

Regards,
Martin
Progress Telerik