質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • VB.NET

    1046questions

    Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

  • GitHub

    1000questions

    GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

Gridviewのスクロールバー位置について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,142

kana_1212

score 2

GitHubで紹介されているGrid.js(https://github.com/mmurph211/Grid)
を使用し、Gridviewでヘッダー行・列固定の表を作成しています。

再現方法:
表の一番下までスクロールし、
1.現在のスクロール値を INPUT type="hidden" へgetボタンクリックで保存
2.スクロールバーを適当に動かす(一番上まで上げる)
3.ボタン1をクリック
4.またスクロールバーを上に動かし、ボタン2をクリック

コード:

        <script type="text/javascript">
            $(function () {
                $(".get").click(function () {             //再現方法-1
                    $('.g_Body').attr('id', 'test');       //divにID(test)付与
                    var TOP = $('#test').scrollTop();        //変数TOPに上で定義したdiv(test)のscrollTopを代入
                    document.getElementById('hidScroll').value = TOP;
                });

                $(".Button1").click(function () {            //再現方法-3
                    $('.g_Body').attr('id', 'test');
                    var QWE = document.getElementById('hidScroll').value;
                    document.getElementById('test').scrollTop = QWE;
                });
            });
            window.onload = function () {             //再現方法-4で通る
                $('.g_Body').attr('id', 'test');
                 var QWE = document.getElementById('hidScroll').value;
                if (QWE != "") {
                    document.getElementById('test').scrollTop = QWE;
                }
            };
        </script>
        <略>
        <input type="button" class="get" value="getボタン" />
        <INPUT id="hidScroll" type="hidden" name="hidScroll" runat="server">
        <input type="button" class="Button1" value="ボタン1" />
        <asp:Button ID="Button2" runat="server" Text="ボタン2" />
        <略>


現象:
ボタン1をクリックでは保存しておいたスクロール値が正しく設定され一番下までスクロールバーが下がりますが、
ボタン2では一番下まで動かず、少し上に上がっています。

やりたいこと:
ボタン2をクリック後、スクロールバーを一番下まで下げたい

やってみたこと:
ブレークポイントを置いて進めたところ、設定後の
document.getElementById('test').scrollTop の値が保存した値(正)と違っていました。
また、ボタン2を何度か押してみたところ、一旦は一番下まで下がりますが、ポストバック後に少し上に上がってしまっているように見えます。

javascriptはまだ不慣れなため不備あるかと思いますが
何かお気づきの点等あれば教えていただけませんでしょうか。
よろしくお願い致します。

開発環境は
.NET Framework4.5/vb.net/VisualStudio2012
です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2017/02/20 17:57

    コードは ``` と ``` で囲ってください。インデントされて読みやすくなります。それから、.get とか #test とか定義が不明なものが多々あります。そういうものがないようにしていただけませんか。

    キャンセル

回答 2

check解決した方法

0

turbgraphics200様のコメントどおり、GridのonLoadイベントに記述することで思い通りの動作となりました。

new Grid({
    srcType : "json", 
    srcData : "gridData", 
    onLoad: function () {
        $('.g_Body').attr('id', 'test');
        var QWE = document.getElementById('hidScroll').value;
        if (QWE != "") {
            document.getElementById('test').scrollTop = QWE;
        }
    }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

document.getElementById('test').scrollTop = 10000000000;
と、適当にでかい数字を設定するのはだめですかねw

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/20 18:53

    ありがとうございます!
    実はそれも試して見たのですが、scrollTopの値は変わらずで…。
    質問文に書いておくべきでした、申し訳ございません。

    キャンセル

  • 2017/02/20 19:03 編集

    ちょっと、本題とは関係ないですが、
    $(function() {
    });
    に囲まれている部分は、onload時に実行されるものですから、わざわざ別途
    window.onload = function() {
    });
    と書かなくてもいいかと思います。

    本題に戻り、Gridにデータをセットする際にGridにもonLoadイベントがあるようですので、GridのonLoadイベントでscrollさせてみてははいかがでしょう。
    new Grid({
    srcType : "json",
    srcData : gridData,
    onLoad: function() { document.getElementById('test').scrollTo(0, 100000) }
    }

    キャンセル

  • 2017/02/21 09:19

    ご回答ありがとうございます。
    そのようなアドバイス非常に助かります。
    仰るとおり、GridのonLoadイベントに記述することで思い通りの動作となりました。
    ずっと悩んでいましたので大変助かりました、ありがとうございました!

    キャンセル

同じタグがついた質問を見る

  • VB.NET

    1046questions

    Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

  • GitHub

    1000questions

    GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。