[Solved] Fixed grid height

[Tawit]

How can i fixed grid height?

I want to show maximum row per page is 10 rows.
But if the data has only 5 rows, i want to show 5 rows data and 5 empty rows.
Total are 10 rows, Can i do this?

[Dimo]

Hello Tawit,

You need to subscribe to the OnDataBound event if Ajax binding is used, and to OnLoad if server binding is used.

Html.Telerik().Grid().ClientEvents(ev => ev.OnDataBound("addEmptyRows"))

Then you should count how many data rows you have and append as much empty rows as needed. The number of columns must be taken into account.

The Javascript code should do this if scrolling is enabled:

function addEmptyRows(e)
{
    var dataTable = $(".t-grid-content table", this);
    var rows = $("tr", dataTable).not(".t-no-data");
    var rowsCount = rows.length;
    var pageSize = 20;
    var difference = pageSize - rowsCount;
    var columnCount = $(this).data("tGrid").columns.length;
    if (rowsCount > 0 && difference > 0) {
        var rowClasses = [];
        rowClasses[0] = $(rows[rows.length - 1]).hasClass("t-alt") ? "" : "t-alt";
        rowClasses[1] = rowClasses[0] == "t-alt" ? "" : "t-alt";

        for (var j = 0; j < difference; j++) {
            var str = "";
            str += '<tr class="' + rowClasses[ j % 2] + '">';
            for (var k = 0; k < columnCount; k++) {
                str += "<td> </td>";
            }
            str += "</tr>";
            $(str).appendTo(dataTable);
        }
    }
}

The dataTable selector should be changed to the following if scrolling is not enabled:

var dataTable = $("> table > tbody", this);

Greetings,
Dimo
the Telerik team