GridViewを自動的にスクロールするには

質問

Ａクライアントはデータをサーバーに送信し、サーバーは蓄積します。
Ｂクライアントはサーバーに蓄積されたデータに変化があれば,
その都度GridViewで常時表示しています。
GridViewには新しいデータを下の行に、古いデータを上の行にという順序で表示しています。
GridViewにはスクローバーを付けています。
GridViewではいつも最新のデータを表示させたいので、いつも最下行を表示させるようにしたい。
つまり、新しい情報を１行表示させるたびに、１行スクロールアップさせたいのですが、スクロールの方法がわかりません。
言語はJavaScriptを使用しています。よろしくお願いします。

回答No.3

qtea · ベストアンサー

JavaScriptを記述している（クライアント・コールバックの関数）の最後に、
var ctrl = document.getElementById("スクロールバーを出しているコントロールのID");
ctrl.scrollTop=ctrl.clientHeight;
のように書けば…うまくいくような…気がします。（気のせいかも）

お礼

ありがとうございました。
できました。
ほんと助かりました。
ほんとにありがとうございました。

補足

回答ありがとうございます。
スクロールバーは下記の様に表示しています。
<div id="freezingDiv" style="OVERFLOW: auto; WIDTH: 1250px; HEIGHT: 765px; left: 20px; position: absolute; top: 100px;"
<asp:GridView ID="GridView1" runat="server"　AutoGenerateColumns="False" CellPadding ="7"　DataSourceID="ObjectDataSource1"　style="font-weight:,,,,,,,,">
<Columns>
<asp:BoundField DataField="name",,,,,,, />
<asp:BoundField DataField="time",,,,,,, />
<asp:BoundField DataField="parent",,,,, />
<asp:BoundField DataField="Expr1",,,,,, />
<asp:BoundField DataField="Expr2",,,,,, />
<asp:BoundField DataField="Expr3",,,,,, />
<asp:BoundField DataField="color_lst",, />
</Columns>
<HeaderStyle BackColor="DarkBlue" Font-Bold="True"　ForeColor="White" CssClass="Freezing" />
</asp:GridView>
</div>
上記の様にasp:GridViewをDivで囲んでいます。
この様な場合
var ctrl = document.getElementById("スクロールバーを出しているコントロールのID");
は
var ctrl = document.getElementById("freezingDiv");
でよろしいのでしょうか？
よろしくお願いします。

回答No.4

temtecomai2

> 勘違いされているカ所があります、新しいデータを最下行に古いデータを最上行とソートして表示しています。
> クライアントがサーバーから全データ受信したときに、
> GridViewに１行追加し、
> GridView1.rows[X].cells[Y].InnerTextに保存しています。

なぜに最下行に追加するのか、ってのが私の疑問であり、手段が目的になっちゃってるんじゃないかと思う場所。
そもそもの目的が「最下行を表示する」ならこれ以上アドバイスは無いのですが、「新しく追加されたデータを画面内に表示させる」が目的なのであれば、応えは「スクロールさせる」ではなくて「スクロールさせなくても済む場所に表示する」なんじゃないかなぁと。

既存の表に新しいデータだけを追加するんじゃなくて、全件取得しなおせばよいのではないでしょうか。
その際に降順に並び替えれば（下に行くほど古いデータになるように）常に最新データが一番上に表示される、と。

"常にスクロールバーが一番下にくっついてることが「ちゃんと動いてるよ」とユーザーへアピールしていることになる" という目的もあるのならしょうがないですけどね。。。

回答No.2

temtecomai2

> １回表示させるだけなら、回答の様にすれば良いと思います。
> ですが、DridViewを表示させた状態で、２秒に一度サーバーに蓄積データに変化があるかどうか問い合わせをしています。
> サーバーは変化があるとクライアントに蓄積している全データを送信します。
> クライアントはその全データをGridViewで表示しています。
> この時にGridViewを１行スクロールさせ最下行を表示したいのです。

なんどページをリロードしようとも降順で取得したデータを表示させるのですから常に最新のデータが一番上に表示されます。
スクロールすることで「最新データが入ってきたよ」をユーザーに教える事が目的ではなく、リロードしても最新データを見やすい場所に表示させることが目的ならコレで要件は満たしていると思いますが？

補足

回答ありがとうございます。
説明がヘタで申し訳ありません。
勘違いされているカ所があります、新しいデータを最下行に古いデータを最上行とソートして表示しています。
クライアントがサーバーから全データ受信したときに、
GridViewに１行追加し、
GridView1.rows[X].cells[Y].InnerTextに保存しています。
そうするとスクロールバーは短くなっていき、画面はスクロールしませんので、最新のデータを表示されません。最新のデータを表示させるためは、スクロールバーを下に移動すると表示できますが・・・
よろしくお願いします。

回答No.1

temtecomai2

JavaScript 云々はさておいて
私なら新しいデータが上、古いデータが下に来るよう、降順でデータを取得します。

補足

回答ありがとうございます。
説明不足で申し訳ありません。
１回表示させるだけなら、回答の様にすれば良いと思います。
ですが、DridViewを表示させた状態で、２秒に一度サーバーに蓄積データに変化があるかどうか問い合わせをしています。
サーバーは変化があるとクライアントに蓄積している全データを送信します。
クライアントはその全データをGridViewで表示しています。
この時にGridViewを１行スクロールさせ最下行を表示したいのです。
よろしくお願いします。