Implement maximum rows for dynamic height of grid

[rens]

I want the following behaviour of the grid height like in this Fiddle: http://jsfiddle.net/dimodi/SDFsz/
but then also calculate the maximal possible rows on the screen without showing the scrollbar everythime the user changes the browser height. So our users can easily go with pageUp and pageDown through the gird.

And change the first value on the pageSize dropdown to 'Fit'.

Is it possible to make a directive in AngularJS that can do this behaviour?

[Dimo]

Hello Rens,

The described behavior requires handling of non-Grid events and custom coding, so it cannot be defined in the Grid's AngularJS directive.

The pageSize dropdown in the Grid pager is designed to work only with numeric values, which all trigger the same widget action with no exceptions, so injecting a "Fit" option will cause unexpected side effects. Basically, you need to subscribe to the window.resize event, calculate how many rows fit in the Grid data area, and set the pageSize of the Grid dataSource accordingly.

http://docs.telerik.com/kendo-ui/api/web/grid#fields-dataSource

http://docs.telerik.com/kendo-ui/api/framework/datasource#methods-pageSize

It would be good to configure the Grid with an autoBind:false option, so that you can calculate the initial pageSize and spare one server request.

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-autoBind

Calculating how many rows fit in the Grid involves measuring the height of one row. Initially when there are no rows, you can append one manually to the Grid's tbody, that will be removed automatically when the Grid is rebound.

http://docs.telerik.com/kendo-ui/api/web/grid#fields-tbody

If by any chance you are targeting one browser only, it is safe to use a hard-coded row height.

Regards,
Dimo
Telerik