- PR -

GridViewのヘッダーにCSSが適用できない

参照元記事 | 同じ記事を参照しているスレッド一覧
1
投稿者投稿内容
ニセイタ
常連さん
会議室デビュー日: 2009/02/27
投稿数: 24
投稿日時: 2009-04-03 11:06
ASP.NET 2.0 CSS Friendly　+　AJAX　+　VS2005

でWEBアプリを開発しております。


http://dobon.net/vb/bbs/log3-36/21712.html

やりたいことは、GridViewのヘッダー行を固定して、スクロールするということでした
http://www.friendlysw.com/aspnet/Articles/app/050929-1.aspx
http://www.kametaro.dev-asp.net/(S(5ioic1550b114y45zh31o3v4))/P/39.aspx
http://msdn.microsoft.com/ja-jp/library/system.web.ui.webcontrols.gridview.useaccessibleheader(VS.80).aspx
http://msdn.microsoft.com/ja-jp/library/system.web.ui.webcontrols.gridview.rowheadercolumn(VS.80).aspx


を参照に、GridViewのヘッダーにCSSのプロパティをいれて、　ヘッダーを固定しようとしましたが、ヘッダーがCSSを受け付けない状態になっていて、
コンテンツ部のスタイルが効いてしまっています。
タブコンテナ　　＞　パネル（スクロールバー）　　＞　GridView
という構造です。

GridViewは　SQLデータソース、または、Page_PreRendar　にて、データバインドしております。


CSS
.Freezing
{

　z-index:10;
　top:expression(this.offsetParent.scrollTop);
background-color: Black;

}


&nbsp; &nbsp;&nbsp;<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" AutoPostBack="True" ToolTip="並び替え可能" CssClass="ajax_xp_tab" TabIndex="1" >
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" >

<ContentTemplate>

<div id="Div2" style="height:280px;" class="Freezing" >
<asp:Panel ID="GridPanel1" runat="server" Height="300px" ScrollBars="Vertical" >

<%--DataSourceID="CONTRACTSQLDATASOUCE"--%>
<asp:GridView ID="GridView1" runat="server" AllowSorting="True" Height="100px" Width="100px"
OnRowCommand="GridView1_RowCommand" AutoGenerateColumns="False" DataKeyNames="no,id"
ToolTip="並び替えができます。" EnableTheming="True" EnableViewState="False">
<Columns>
<asp:ButtonField ButtonType="Image" CommandName="GetDetails" ImageUrl="~/images/Btn.jpg"
Text="詳細表示">
<ControlStyle CssClass="GridStyle" />
<ItemStyle CssClass="GridStyle" />
<HeaderStyle CssClass="Freezing" />
</asp:ButtonField>



この方法でもヘッダー固定まではいかないです、ヘッダーを表示できて、ソートもできるかが課題です……。
http://techbank.jp/Community/blogs/mymio/archive/2009/03/09/5326.aspx

前後のIframe　の　編集のjavascriptで対応しても、どうしてもヘッダーが表示できません。

<script type="text/javascript">
window.onload = function() {
var fr = document.createElement("iframe");
// var fr = document.getElementById("GridVIew1");　←　オブジェクトが取得できない為、断念
var fr = document.getElementById("Div2");
var tb = document.getElementById("Div2");
var dv = document.all("TabPanel1");

//var header = tb.rows(0);
var w = tb.offsetWidth;
var h = tb.offsetHeight;

fr.style.width = w + "px";
// fr.style.height = h + "px"
// fr.style.zIndex = 10;
fr.style.position = "relative";
fr.style.top = -10;
fr.style.left = -10;
//fr.style.width = 980;
fr.style.height = 50;

fr.style.border = 0;
fr.frameBorder = 0;
fr.scrolling= "no";
fr.style.backgroundColor = "Red";
//tb.appendChild(fr);
//tb.top = 0;

fr.contentWindow.document.write("<body bgcolor='Transparent'></body>");
// fr.contentWindow.document.write("<body bgcolor='Transparent'></body>");


//このコメントを付けたりはずしたりして試せ。
//DIVGRIDVIEW.onscroll = function() {
//fr.style.top = this.scrollTop + "px";
//window.status = this.scrollTop;
//}
}

</script>


おそらく、タブコンテナ内　の　パネル内　の　GridView　のヘッダーにスタイルが適用できるようになれば、
ヘッダーを固定できるので、問題は解決すると思うのですが………
ASP.NET 2.0 CSS Friendly　
の場合　下記の方も、CSSがヘッダーに適用できずに回避策をうっているようなのですが……

http://blogs.wankuma.com/pinzolo/archive/2008/07/31/151248.aspx

標準モード、互換モード、両方で試しましたが、駄目でした　↓　マスターページ　の下記の記述を消しても駄目。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

どなたかご教授いただけますと幸いです。


ぱると
会議室デビュー日: 2006/12/21
投稿数: 17
投稿日時: 2009-04-03 11:24
http://blog.asura.co.jp/takehara/5219ac5dcee34422a506ab9f3df120df/entry.aspx
この方法で実装した事があります。

その3まであるらしいです。
あと、近々引越しするみたいですよ。

どうしてもできないんだったらGridViewやめてRepeaterにするってのもあるかもしれません。
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2009-04-04 06:49
ASP.NET 2.0 CSS Friendlyを利用しないで
ListViewを使ったらどうでしょうか。

こんな感じです。

ライブデモ＃１
http://asp35.com/samples/090217CS-5.aspx
ライブデモ＃２
http://asp35.com/samples/090217CS-4.aspx
_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
1

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