- PR -

スクロールしても見出しが消えないデータグリッド

参照元記事 | 同じ記事を参照しているスレッド一覧
1
投稿者投稿内容
DameDone
会議室デビュー日: 2005/02/15
投稿数: 12
投稿日時: 2005-02-15 15:34
はじめまして。いつもお世話になっております。

ASP.NET(VB)
VS.NET2003
IE5.5以上
の環境で開発を行っています。

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?mode=viewtopic&topic=10853&forum=7&start=0

を見てデータの一覧表示を行おうとしています。
見出し用、明細用とデータグリッドを２つ画面に配置しました。
データは見出し用にも持たせています。

ソースは以下の通りですが、データグリッドが上手く重なりません。

==↓====================↓==
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm.aspx.vb" Inherits="XXX.WebForm"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">
.header { height:32px; text-align:center;overflow-y:hidden;position:absolute;width:100%;z-index:1;}
.list { height:500px;text-align:center;overflow-y:auto; position:absolute;width:100%;z-index:0;}
.grid { font-size:8pt;}
</style>
</HEAD>

<body id="body" MS_POSITIONING="FlowLayout" runat="server">
<form id="Form1" method="post" runat="server">
<br>

<div class="header" id="headerSquare" runat="server">
<asp:datagrid id="grdHeader" runat="server" CssClass="grid" EnableViewState="False" AutoGenerateColumns="False"></asp:datagrid></div>

<div class="list" id="listSquare" runat="server">
<asp:datagrid id="grdList" runat="server" CssClass="grid" EnableViewState="False" AutoGenerateColumns="False"></asp:datagrid></div>

</form>
</body>
</HTML>
==↑====================↑==

しかし

==↓====================↓==
<html>
<frameset>
<frame name="main" src="WebForm.aspx">
</frameset>
</html>
==↑====================↑==
のようにWebForm.aspxをフレームを通して表示するとずれないでうまく表示されます。
やりたいことはフレームを使わずにうまく表示させることです。
なぜこうなるのか原因がわかる方、心当たりのある方がいらっしゃいましたらご教示ください。
Ｋｕｍａ
ベテラン
会議室デビュー日: 2001/12/20
投稿数: 66
投稿日時: 2005-02-16 10:17
「DataGrid 固定」で検索かけると何件かヒットします。
そのヒットした中にある以下の記事内リンクを参考にされるといいのかもしれません。

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=16739&forum=7
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=18197&forum=7
DameDone
会議室デビュー日: 2005/02/15
投稿数: 12
投稿日時: 2005-02-16 14:55
見出し用は「overflow:hidden」と指定してスクロールバーがないのに対し、
明細用は「overflow:auto」と指定しているのでスクロールバーが表示されます。
どのようにずれるかというと、
例えばデータ文字列が増えてくると、見出しの方は画面いっぱい横に広がります。
明細の方も横に広がるのですが、スクロールバーがあるために
そのバーの幅の分、広がりきれないという状態です。
これがフレームを通して表示するとずれずに表示されるので不思議です。

Ｋｕｍａ様。レスありがとうございます。
いろいろリンクを覗いてみると方法がたくさんあるようですね。
スクロールバーが見出し行の高さから出ているものと、
明細の１行目の高さから出ているものがあったり。
ひとつでできないまま悩むよりいろいろ試した方がよいかもしれませんね。
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2005-02-16 20:56
　widthを100%にしないで、ピクセル数で指定してみてください。IEに限定すると、JavaScriptで、body.clientWidthで、表示されている横幅が取得できます。

_________________
DameDone
会議室デビュー日: 2005/02/15
投稿数: 12
投稿日時: 2005-02-17 11:26
Jittaさんありがとうございます。

引用:
widthを100%にしないで、ピクセル数で指定してみてください。IEに限定すると、JavaScriptで、body.clientWidthで、表示されている横幅が取得できます。

widthを指定してalignをLeftにすると２つのグリッドが揃いました。
でもデータの文字列が長くなりきつきつになってくると見出し用グリッドの方がスクロールバーがない分余計に横に伸びてしまいます。

そこでbodyタグのonloadで

コード:
if(document.all('grdHeader').clientWidth > document.all('sqreScroll').clientWidth){
    document.all('grdHeader').width = document.all('sqreScroll').clientWidth;
}

とするとWidthを修正して揃わせることができました。
他にもずれるケースがあるかもしれませんが、同じようにJavaScriptで修正をかけることができそうですね。
1

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