- PR -

GridView 表示が壊れる? 画面をリサイズすれば表示が戻る

1
投稿者投稿内容
大ベテラン
会議室デビュー日: 2003/09/16
投稿数: 193
お住まい・勤務地: 千葉県
投稿日時: 2008-03-25 19:53
お世話になっております

 不可思議な現象がでています

 マスターページを使用して
 画面を縦3分割しています
 下段はガイダンス表示エリアとして位置を固定する為に
 中段は Panel の Heightにて縦サイズを固定してスクロール(Auto)表示してます

 この中断エリアの GridView の初期表示時に
 最下段の表示以降にGridViewが作成され
 本来表示される領域は すべて空白になってしまっています

 この現象は、GridViewに表示される件数と
 クライアントのスペックに関わっているようで
 A端末では、100件分であれば 正常に表示されるが
 B端末では、200件分でも 正常に表示されます

 Gridviewのセルに対して、WidthやHeightを指定していないものは
 GridViewの部分が表示されるまで時間がかかるけど
 待てば正常に表示されています

  こんな不可解現象に遭遇したことありませんか?
  対処方をご存知の方、いらっしゃいませんか?

 ちなみに ガイダンス表示と 一覧表示部分はスクロールで
 というのは ユーザ仕様です

              よろしくお願いいたします
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-03-26 02:53
(1)table-layout:fixed 指定してください。
(2)幅・高さは、%指定せず、PX指定にしてください。


あるカラムがそれまでのカラムより長い or 高さが変わる、場合に、
それまでの計算済みカラムが再計算され、画面全体が再描画される
ようです。

大昔の実測値ですが、Pen3 700Mhz メモリ256M ,IE5.5 で、テーブル
14カラム、横スクロール無し、400行、でカラムを%指定した場合
の画面ロードから表示完了までの時間はおおよそ30秒でした。

横スクロールさせない場合は
表示内容が決まっているカラムはおおよその大きさを決め打ちでPX指定
しておく。全体を%指定しない。カラムにoverflow:hidden を指定する。
などで高速化が図れます。

横スクロール・縦スクロールした場合で、ヘッダが固定されている必要
がある場合、CSSと若干のJavaScriptを使うことでヘッダを固定できます。

単にヘッダ固定のみで良ければ(もちろん横スクロールに追従します)
CSSだけでも実現できます。DTD指定が必須ですが。


大ベテラン
会議室デビュー日: 2003/09/16
投稿数: 193
お住まい・勤務地: 千葉県
投稿日時: 2008-03-26 14:04
引用:

ぴあちゃんさんの書き込み (2008-03-26 02:53) より:
(1)table-layout:fixed 指定してください。
(2)幅・高さは、%指定せず、PX指定にしてください。



返信遅れてすみません
レスをありがとうございます

1、画面が壊れる画面
現在、サイズ指定は固定で PX指定しています
GridViewの1ページの行数を固定化してやると
画面が壊れることが回避されます
ただ、外側の Panelの高さとGridViewの指定行数や
カラムの vertical-align: middle;  の指定の
有り無しにて また 画面が壊れたりします


2、画面が壊れる事はないが、GridView表示に時間がかかる画面
Table表示の高速化の情報を 感謝いたします
ただ 今回の仕様では 横のセル数、縦の行数は
固定ができません
表示されるセルの内容も各クライアントユーザーが
抽出項目を自由に設定しての表示になるため
固定することができません
ヘッダー部の固定もせず、縦横スクロールです
Sqlを動的に生成したのち DataTableを作成し
GridViewにバインドするのみで作成しています
CSS等一切の見栄え操作は行えません
一覧表を表示する際の所要時間は 待ってもらえるのですが
画面上部に配置したボタンは 表示されてしまってるので
(HTMLのソース表示すると、画面ができあがってないので
 ソース表示は出来ない状態 であるにも関わらず)
このボタンが押せてしまうのです
 なおかつ 最悪なことに、ボタンを押されると、落っこちるのです
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-03-27 01:08
ボタン類のパネルを以下のようにします。
<div id="contentButtons">
//ボタンのパネル
</div>

<style>
#contentButtons {
visibility:hidden;
}
</style>

onload で見えるようにする。

又は、

<div id="contentButtons" disabled="true">
//ボタン類
</div>
で onload で活性にする。disabled = false; ですね。

IEだと、ブロック要素に disabled が効き、コンテンツのフォーム要素と
リンクは全て活性/非活性になります。

または、

<div id="toumei">
</div>
<style>
#toumei {
position:absolute;
width:100%;
height:50%;
filter:alpha(opacity=20);
z-index:100;
}
</style>

ってやれば、ボタン類が並んでいるとこに ドロップリストさえ無ければ、
半透明レイヤーをかぶせることで「押せなく」出来ます。
で、これもまた、 onload で非表示にするだけです。

MSDNを覗くとたまに、Silverlight のコマーシャルレイヤーが出てきますが、
あれはこれと同じ仕組みです。右上の「×」ボタンで非表示に出来る点が
違うくらい。

追加訂正:
あとひとつ。昔の遅い環境用に対応した逃げ方ですが。

<div id="message">しばらくおまちください</div>
<div id="contents" style="visibility:hidden;">
//ヘッダ
//ボタン類
//<asp:GridView />
//フッタ類
</div>

てな感じです。 これもまた、onload で message を消して、
contents を表示する。全部非表示にしちゃうのもアレなんで
ヘッダとフッタは表示しておいても良いかもしれませんが、
ヘッダとボタン類が兼用パネルならば、やはり消しておくの
が無難です。

さらに追加:
このときは、確かプログレスバーも出していましたね。
タイマーで特定IDをポーリングしてバーのアニメーションを動かす、
みたいな仕掛けだったと思います。
ブラウザのキャンセルボタン押されないようにするためだけ(とは言え押せちゃう
ので押されないように願う、というか・・・右上の地球儀か旗は止まっているのに
画面が一向に表示されないので不信感を抱かれた、ような記憶がよみがえってきま
した(:-)の小細工でした。








[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-03-27 01:17 ]

[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-03-27 01:23 ]
大ベテラン
会議室デビュー日: 2003/09/16
投稿数: 193
お住まい・勤務地: 千葉県
投稿日時: 2008-03-27 14:09
引用:

ぴあちゃんさんの書き込み (2008-03-27 01:08) より:
画面が一向に表示されないので不信感を抱かれた、ような記憶がよみがえってきま
した(:-)の小細工でした。




どうもありがとうございます
 ボタンの非活性化 うまくいきました
 ありがとう ございます
1

スキルアップ/キャリアアップ(JOB@IT)