C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[10]: GridViewのヘッダ行固定、ボタンによる自動スクロール


(過去ログ 123 を表示中)

[トピック内 11 記事 (1 - 11 表示)]  << 0 >>

■73278 / inTopicNo.1)  GridViewのヘッダ行固定、ボタンによる自動スクロール
  
□投稿者/ スカーレット (13回)-(2014/09/05(Fri) 21:31:33)

分類:[ASP.NET (VB)] 

開発環境
  VS2008
  ASP.NET 3.5
  AJAX Control Toolkit .NET 3.5 December 2013 Release Version 7.1213

こんばんは。

上記の環境で開発を行っております。ASP.NET初心者です。

今回、下記コードのようにPanelのスクロールバーを使用して、その中に[選択]ボタンのあるGridViewを配置しております。
また、上下ボタンを設置し、上下に1つずつスクロールできるようにしております。

【aspx】
    <table>
    <tr>
    <td rowspan="2">
    <asp:Panel ID="Panel2" runat="server" Height="115px" ScrollBars="Auto">
        <asp:GridView ID="grd_ss" runat="server" AutoGenerateColumns="False" 
            Font-Names="MS ゴシック" Font-Size="11pt">
            <RowStyle BackColor="White" />
            <Columns>
                <asp:CommandField ShowSelectButton="True" HeaderText="選択" >
                <ItemStyle Width="40px" HorizontalAlign="Center" />
                </asp:CommandField>
                <asp:BoundField HeaderText="aaa" DataField="col1" >
                <ItemStyle Width="90px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="bbb" DataField="col2" >
                <ItemStyle Width="50px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="ccc" DataField="col3" >
                <ItemStyle Width="120px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="ddd" DataField="col4" >
                <ItemStyle Width="90px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="eee" DataField="col5" >
                <ItemStyle Width="90px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="fff" DataField="col6" >
                <ItemStyle Width="190px" />
                </asp:BoundField>
            </Columns>
            <SelectedRowStyle BackColor="Black" ForeColor="White" />
            <HeaderStyle BackColor="#FFFF00" />
        </asp:GridView>
    </asp:Panel>
    </td>
    <td style="vertical-align: top">
        <asp:ImageButton ID="Btn_Prev" runat="server" ImageUrl="img/up_arrow.png" />
    </td>
    </tr>
    <tr>
    <td style="vertical-align: bottom">
        <asp:ImageButton ID="Btn_Next" runat="server" ImageUrl="img/down_arrow.png" />
    </td>
    </tr>
    </table>


【vb】
    Private Sub Btn_Prev_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles Btn_Prev.Click
        Dim idx As Integer = grd_ss.SelectedIndex
        If idx > 0 Then
            grd_ss.SelectedIndex = grd_ss.SelectedIndex - 1
        End If
    End Sub

    Private Sub Btn_Next_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles Btn_Next.Click
        Dim idx As Integer = grd_ss.SelectedIndex
        If idx + 1 < grd_ss.Rows.Count Then
            grd_ss.SelectedIndex = grd_ss.SelectedIndex + 1
        End If
    End Sub



そこで、ヘッダ行を固定し、かつ上下ボタンを押下した際にスクロールさせたいのですが、
なかなか参考になるサイトがなくて非常に困っております。。

もし同じようなことを実現された方がおりましたら、ご教授願えないでしょうか。
何卒、よろしくお願い致します。

引用返信 編集キー/
■73279 / inTopicNo.2)  Re[1]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ WebSurfer (334回)-(2014/09/05(Fri) 22:11:30)
No73278 (スカーレット さん) に返信

ボタンをクリックするたびにポストバックしているようですがそれはありえない方法です。

ボタンではなくてスクロールバーでいいのでないですか? それでよければ、以下のよう
な方法があります。

GridView のヘッダ、列を固定(その 2)
http://surferonwww.info/BlogEngine/post/2013/02/04/freezing-header-and-column-of-gridview-by-using-javascript-gridjs.aspx
引用返信 編集キー/
■73282 / inTopicNo.3)  Re[2]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ スカーレット (14回)-(2014/09/08(Mon) 12:32:33)
No73279 (WebSurfer さん) に返信
> ■No73278 (スカーレット さん) に返信
>
> ボタンをクリックするたびにポストバックしているようですがそれはありえない方法です。
>
> ボタンではなくてスクロールバーでいいのでないですか? それでよければ、以下のよう
> な方法があります。
>
> GridView のヘッダ、列を固定(その 2)
> http://surferonwww.info/BlogEngine/post/2013/02/04/freezing-header-and-column-of-gridview-by-using-javascript-gridjs.aspx

WebSurfer さん、返信ありがとうございます。

今回は、ボタンでスクロールさせる必要があるのです。

JavaScriptを使用して、実現することは不可能でしょうか?

どうぞ、よろしくお願い致します。

引用返信 編集キー/
■73284 / inTopicNo.4)  Re[3]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ WebSurfer (335回)-(2014/09/08(Mon) 15:16:53)
No73282 (スカーレット さん) に返信
> 今回は、ボタンでスクロールさせる必要があるのです。
>
> JavaScriptを使用して、実現することは不可能でしょうか?

「javascript」「ボタン」「スクロール」などをキーワードにしてググるといくつか
サンプルが見つかるので、それを参考に実装してみてはいかがですか?

引用返信 編集キー/
■73286 / inTopicNo.5)  Re[4]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ スカーレット (15回)-(2014/09/08(Mon) 16:07:18)
No73284 (WebSurfer さん) に返信
> ■No73282 (スカーレット さん) に返信
>>今回は、ボタンでスクロールさせる必要があるのです。
>>
>>JavaScriptを使用して、実現することは不可能でしょうか?
>
> 「javascript」「ボタン」「スクロール」などをキーワードにしてググるといくつか
> サンプルが見つかるので、それを参考に実装してみてはいかがですか?
>

WebSurfer さん、度々の返信ありがとうございます。

下記のページを参考に実装してみましたが、ページ全体がスクロールされてしまいます。
http://www.pori2.net/js/window/8.html

質問が変わって申し訳ありませんが、ボタンの押下で、選択行を一番先頭に表示させることは可能でしょうか?

どうぞ、よろしくお願い致します。

引用返信 編集キー/
■73287 / inTopicNo.6)  Re[5]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ WebSurfer (336回)-(2014/09/08(Mon) 17:40:39)
No73286 (スカーレット さん) に返信

> 下記のページを参考に実装してみましたが、ページ全体がスクロールされてしまいます。

そうならないようにすることは可能なはずです。少し勉強が足りないかと・・・


> ボタンの押下で、選択行を一番先頭に表示させることは可能でしょうか?

GridView の CommandField の[選択]ボタンをクリックするということですか?

クリックすればポストバックするので、その時サーバー側のコードで選択したレコードの
次の行から表示させるようにすれば可能でしょう。

ただ、個人的には、わざわざポストバックしてまでそのようなことをするのはどうかと思
いますが。

引用返信 編集キー/
■73288 / inTopicNo.7)  Re[6]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ スカーレット (16回)-(2014/09/08(Mon) 18:00:19)
No73287 (WebSurfer さん) に返信
> ■No73286 (スカーレット さん) に返信
>
>>下記のページを参考に実装してみましたが、ページ全体がスクロールされてしまいます。
>
> そうならないようにすることは可能なはずです。少し勉強が足りないかと・・・
>
>
>>ボタンの押下で、選択行を一番先頭に表示させることは可能でしょうか?
>
> GridView の CommandField の[選択]ボタンをクリックするということですか?
>
> クリックすればポストバックするので、その時サーバー側のコードで選択したレコードの
> 次の行から表示させるようにすれば可能でしょう。
>
> ただ、個人的には、わざわざポストバックしてまでそのようなことをするのはどうかと思
> いますが。
>

WebSurfer さん、度々の返信ありがとうございます。

> GridView の CommandField の[選択]ボタンをクリックするということですか?
別途、設けた上下ボタンをクリックするということです。
説明不足ですいません。。

確かに、わざわざポストバックしてまでそのようなことをするのはどうかと思うのですが、
どうにか実現させたく、どうぞよろしくお願い致します。

引用返信 編集キー/
■73289 / inTopicNo.8)  Re[7]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ WebSurfer (337回)-(2014/09/08(Mon) 19:13:35)
No73288 (スカーレット さん) に返信

> 別途、設けた上下ボタンをクリックするということです。

結局最初の質問に戻るんですね。であれば、最初にそれ以外は全く考える余地は
ないと書いておいてください。

で、答えはほぼ同じです。クリックすればポストバックするので、その時サーバ
ー側のコードで、GridView の一行目のレコードの次の行 / 前の行から表示させ
るようにすれば可能でしょう。

頑張って実装してください。

引用返信 編集キー/
■73311 / inTopicNo.9)  Re[8]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ スカーレット (17回)-(2014/09/10(Wed) 14:22:06)
No73289 (WebSurfer さん) に返信
> ■No73288 (スカーレット さん) に返信
>
>>別途、設けた上下ボタンをクリックするということです。
>
> 結局最初の質問に戻るんですね。であれば、最初にそれ以外は全く考える余地は
> ないと書いておいてください。
>
> で、答えはほぼ同じです。クリックすればポストバックするので、その時サーバ
> ー側のコードで、GridView の一行目のレコードの次の行 / 前の行から表示させ
> るようにすれば可能でしょう。
>
> 頑張って実装してください。
>

WebSurfer さん、度々の返信ありがとうございます。

> 結局最初の質問に戻るんですね。であれば、最初にそれ以外は全く考える余地は
> ないと書いておいてください。
承知いたしました。

> で、答えはほぼ同じです。クリックすればポストバックするので、その時サーバ
> ー側のコードで、GridView の一行目のレコードの次の行 / 前の行から表示させ
> るようにすれば可能でしょう。
下記のように、ヘッダ行を固定しているためか、いろいろ試してみましたが実現できません。。
http://qa.atmarkit.co.jp/q/2744
#ちなみに、ヘッダ行とデータ行の枠線がずれてしまいます。

下記でできそうな気もしたんですが。。
http://ap.atmarkit.co.jp/bbs/core/vblab/19386

引用返信 編集キー/
■73312 / inTopicNo.10)  Re[9]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ WebSurfer (340回)-(2014/09/10(Wed) 15:44:49)
No73311 (スカーレット さん) に返信

> 下記のように、ヘッダ行を固定しているためか、いろいろ試してみましたが実現できません。。
> http://qa.atmarkit.co.jp/q/2744
> #ちなみに、ヘッダ行とデータ行の枠線がずれてしまいます。

「下記のように」というのは、そのページのベストアンサーの方法のことですか? であれば、
それは私が紹介したものではないので、何故うまくいかないかを私に聞くのはお門違いかと。


ところで、JavaScript で実現するのは諦めて、ポストバックしてサーバー側で処置する方向に
進んだのかと思ってましたが、結局それは止めてまた JavaScript で実現することにしたので
すか?

ボタンをクリックで「一行ずつ」スクロールさせたいのですよね? それを実現させるのに、サ
ーバー側でできることとクライアント側でできることを認識して、どうするか決めることをお勧
めします。
引用返信 編集キー/
■73313 / inTopicNo.11)  Re[10]: GridViewのヘッダ行固定、ボタンによる自動スクロール
□投稿者/ スカーレット (18回)-(2014/09/10(Wed) 19:53:53)
No73312 (WebSurfer さん) に返信
> ■No73311 (スカーレット さん) に返信
>
>>下記のように、ヘッダ行を固定しているためか、いろいろ試してみましたが実現できません。。
>>http://qa.atmarkit.co.jp/q/2744
>>#ちなみに、ヘッダ行とデータ行の枠線がずれてしまいます。
>
> 「下記のように」というのは、そのページのベストアンサーの方法のことですか? であれば、
> それは私が紹介したものではないので、何故うまくいかないかを私に聞くのはお門違いかと。
>
>
> ところで、JavaScript で実現するのは諦めて、ポストバックしてサーバー側で処置する方向に
> 進んだのかと思ってましたが、結局それは止めてまた JavaScript で実現することにしたので
> すか?
>
> ボタンをクリックで「一行ずつ」スクロールさせたいのですよね? それを実現させるのに、サ
> ーバー側でできることとクライアント側でできることを認識して、どうするか決めることをお勧
> めします。

WebSurfer さん、度々の返信ありがとうございます。

ポストバックしてサーバー側で処置する方向で実現できました。
いろいろとありがとうございました。

解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -