DataGridの列幅を実行時に変更したい

質問

Web画面のSpreadからDataGridへ変更する対応を行っていて、
Spreadの列幅と同じ値を以下のようにテンプレート列を使用して、
ボタンやらチェックボックスやらラベルやら配置をして設定しました。
（TemplateColumnのWidthを使用するとSpreadと同じ値をいれても１／４くらいになってしまったので。）

<Columns>
　<asp:TemplateColumn>
　　<ItemTemplate>
　　　<asp:Button id="grdButton" runat="server" Width="45"></asp:Button>
　　</ItemTemplate>
　</asp:TemplateColumn>
　<asp:TemplateColumn>
　　<ItemTemplate>
　　　<asp:Button id="grdButton1" runat="server" Width="45"></asp:Button>
　　</ItemTemplate>
　</asp:TemplateColumn>
：
　　　　　　　　　：

しかし、実行時に条件によって見える列が変化するため
列を非表示にしたいのですが、Visibled = Falseにしてしまうと、
JavaScriptで、隠している列の値がとれないので、Width = ０にしたいのですが、
grd.Columns(col_2).HeaderStyle.Width = New Unit(0)
grd.Columns(col_2).ItemStyle.Width = New Unit(0)
というように記述しても列幅が０になっていません。
上記のように実現したければ、どのような手段があるでしょうか？

回答No.3

tochansa · ベストアンサー

あ、常に隠してる項目なんですか。それでしたら下記のような感じでHiddenなinputにデータを入れておけばjavascriptで値取得できるんじゃないかな？
IDとか、隠しておきたい値を持たせるときには列じゃなくて行内に見えないコントロールを置くようにしてます。
見栄えが悪くなったりしますので。

私がやったことある仕組みではpostback時に値がとれればよかったので、visible=falseにしたlabelを置いちゃうことが多かったです。
ただ、それが一般的かどうかはちょっとわかりません。

---html----------------------------------------------------------------
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<div id="div1" runat="server" style="overflow:hidden;">
<asp:Button id="Button1" runat="server" Width="45px" Text='<%# bind("hoge")%>'>
</asp:Button>
<input id="Hidden1" runat="server" type="hidden" value='<%# bind("id")%>'/></div>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>

---ソース----------------------------------------------------------------
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim dt As New Data.DataTable
dt.Columns.Add("id")
dt.Columns.Add("hoge")

dt.Rows.Add(1, "hoge1")
dt.Rows.Add(2, "hoge2")
datagrid1.DataSource = dt
datagrid1.DataBind()
End Sub

お礼

そういえば、列にこだわりすぎていましたね。
HIDDEN項目でやってみます。
回答ありがとうございました。

回答No.2

tochansa

初めてDataGrid触りました。列幅0pxにしてもボタン幅0pxにしてもばっちり出ちゃうんですねー。
ということで、一工夫してみました。以下、サンプルです。
ただし、ちょっと細い線が残ります。。。

---Html部分-------------------------------------------------------------------------------------------------
<asp:DataGrid ID="datagrid1" runat="server" AutoGenerateColumns="False" CellPadding="0" ShowHeader="False" >
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<div id="div1" runat="server" style="overflow:hidden;">
<asp:Button id="TextBox1" runat="server" Width="45px" Text='<%# bind("hoge")%>'>
</asp:Button>
</div>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<div id="div2" runat="server" style="overflow:hidden;">
<asp:Button id="TextBox2" runat="server" Width="45px" Text='<%# bind("huga")%>'>
</asp:Button>
</div>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Button ID="Button2" runat="server" Text="Button" />

---サーバー側-------------------------------------------------------------------------------------------------
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim dt As New Data.DataTable
dt.Columns.Add("hoge")
dt.Columns.Add("huga")
dt.Rows.Add("hoge1", "huga1")
dt.Rows.Add("hoge2", "huga2")
datagrid1.DataSource = dt
datagrid1.DataBind()
End Sub

Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim div As HtmlControl
For i As Integer = 0 To Me.datagrid1.Items.Count - 1
div = Me.datagrid1.Items(i).FindControl("div1")
div.Style.Item("width") = "0px"
div = Me.datagrid1.Items(i).FindControl("div2")
div.Style.Item("width") = "45px"
Next
End Sub

Protected Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
Dim div As HtmlControl
For i As Integer = 0 To Me.datagrid1.Items.Count - 1
div = Me.datagrid1.Items(i).FindControl("div1")
div.Style.Item("width") = "45px"
div = Me.datagrid1.Items(i).FindControl("div2")
div.Style.Item("width") = "0px"
Next
End Sub

// HiddenFieldなんて便利そうなものがあるんですね！折角作ってみたので投稿しちゃったけど、
そっちのほうがいいかも。。

お礼

回答ありがとうございます。
そうなんです。ばっちりでちゃうのです。
結局細かく仕様を突き詰めれば、JavaScriptで取得したいのは、
条件によって切り替わる列ではなくて、常に隠している項目のようでした。
切り替わる列はVisibledでいけそうです。
でも、常に隠している項目についても、Visibledではアクセスできないので、
tochansaさんのコントロールをDIVで囲む？も試してみます。
そもそもWebコントロールに隠し列を持つなんて概念がおかしいのでしょうか（＾＾；）

回答No.1

oboroxx

次のようなのはどうでしょうか。
隠したいカラムをTemplateFieldにし、itemのところにHiddenFieldを追加し、それにBindingをしてあげては。
ただ、動的にどのカラムが非表示になるかが変わるとなるともうちょっとひねりが必要かもしれませんが。

お礼

回答ありがとうございます。
TemplateFieldやHiddenFieldを探してみましたが、
どうやらDataGridではなく、GridViewみたいですね。
システムのバージョンで、GridViewは使えないのです。
情報が足りなくてすいません。