web-dev-qa-db-ja.com

グリッドヘッダー剣道UIを非表示にする方法は？

階層グリッド剣道UIを使用しています。グリッドヘッダーを非表示にしたい。現在、以下のコードを使用していますが、ヘッダーのテキストのみを非表示にしています。

// kendo ui grid
.TableHtmlAttributes(new { @class = "GridNoHeader" })

// css
.GridNoHeader thead.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
}

できればあなたの経験を共有してください。ありがとう

jquerycsskendo-uikendo-grid
13
PeaceInMind

グリッドヘッダーを非表示にするには、次のコードを使用してください。

.GridNoHeader .k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    display: none;
    overflow: hidden;
}
5
PeaceInMind

グリッドが初期化された直後に実行できるjQueryの方法は次のとおりです。

$("#grid .k-grid-header").css('display', 'none');

ヘッダー全体を非表示にし、スタイルをインラインスタイルとしてヘッダーに直接適用するため、cssソリューションよりもわずかに優れています。つまり、スタイルは他のすべての剣道スタイルよりも自動的に優先されます。

現在の方法に関しては、visibility:hiddenが要素を非表示にするため、テキストを非表示にするだけですが、スペースは引き続き割り当てられます。 display:noneで試してください。さらに、k-grid-headerクラスは、divではなく、ヘッダー全体を含むthead要素に適用されます。多分これを試してみてください：

.GridNoHeader div.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    display: none;
    overflow: hidden;
}
18
gitsitgo

私の場合、ソリューション「display：none;」に1つのスタイル属性がありません。

この例では、ヘッダー列名のない空のヘッダー行が残ります。

.GridNoHeader thead.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
    display: none;
}

これにより、ヘッダー行が完全に削除されます。

.GridNoHeader thead.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
    display: none;
}
0
Aaron Reed