- PR -

GridView 半角文字の折り返し

1|2 次のページへ»
投稿者投稿内容
えくれあ
会議室デビュー日: 2008/09/04
投稿数: 9
投稿日時: 2008-09-04 20:32
いつもお世話になっております。

VS2005　ASP.NET でGridViewを使用しています。
TemplateField　を使用し、ItemTemplateの中に
table　タグを入れ、その中のasp:LabelにデータをEvalで
指定し、取得テーブルからバインドしています。
データが全角の場合は自動で折りかえし、レイアウトは
くずれないのですが、データに半角が入っていると、
自動で折り返さず、レイアウトがくずれてしまいます。

ブラウザはIE限定でいいので、
試しに、table　タグの　style に　word-break:break-all
をいれてみましたが、自動で折り返しがききませんでした。

GridView　自体に半角でも折り返す等の機能はないのでしょうか？
色々と調べてみましたが、解決出来ませんでした。
ご存知の方がいましたら、ご教授の程宜しくお願い致します。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-09-05 02:12
table-layout:fixed を使ってください。
これでレイアウトだけは解決です。

折り返しは、サーバーで計算する方法とクライアントで計算する方法があります。

クライアントの方はとっても地味です。
<span>タグに一番幅の広いｗと一番幅の狭いｉを入れて幅を計測してその平均値
でセル幅から何文字許容出来るかを割り出し、適当な位置に<br> を仕込むだけです。で、table-layout:fixed を指定しているので高さが可変にならないのでtr に高さ
を指定するか、一旦table-layout:fixed を解除して画面再描画後にまた設定するとか・・・display:none だと幅０なんで visibility:hidden で計算します。
なので画面にその占有領域を取ってしまうので表示位置によっては大きく空白領域
が１〜２秒程度見えちゃうかもしれませんね。ですので画面全体を非表示にしておい
て計算終わったら表示するとか工夫が必要ですね。

仕様と見た目的にＯＫならば、１バイト文字は固定ピッチフォントを
使うと楽です。幅１６ドット縦１３ドットくらいのが一番かな。
セル幅もそれに順ずるようにすれば計算の手間が省けます。

サーバーの方は、Bitmap作って、TextExtent かなんかで画面描画ポイント
とフォントで同じものが１行で何文字入るか計算して、テーブルカラム幅
一杯-1文字くらいの位置で改行を仕込む、なんてのが出来るかな。
プロポーショナルフォントだと書体と文字によりばらつきが激しいので
面倒ですね。

以前、カラムが一杯あるテーブルで１バイト文字の強制改行を行いつつ表示する
処理を業務画面で入れましたがなかなか好評でしたよ。なんせ改行されなくて
横に大幅にぶっ飛んだ画面をユーザーが目の当たりにしていた既知の直らないと
思われていたバグ修正だったんでｗ

コード:
<script>
window.onload = function() {
	var t1 = document.getElementById("T1");
	var t2 = document.getElementById("T2");

	alert("T1(" + t1.offsetWidth + "/" + t1.offsetHeight + ")==>>T2(" + 
	t2.offsetWidth + "/" + t2.offsetHeight + ")");

}
</script>
</HEAD>
<BODY>
<span>ここに</span><input type=text style="display:none" id="T1" /><span>何かあります。</span><br>
<span>ここに</span><input type=text style="visibility:hidden" id="T2" /><span>何かあります。</span>
</BODY>



こーゆー理屈です。

えくれあ
会議室デビュー日: 2008/09/04
投稿数: 9
投稿日時: 2008-09-05 09:31
そうなのですか・・
あまり簡単には、いかないようですね。

頑張って、教えて頂いた要領で組込んでみます。

有難うございました。
rain
ぬし
会議室デビュー日: 2006/10/19
投稿数: 549
投稿日時: 2008-09-05 09:51
ReadOnlyプロパティをTrueに、TextModeプロパティをMultiLineにしたTextBoxをTemplateFieldに置いて、
そこに表示するってのはどうでしょう。列幅は容易に固定できます。

見た目が変わってしまうのと、縦幅（行数）を中身にあわせて可変にできないのが欠点ですが。
えくれあ
会議室デビュー日: 2008/09/04
投稿数: 9
投稿日時: 2008-09-05 11:31
ぴあちゃん様のヒントで、
サーバー側の
GridViewのRowDataBound　の箇所で、
特定のバイト数で文字をカットし、＜BR＞タグを入れ、
改行は入ったのですが、この方法だと
あまりにも修正箇所が多く、
画面によっての文字のバイト数をもう一度見直さなくてはいけなくて
悩んでいたところです。画面総数が膨大なのです。
rain様の案でも、再度修正してみます。

有難う御座いました。
えくれあ
会議室デビュー日: 2008/09/04
投稿数: 9
投稿日時: 2008-09-05 11:49
rain様の案で、画面を修正し、確認してもらいましたが、
NGでした。
GridView に入力用のテキストエリアもあるので、
入力不可のテキストボックスを表示してはいけないと
言う理由です。（ユーザーが困惑するため）

やはり、画面レイアウトを見直し、必要箇所だけ文字列を切って、
＜BR＞タグをいれる他ないのかと・・・・
ここにきての設計見直し・・・かなり痛手です。


kiyokura
ベテラン
会議室デビュー日: 2007/08/08
投稿数: 69
お住まい・勤務地: 岡山
投稿日時: 2008-09-05 12:53
引用:

GridView に入力用のテキストエリアもあるので、
入力不可のテキストボックスを表示してはいけないと
言う理由です。（ユーザーが困惑するため）


CSSで該当のテキストボックスのボーダーを表示しないようにして、見た目ラベルと同じにしてしまう方法で逃げる、というのはどうでしょう。
＃私はよくやります。
えくれあ
会議室デビュー日: 2008/09/04
投稿数: 9
投稿日時: 2008-09-05 17:11


[ メッセージ編集済み 編集者: えくれあ 編集日時 2008-09-05 17:13 ]
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）