ナレッジベース

[GridView for ASP.NET Web Forms] 最終行の下罫線を表示する方法

作成日: 2016/07/14 最終更新日: 2017/09/13

文書種別

使用方法

詳細

製品の仕様上、各行の下罫線のスタイルはCSSで設定されておらず、最終行ではグリッドの枠線が下罫線として使用されます。
そのため、グリッドの高さを固定にした場合、表示する行数が少ないと最終行の下罫線が表示されません。

この場合には、下記のようなスクリプトでCSSを設定し、最終行の下罫線を表示できます。

◎サンプルコード(aspx)

<script type="text/javascript">　
　　$(document).ready(function () {
　　　　var length = $(".wijmo-wijgrid-datarow").length;
　　　　$.each($(".wijmo-wijgrid-datarow").eq(length - 1).find("td"), function (index, elem) {
　　　　　　$(elem).css({
　　　　　　　　"border-bottom-style": "solid",
　　　　　　　　"border-bottom-color": $(elem).css("border-top-color"),
　　　　　　　　"border-bottom-width": "1px"
　　　　　　});
　　　　});
　　});
</script>

なお、グリッドに固定列（StaticColumnIndexプロパティの設定）が含まれる場合は、下記のように"wijmo-wijgrid-split-area-sw"クラスと"wijmo-wijgrid-split-area-se"クラスのそれぞれにCSSを設定してください。

◎サンプルコード(aspx)

<script type="text/javascript">　
　　$(document).ready(function () {
　　　　var length;

　　　　// 固定列側の設定
　　　　length = $(".wijmo-wijgrid-split-area-sw").find(".wijmo-wijgrid-datarow").length;
　　　　$.each($(".wijmo-wijgrid-split-area-sw").find(".wijmo-wijgrid-datarow").eq(length - 1).find("td"), function (index, elem) {
　　　　　　$(elem).css({
　　　　　　　　"border-bottom-style": "solid",
　　　　　　　　"border-bottom-color": $(elem).css("border-top-color"),
　　　　　　　　"border-bottom-width": "1px"
　　　　　　});
　　　　});

　　　　// 非固定列側の設定
　　　　length = $(".wijmo-wijgrid-split-area-se").find(".wijmo-wijgrid-datarow").length;
　　　　$.each($(".wijmo-wijgrid-split-area-se").find(".wijmo-wijgrid-datarow").eq(length - 1).find("td"), function (index, elem) {
　　　　　　$(elem).css({
　　　　　　　　"border-bottom-style": "solid",
　　　　　　　　"border-bottom-color": $(elem).css("border-top-color"),
　　　　　　　　"border-bottom-width": "1px"
　　　　　　});
　　　　});
　　});
</script>

旧文書番号

81738