作成日: 2015/01/27 最終更新日: 2015/01/27
文書種別
使用方法
詳細
C1GridViewにおいて行ヘッダーを表示する場合、ShowRowHeaderプロパティを"True"に設定します。
◎サンプルコード（VB）
◎サンプルコード（C#）
行ヘッダーのクラスには"wijmo-wijgrid-rowheader"が設定されています。
行ヘッダーに行番号を追加し表示方法をカスタマイズする場合は、下記のようにcellStyleFormatterオプションを使用します。
◎サンプルコード（JavaScript）
◎サンプルコード（CSS）
◎サンプルコード（VB）
C1GridView1.ShowRowHeader = True
◎サンプルコード（C#）
C1GridView1.ShowRowHeader = true;
行ヘッダーのクラスには"wijmo-wijgrid-rowheader"が設定されています。
行ヘッダーに行番号を追加し表示方法をカスタマイズする場合は、下記のようにcellStyleFormatterオプションを使用します。
◎サンプルコード（JavaScript）
<script type="text/javascript">
$(document).ready(function () {
var grid = $("#C1GridView1").c1gridview({
cellStyleFormatter: function (args) {
// 行ヘッダーに行番号を表示し、CSSクラスを追加します
if (args.column === null) {
var rowHeader = args.$cell[0];
if (rowHeader.className.indexOf("wijmo-wijgrid-rowheader") != -1 &&
args.row.dataRowIndex != -1) {
// 行番号を設定
rowHeader.innerText = args.row.dataRowIndex;
// CSSクラスを追加
$(rowHeader).addClass("rowheader");
}
}
}
});
});
</script>
$(document).ready(function () {
var grid = $("#C1GridView1").c1gridview({
cellStyleFormatter: function (args) {
// 行ヘッダーに行番号を表示し、CSSクラスを追加します
if (args.column === null) {
var rowHeader = args.$cell[0];
if (rowHeader.className.indexOf("wijmo-wijgrid-rowheader") != -1 &&
args.row.dataRowIndex != -1) {
// 行番号を設定
rowHeader.innerText = args.row.dataRowIndex;
// CSSクラスを追加
$(rowHeader).addClass("rowheader");
}
}
}
});
});
</script>
◎サンプルコード（CSS）
<style type="text/css">
.rowheader {
text-align: right !important;
background-image: none !important;
background-color: LightGreen !important;
color: Blue !important;
}
</style>
.rowheader {
text-align: right !important;
background-image: none !important;
background-color: LightGreen !important;
color: Blue !important;
}
</style>
旧文書番号
81146