GridViewを行列固定した時のAjaxControlToolkitの動作不調について

Question

お世話になります。

Visual Studio2010にてASP.NET（.NetFramework4）のWEBサイトを開発しております。

行列固定のグリッドを作成する為に、ASP.NETのGridViewと、jqueryのGrid.jsを組み合わせてグリッドを作成しております。

上記の組み合わせで、行列固定は実現できましたが、GridViewの一覧部に配置している「AjaxControlToolkit」のコントロールがうまく動作しません。

以下に、うまく動作しない現象の詳細を記載します。

①AutoCompleteExtender

　　⇒GridViewに表示される場合と、表示されない場合がある

②CalendarExtender

　　⇒GridViewに表示される場合と、表示されない場合がある

※GridViewに表示される場合が正常の動作です。

※①が表示される場合は②も表示されます。①が表示されない場合は②も表示されません。

また、上記現象の解決方法を調査している際に、

以下のことを確認しましたので、記載いたします。

【正常に動作する場合、正常に動作しない場合の比較】

・ページの再表示を行うことで動作が変わる。（正常に動作する、動作しないがランダムで切り替わる）

・HTMLを比較した結果、差異があるのはViewState、EventValidationのみである。

・クライアントにダウンロードしているJavaScriptは同様である。

・正常に動作しない場合、AjaxControlToolkitのコントロールのクライアント処理が動いていない。（デバッグで確認）

当現象につきまして、原因および解決方法が分かる方がいらっしゃれば、

どなたかご教授いただけないしょうか？

Answer 1

以下、確認させてください。

 

表示に関する問題なので、CSSあたりが悪さをしていそうな、、予感がします。

該当の要素（GridViewの一覧の中のAjaxControlToolkitのコントロールが配置されているHTML要素）に適用されているCSSについて調査したでしょうか？

また、動作検証しているブラウザは何になりますか？

他のブラウザでも、同じ現象は起こっているのでしょうか？

Answer 2

お世話になります。

ご確認ありがとうございます。

CSSについては現在調査中です。怪しい箇所が見つかり次第、追記させていただきます。

動作検証しているブラウザはIE9です。

IE8で動作を確認したところ、この現象は発生しませんでした。

Answer 3

> jqueryのGrid.jsを組み合わせてグリッドを作成しております。

Grid.js は jQuery Plugin の vgrid.js の間違いですか？

最初の質問の情報からは、jQuery Plugin のスクリプトと Microsoft AJAX Library（ASP.NET Ajax Library ではなくて）または Ajax Control Toolkit のスクリプトが競合しているのではないかと思いましたが、IE8 では問題ないということですから、ちょっと分からなくなってきました。

ひょっとして、単なるブラウザの設定の問題ということはないでしょうか？　以下の問題もありますし。

ToolkitScriptManager と gzip 圧縮
http://surferonwww.info/BlogEngine/post/2012/11/21/toolkitscriptmanager-and-gzip-compression.aspx

IE8 と IE9 で見たと書いてありますが、Web サーバーなどの環境は同じでしょうか？　両方とも開発環境で IIS も OS も .NET も違うということはないですか？

何にせよ、質問の情報だけでは想像するまでが精一杯で、たぶん質問者さん以外は誰も原因は究明できないと思います。問題がどこにありそうか、もう少し切り分けてしてください。

それができなければ、回答者のほうでも問題が再現できるよう、必要最小限（あくまで最小限でお願いします）のコードをアップしてもらえると、もう少しお役に立てるかもしれません。

どうしても解決できなければ、Ajax Control Toolkit を使うのは諦めて、jQuery UI を使う手も考えられます。

Datepicker
http://jqueryui.com/datepicker/

Autocomplete
http://jqueryui.com/autocomplete/

Answer 4

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

 

以下、ご参考までに連携します。

IE9ではうまく動かず、IE8ではOKとのことですが、IE9でブラウザモードを変更した場合は、正常に動いてくれますか？

※　IEでF12を押して下記プルダウンからブラウザモードを変更してみてください。

※　また、既知の情報でしたら恐縮ですが、要素に適用されているCSSの検証にこのような開発者ツールは結構便利です。

　　超個人的意見ですが、私は、CSSやJavaScriptの検証には、IEよりChromeやFirefoxの開発者ツールの方が使い勝手がよく、そちらをよく利用しています。

  

以上、調査のヒントになりますようでしたら、幸いです。

Answer 5

返信ありがとうございます。

質問いただきました内容に回答させていただきます。

＞Grid.js は jQuery Plugin の vgrid.js の間違いですか？

vgrid.jsではなく、supertables.jsというプラグインの後継のGrid.jsというものを使っています。

以下に参考にしたサイトのURLを記載します。

https://github.com/Unripe01/ASPNET_FixedHeaderAndColumnsGridviewSamples

＞最初の質問の情報からは、jQuery Plugin のスクリプトと Microsoft AJAX Library（ASP.NET Ajax Library ではなくて）または Ajax Control Toolkit

＞のスクリプトが競合しているのではないかと思いましたが、IE8 では問題ないということですから、ちょっと分からなくなってきました。

＞ひょっとして、単なるブラウザの設定の問題ということはないでしょうか？　以下の問題もありますし。

IE８の動作確認につきまして、訂正させていただきます。

現状、IE８では現象が確認できていないだけですので、調査を進めると今後発生する可能性があるかもしれません。

ご案内いただきましたURL（ToolkitScriptManager と gzip 圧縮）の内容を確認させていただき、

調査を進めた上で、問題を切り分けさせていただきます。

Answer 6

返信ありがとうございます。

ご案内いただきました開発者ツールを使用して、調査を進めていこうと思います。

現状、問題を解決するために必要な情報が少ない状況かと思いますので、

進展がありましたら、情報を連携させていただきます。

Answer 7

ご確認、ありがとうございます。

 

以下、ご参考までに追記させていただきます。

開発ツールを利用してCSSの調査を進める場合は、該当のHTML要素に「position（absoluteの指定）」や「z-index（に何かしらの値が設定されていないか）」などのスタイルが適用されていないかをご確認ください。

以下に、類似（っぽい？）スレッドで、AutoCompleteExtenderが他のコントロールに隠れちゃうというものがありました。

そこでもCSSでのポジション指定が悪さしているのでは、と連携されています。

※　解決した方が、他の類似問題を抱えている人のためにコードを掲載してくれています。ご参考までに。

AutoComplete extender hiding behind another control

　

＜補足＞

ちなみに、私の解決案の前提は、AutoCompleteExtender（として動作するHTML要素）がレンダリングされていることを前提にしています。

開発者ツールを利用するなどして、AutoCompleteExtenderに該当するHTML要素が存在しているのをご確認いただき、それでも表示されたり表示されなかったりすることがある場合は、上記のスレッドの解決案が調査の糸口になるかもしれません。

（また、動作比較検証をする場合は、IEだけでなく別のブラウザを利用すると、また少し問題の切り分けができるかもしれません）

　

以上、調査のヒントになりますようでしたら、幸いです。

Answer 8

> vgrid.jsではなく、supertables.jsというプラグインの後継の
> Grid.jsというものを使っています。

これ ↓ のことでしょうか？　

mmurph211 / Grid
https://github.com/mmurph211/Grid

最初の質問に、

> jqueryのGrid.jsを組み合わせてグリッドを作成しております。

と書いてありましたが、jQuery は使っていないようです（普通にJavaScript のみのようです）。

それはともかく、GridView に Calendar とか AutoComplete を配置するということは、当該セルには input 要素を配置し、その下に Ajax Control Toolkit のスクリプトでカレンダーやリストを追加することになりますが、Grid のスクリプトによるスクロールやリサイズによっ消えてしまうということではないかと想像してます。

ちょっと面白そうな Plugin なので自分でも試してみます。

Answer 9

実際に以下のサイトから JavaScript と css を入手して試してみました。

mmurph211 / Grid
https://github.com/mmurph211/Grid

先のレスで「Grid のスクリプトによるスクロールやリサイズによって消えてしまうということではないかと想像してます。」と書きましたが、違ってました。

表示されるのは GridView から生成された table ではなく、その table の DOM から Grid.js が生成した別物です。

上のページで Demo を動かして、IE の［表示(V)］⇒［ソース(C)］で表示される html ソースと、［ツール(T)］⇒［F12 開発者ツール(L)］で開発者ツールを起動し［HTML］タブで DOM ツリーを表示して見比べてください。

html ソースの <table id="demoTable"> ... </table> は、開発者ツールで見ると <div class="mgBase"> に置き換えられているのが分かります。

Calendar や AutoComplete を使っているということは、DB の更新まで行うことを考えてるのですよね。更新を Grid.js が生成した別物を操作して行うのは無理っぽいです。

自分が試した限りでは、TextBox だけ使ってもダメでした。なので、例え Calendar や AutoComplete によるカレンダーやリストの表示だけはうまくできたとしても（そこまで試してないですが）、最終的な目的である更新はできないと思います。

GridView は表示だけにして、更新は行選択で GridView とは別に DetailsView か FormView を表示して行うのがよさそうです。

Answer 10

返信ありがとうございます。

開発者ツールを利用してHTML要素を確認しましたところ、

うまく表示しない場合でもAutoCompleteExtenderがレンダリングされていることを確認しました。

IE以外のブラウザを利用して現象が再現するか、一度試してみようと思います。

また進展がありましたら、記載させていただきます。

Answer 11

返信ありがとうございます。

上記URLのPluginのことで間違いありません。

また、jQueryではなかったみたいです。申し訳ありません。

Answer 12

返信ありがとうございます。

DBの更新につきまして、tableからdivに置き換えられた後も、

GridView内のオブジェクトをFindControlすると、Calendar や AutoComplete で設定した値を取得できましたので、

取得した値を用いて、DBの更新を行うことはできました。

Grid.jsがdivに置き換える処理にて、Calendar や AutoComplete の設定がうまくいってないのかもしれませんので、

Grid.jsのロジックを詳しく調査してみます。