- PR -

DropDownListのZ-INDEXが利かない問題

1
投稿者投稿内容
みっちー
常連さん
会議室デビュー日: 2006/01/06
投稿数: 22
投稿日時: 2006-01-24 11:41
DataGridのHeader部分やPager部分を固定してスクロールさせたいのですが、
DataGridの中にDropDownListがあると、Z-INDEXが利かず、Header部分の上に
DropDownListが表示されてしまいます。

そこで調査したところ、固定部分の下にIFRAMEを置く事により、DropDownListが一番上に表示されるのを回避する事はできたのですが、固定部分(ページ切り替え用のリンクなど)を選択する事ができなくなってしまいました。
固定部分の操作に支障なく、DropDownListが一番上になってしまう事を回避する方法がありますでしょうか。よろしくお願いします。

・ヘッダの固定
.Freez { Z-INDEX: 115; ; POSITION: relative; ; TOP: expression((this.offsetParent.scrollTop)) }

・ダミーのiframe
<iframe style="DISPLAY:block; Z-INDEX:113; FILTER:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); LEFT:8px; WIDTH:600px; POSITION:absolute; TOP:108px; HEIGHT:25px" frameBorder="0" scrolling="no"></iframe>

・DataGridスクロール用のDiv
<DIV id="divScroll" style="Z-INDEX: 112; LEFT: 8px; OVERFLOW: auto; WIDTH: 600px; POSITION: absolute; TOP: 108px; HEIGHT: 418px; BACKGROUND-COLOR: #ffe0c0"
ms_positioning="FlowLayout">

■環境
Windows Server 2003
IIS 6.0
VisualStudio.NET 2003
Webアプリ(C#)
きくちゃん
ぬし
会議室デビュー日: 2003/08/01
投稿数: 854
お住まい・勤務地: 都内某所
投稿日時: 2006-01-24 16:24
↓皆さん、頭を悩ませているようです。
http://www.atmarkit.co.jp/bbs/phpBB/search.php?pg=0&submit=1&term=Z-INDEX&addterms=any&sortby=-1&searchboth=both&forum=7
ぼのぼの
ぬし
会議室デビュー日: 2004/09/16
投稿数: 544
投稿日時: 2006-01-24 17:00
DataGridを2つ使う方法はどうでしょう?

コード:
┌──────┐
│DataGrid1 │←DIV1(ヘッダ表示用)
├──────┤
│DataGrid2 │←DIV2(本体表示用)
│      │
└──────┘


こんなかんじでDIVを二つ用意し、DIV2の方にはCSSのoverflow:auto;を設定。
DIV1とDIV2にそれぞれDataGridを置き、同じデータソースをバインドさせます。
DIV2に置いたDataGridはヘッダとページャを非表示にしておきます。
こっから先方法が2つ。

<方法1>
DIV1にoverflow:hidden;を設定しておく。
メリット:列の幅を揃える手間がない
デメリット:HTMLが重くなる(隠れて見えないけど本体部分二重持ちになってるため)

<方法2>
DataGrid2の本体部分を消す。
メリット:HTMLが軽い
デメリット:列の幅をきっちり揃えとかないとずれる

本体部分を消す方法ですが、デザイナからはできないのでこれを応用します。
#背景色を設定してるとこをVisible=falseに変える
todo
ぬし
会議室デビュー日: 2003/07/23
投稿数: 682
投稿日時: 2006-01-24 19:50
DataGrid.Renderで次のようなタグを吐くとか。

コード:
┌──────┐
│DataGrid   │←DIV(ヘッダ行をRender)
├──────┤
│DataGrid   │←DIV(データ行をRender)
│      │
└──────┘



未完成だけど、こんな感じ。
コード:
	public class MyDataGrid : DataGrid {
		protected override void Render(HtmlTextWriter writer) {
			writer.WriteLine("<div>");
			Table table = (Table)Controls[0];
			foreach (TableRow row in table.Rows) {
				DataGridItem item = (DataGridItem)row;
				item.Visible = (item.ItemType == ListItemType.Header);
			}
			base.Render (writer);
			writer.WriteLine("</div>");
			writer.WriteLine("<div>"); // todo:  overflowとHeightを記述する
			foreach (TableRow row in table.Rows) {
				DataGridItem item = (DataGridItem)row;
				item.Visible = (item.ItemType != ListItemType.Header);
			}
			base.Render (writer);
			writer.WriteLine("</div>");
		}
	}


# ページャ行も対応しないと。

todo
ぬし
会議室デビュー日: 2003/07/23
投稿数: 682
投稿日時: 2006-01-25 14:55
アイディアだけ。

DataGrid.Renderで<thead><tbody>タグを対応する。
Scrollable HTML Tableのスクリプトと連動する。
みっちー
常連さん
会議室デビュー日: 2006/01/06
投稿数: 22
投稿日時: 2006-02-08 18:09
返事が遅くなり大変申し訳ございません。

色々悩んだ末、ぼのぼの殿に提示して頂いた<方法1>で解決しました。
ただ、ひとつだけ分からなかったのは、<方法1>では列幅を揃える必要が
ないとの事ですが、本体用のDataGridはヘッダーを非表示にしている為、
ヘッダー・ページャ用と同じDataSetをBindしても、本体用と列幅がずれる事はある
と思いました(<方法2>よりはマシという事でしょうか・・・)。

todo殿に提示して頂いた方法は、DataGridの派生クラスでレンダリングする段階でつまづいてしまいました。具体的には、DataGridの派生クラスの場合、asp:DataGridと互換性がないという実行時エラーが出てうまくいきませんでした。
何か足りない事があるのでしょうか・・・。

アドバイスして頂きありがとうごさいました。
それにしても、DataGridの中にDropDownListがあるだけで、こんなにも苦労するとは思いませんでした。

1

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