How to set fixed rows on Kendo UI Grid

Question

I have a kendo grid on ASP.NET-project which gets the data from a (MVC) model via ajax. The grid is pageable, controller sending models data as PagedList.

Now I want to have the grid a non-pageable, so that the controller sends just a List instead of a PagedList. The thing is that I want the grid always to be having fixed number of rows (lets say 5), so that the row count would not change even if the data amount from the model changes. It will be made sure that if the number of rows is 5, the controller would not send more than 5 objects total.

How to alter the grid to have fixed number of rows? It seems pretty trivial, but I did search for an answer for quite a while and found no single clue.

.Columns(columns =>
      {
          columns.Bound(u => u.Index)
              .Filterable(false)
            columns.Bound(u => u.Level)
              .Width(60);
            columns.Bound(u => u.Description)
              .Width(120);
            columns.Bound(u => u.DataId)
              .Width(120);
      })
      .Editable(e => e.Mode(GridEditMode.InLine))
      .DataSource(source =>
      {
          source.Ajax()
               .Read(read => read.Action("GetAllLevels", "Level", ViewBag.RouteObjforUnitId).Data("data"))
                      .Model(model =>
                      {
                          model.Field(o => o.Index).Editable(false);
                      })
                      .Model(model => model.Id(o => o.Index));
      })
      .Events(e =>
      {
          e.DetailInit("hideHeaders");
      })
      .Pageable(pageable =>
      {
          pageable.PageSizes(Helper.PageSetting.ToArray());
          pageable.Enabled(true);
      })

Answer 1

Try this,

.Columns(columns =>
      {
          columns.Bound(u => u.Index)
              .Filterable(false)
            columns.Bound(u => u.Level)
              .Width(60);
            columns.Bound(u => u.Description)
              .Width(120);
            columns.Bound(u => u.DataId)
              .Width(120);
      })
      .Editable(e => e.Mode(GridEditMode.InLine))
      .DataSource(source =>
      {
          source.Ajax()
               .Read(read => read.Action("GetAllLevels", "Level", ViewBag.RouteObjforUnitId).Data("data"))
                      .Model(model =>
                      {
                          model.Field(o => o.Index).Editable(false);
                      })
                      .Model(model => model.Id(o => o.Index));
					   .PageSize(5)
      })
      .Events(e =>
      {
          e.DetailInit("hideHeaders");
      })
     Pageable(pager => pager.PageSizes(new int[] { 25, 50, 100, 200 }))
                .Sortable()
                .Scrollable(scrollable => scrollable.Enabled(false))

Answer 2

Set the page size of the grid on the data source, like so:

.DataSource(source => {
    source.Ajax()
        .Read(read => read.Action("GetAllLevels", "Level", ViewBag.RouteObjforUnitId).Data("data"))
        .Model(model =>
        {
            model.Id(o => o.Index))
            model.Field(o => o.Index).Editable(false);
        })
        PageSize(5); 
      })

Answer 3

Found a solution, just filling the grid up with empty objects on controller side did the trick .