web-dev-qa-db-ja.com

剣道グリッドコラムをラップする方法

剣道グリッドの列は次のとおりです。ズーム画面の列を非表示にした後、列を折り返したいです。 gridColumnsにいくつかのプロパティを与えることでそれを行うことができますか？教えてください。それを見つけることができません。ここに「あなたの職業の詳細」が隠されています。ここにいくつかのフィールドがあります。ここでは3つしか示していません。

 gridColumns: [
            {
                title: 'FirstName',
                field: 'FirstName',
                width: '0', hidden: true
            },
            {
                title: 'FirstName',
                field: 'FirstName',
                width: '250px'
            },
            {
                title: 'Your Occupation Details',
                field: 'OccupationDetails',
                width: '100',
            }]
kendo-uikendo-grid
17
user1078749

HeaderAttributesを使用して、JS列宣言で長い列名を次のようにラップします。

columns: [
{
  title: 'Your Occupation Details',
  field: 'OccupationDetails',
  width: '100',
  headerAttributes: { style: "white-space: normal"}
},
...
]

または、強く型付けされたグリッドの場合は、列でHeaderHtmlAttributesも使用できます。

columns.Bound(p => p.OccupationDetails).HeaderHtmlAttributes(
    new { style = "white-space: normal" }
);

その他のドキュメントは、Telerikの公式フォーラム Header Wrapping/Height および 剣道グリッド列をラップする方法 にあります。

23
Mahib

グリッドのCSSプロパティを設定して、列の折り返しを有効にすることができます。

.k-grid-header .k-header {
    overflow: visible;
    white-space: normal;
}

列ヘッダー属性の設定については、このドキュメントをご覧ください。

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

18
IceMan

これは私のために働いた

.k-grid  .k-grid-header  .k-header  .k-link {
    height: auto;
}

この

.k-grid  .k-grid-header  .k-header {
    white-space: normal;
}

ソース： http://www.telerik.com/forums/header-wrapping-height

4
mxasim

ヘッダーをラップするには：

.k-grid .k-grid-header .k-header .k-link { height: auto; }

.k-grid .k-grid-header .k-header { white-space: normal; }

行を折り返すには：

td[role="gridcell"] { white-space: nowrap; }
2
Ricardo França

特定のグリッドの列ヘッダーのワープテキストが必要な場合は、これをカスタムCSSに追加できます。これでうまくいきました。

#yourgrid .k-grid-header  .k-header .k-link {
    white-space: normal !important; 
}
0
Eugene Jr Subrado
<style>
   .k-grid .k-grid-header .k-header .k-link {
      overflow: visible !important; white-space: normal !important; 
   }
</style>
0
abuumar

あなたはそれを次のように行うことができます：

   k-grid  .k-grid-header  .k-header  .k-link {
    height: auto;
    Word-break:break-all !important;
    Word-wrap:break-Word !important;
}
.k-grid  .k-grid-header  .k-header {
    white-space: normal;
}

私にぴったりの作品。

0
Gopal Sharma