web-dev-qa-db-ja.com

剣道UIグリッドの高さを変更する方法

ラッパーを使用しているときにKendo Gridの高さを変更するにはどうすればよいですか？

c#asp.net-mvc-3kendo-ui
43
Goran303

私はあなたが探している方法がスクロール可能な構成の下にあると仮定します（高さを持たせたい場合は1つのグリッドがスクロール可能である必要があるためです）

.Scrollable(scr=>scr.Height(230))
54
Petur Subev

高さを動的に変更するには

htmlattributesを削除します。

.HtmlAttributes(new { style = "height:600px;" })

自動でスクロール可能を追加します。

.Scrollable(a => a.Height("auto"))

39
Muzammil Tamboli

強く型付けされたものでは、固定された高さの固定に使用します

.Scrollable(scrollable => scrollable.Height(100))

JsでdataSource宣言を使用した後

$("#Grid").kendoGrid({

            dataSource: { },

            height: 450,

            pageable: {
                refresh: true,
                pageSizes: true
            },

            columns:
                [
                   ***
                ]
        });

また、cssを介して持っているすべての桁の最小および最大の高さのグリッドをバインドできます。

.k-grid .k-grid-content {
 min-height: 100px;
 max-height: 400px;
}

または、特定のグリッドを指定して、.k-gridを特定のグリッドID #YourGridNameに置き換えます。お役に立てれば。

9
Mahib

HtmlAttributes()を使用すると、ツールバー、ページング、テーブルなどを保持する_<div>_に属性を追加できます。

TableHtmlAttributes()を使用すると、属性を_<table>_要素だけに追加できます

スタイル属性を追加して、設定テーブルを750pxに変更します。

_  @Html.Kendo().Grid(Model)
               .Name("Grid")
               .TableHtmlAttributes(new {style="height: 750px;"})
_
6
johlrich

これには外部cssルールを使用することもできます。これは、グリッドが（部分ビューのように）再利用される場合に適しています。スタイルまたは高さの属性を指定すると、Kendoはそれらをインラインで追加するため、外部スタイルシートでオーバーライドできません。時々あなたはそれを望みますが、時々そうではありません。

ラッパーに提供される.Name()文字列を使用すると、ヘッダーまたはコンテンツを対象とするcssルールを簡単に記述できます。

#GridName .k-grid-content {
    height: 300px; /* internal bit with the scrollbar */
}

#GridName .k-grid-header-wrap tr {
    height: 75px; /* header bar */
}

.k-grid-header-wrapクラスは、グリッドの初期化方法によって異なる場合があります。また、ヘッダー内のtrまたはthタグをターゲットにする必要があります。ヘッダー全体（通常はdivタグ）のスタイルを設定すると、一貫性のない結果が生じます。一部のブラウザーはルールを適用せず、一部のブラウザーは実際のtr/thの境界が始まる目に見えるアーティファクトを残します。

ああ、また、MVCラッパーで作成されたグリッドと通常のjsで作成されたグリッドの間で変更する場合、このアプローチにより柔軟性が得られることも言う必要があります。または、異なるグリッド間でスタイルシートを再利用できます。

4
Patrick M