1

私は現在、以下に示すものと同じ kendoui グリッドを実装しています: http ://demos.kendoui.c​​om/web/grid/index.html

私が見ることができる問題は、グリッドに自動高さがなく、レコードが10未満の場合、グリッドは同じ高さのままであることです。

とにかく、以前のバージョンを使用したときにこれが発生しないため、これを解決できますか

次の JavaScript を使用してみましたが、まだ機能しません。

function resizeGrid() {
        var gridElement = $("#grid");
        var dataArea = gridElement.find(".k-grid-content");

        var newGridHeight = $(document).height() - 350;
        var newDataAreaHeight = newGridHeight - 65;

        dataArea.height(newDataAreaHeight);
        gridElement.height(newGridHeight);

        $("#grid").data("kendoGrid").refresh();
    }

    $(window).resize(function () {
        resizeGrid();
    });

ありがとうございました

4

4 に答える 4

2

Grid には実際にautoheightがあるため、問題を理解できません。グリッドの定義で、グリッドが持つべきピクセル数を示す属性を定義すると、5 または 50 のレコードがあっても、その高さに固定されます。実際により多くのスペースが必要な場合はスクロールバーが追加され、必要が少ない場合は空のスペースが表示されます。

質問で参照している例では、次を試してください。

$("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(20),
        pageSize: 10
    },
    height    : 500,
    groupable : true,
    sortable  : true,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" } ,
        { field: "LastName", width: 90, title: "Last Name" } ,
        { width: 100, field: "City" } ,
        { field: "Title" } ,
        { field   : "BirthDate", title   : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } ,
        { width: 50, field: "Age" }
    ]
});

高さは500pxになります。

于 2013-10-18T06:00:11.467 に答える
1

cssを使用して、コンテナーに合わせて高さを調整するグリッドを描画し、周囲の他の要素を考慮することができます。

#grid {
    /* chop the grid's height by 45px */
    height: calc(100% - 45px);
}

#grid .k-grid-content {
    /* chop the grid content's height by 25px */
    height: calc(100% - 25px) !important;
}

これは、グリッドの宣言 (.js 側) で「高さ」プロパティを使用せずに行われます。

私にとってはうまくいきます。

于 2015-11-08T14:56:40.813 に答える
0

私にとっては、削除するとscrollableうまくいきました。行が 1 つしかない場合、グリッドは小さく、ページサイズ レベルまで行の量と共に大きくなります。高さ設定不要。

于 2022-03-01T08:23:02.910 に答える