マルチカラムリスト - データソース -

コンボおよびリストコントロールは、複合データバウンドコントロールとして使用できます。行ごとにスタイルを設定したり、Textプロパティやステータスバーに表示するカラムのインデックスを指定することも可能です。

コンボ:
リスト:
とまと青果064-9999札幌市中央区北13条西9丁目011-421-9999
檜木工所061-9999札幌群広島町西の里5-6011-375-9999
(株)北日本ベーごま商事031-9999八戸市中央町5-6-70178-33-9999
(株)旭川鉄柵工業079-9999旭川市永山2条990166-48-9999
宮城モロヘイヤ販売983-9999仙台市宮城野区宮城野6-7-8022-372-9999
東北蜘蛛の巣清掃(株)981-9999仙台市泉区泉ヶ丘6-7022-223-9999
(株)ロ-ズ生花981-9999仙台市青葉区国見7-8-9022-235-9999
赤間雲母取引166-9999杉並区堀ノ内5-6-703-3968-9999
(株)高田ポッポ魚介169-9999新宿区高田馬場6-7-803-3463-9999
(株)酒井飯盒リ-ス182-9999調布市若葉町7-8-903-3888-9999
(株)東京ベニヤ塗装150-9999渋谷区桜丘7-803-3307-9999
江戸甘酒堂108-9999港区芝4丁目8-903-3322-9999
中央ヤンマ研究所164-9999中野区中央5-6-703-3416-9999
中川曲輪建設103-9999中央区日本橋6-7-803-3917-9999
(株)石川腹痛薬品194-9999町田市森野7-8-90427-22-9999
ジェーケーエル812-9999福岡市博多区博多駅前5-6-7092-473-9999
(株)豊中カミナリ金属579-9999豊中市利倉東1丁目8-90729-86-9999
佐藤もち米食品150-9999渋谷区6-7-803-3739-9999
(株)四国化石販売791-9999松山市山西町9990899-72-9999
(有)鈴木ガレキ塗装263-9999千葉市稲毛区穴川町999043-251-9999
東日本あん蜜商事230-9999横浜市鶴見区東寺尾北台8-9045-581-9999
東得々証券(株)025-9999花巻市下根子5-60198-23-9999
和歌山兀々銀行640-9999和歌山市屋形町6-70734-79-9999
(株)黒田並装製本395-9999飯田市松尾代田9990265-22-9999
横川人力交通545-9999大阪市阿倍野区文の里6-7-806-623-9999
浜松箱型三輪製作所430-9999浜松市中之郷9990543-45-9999
(株)木町大衆電鉄981-9999仙台市青葉区木町通7-8-9022-234-9999
(相)日本ゆりかご生命972-9999いわき市遠野町風呂脇7-80246-89-9999
大熊愛犬ヘルスセンター011-9999秋田市土崎港中央5-6-70188-45-9999
山形甲虫ショップ990-9999山形市飯田6-7-80236-31-9999
角川障子紙販売300-9999稲敷群阿見町青苗990298-87-9999
トンビ・エア・システム328-9999栃木市大宮町8-90282-27-9999
的場万百貨352-9999新座市石神7-8-90424-72-9999
吉村糸電話通信460-9999名古屋市中区丸の内5-6052-222-9999
ナゴヤ悠々観光(株)464-9999名古屋市千種区内山5-6-7052-734-9999
沖縄鶏卵スーパー901-9999浦添市伊祖6-7-8098-861-9999
キッチンクリーンセンター371-9999前橋市天川原町6-70270-21-9999
児玉防水畳製作860-9999熊本市細工町7-8-9096-325-9999
長崎カントリーフーズ857-9999佐世保市卸町7-80956-22-9999
(株)蛸足工業601-9999神戸市南区吉祥院車道町99075-681-9999
柏虎の子書房541-9999大阪市中央区備後町5-6-706-262-9999
福岡防人警備(株)910-9999福岡市中央区天神6-7-8092-712-9999
(有)岡本標識塗装981-9999仙台市青葉区一番町8-9022-373-9999
若生鴨鳩病院150-9999中央区渋谷区神宮前7-8-903-3409-9999
樫村裏紙印刷639-9999北葛城群香芝町連坂99907457-7-9999
松江広々造園690-9999松江市伊勢宮町9990852-27-9999
山本ヤク乳店880-9999宮崎市大郷7-8-90985-53-9999
(株)広島香木商会724-9999東広島市西条昭和町9990824-22-9999
敷島雑魚寝フェリー(株)755-9999宇部市昭和町5-6-70836-21-9999
(有)デジタルノロシネット689-9999気高群気高町浜村5-60857-82-9999
京都鹿鳴通運(株)620-9999福知山市篠尾9990773-22-9999
昭和チクタク堂710-9999倉敷市平田9990864-22-9999
富士竹林建設403-9999富士吉田市緑ヶ丘6-7-80555-22-9999
こぼしバンク 富山支店930-9999富山市長江6-70764-35-9999
戸塚烏帽子縫製所780-9999高知市追手筋7-8-90888-75-9999
今川ツチノコ取引467-9999名古屋市瑞穂区汐路町7-8052-852-9999
中部山火事警備保障920-9999金沢市大手町8-90762-62-9999
Textプロパティとして表示するカラムのインデックス
ステータスバーに表示するカラムのインデックス
カラムヘッダの幅サイズ変更
カラムヘッダクリックによるソート

ソースコード

別ウィンドウで表示
using System;

public partial class MultiColumn_DataSource : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        // カラムの設定をします。
        GcComboBox1.ListBox.TextSubItemIndex = (int)GcNumber1.Integer;
        GcComboBox1.ListBox.DescriptionSubItemIndex = (int)GcNumber2.Integer;
        GcComboBox1.ListBox.DefaultColumn.Header.AllowResize = CheckBox1.Checked;
        GcComboBox1.ListBox.DefaultColumn.Header.Clickable = CheckBox2.Checked;

        GcListBox1.TextSubItemIndex = (int)GcNumber1.Integer;
        GcListBox1.DescriptionSubItemIndex = (int)GcNumber2.Integer;
        GcListBox1.DefaultColumn.Header.AllowResize = CheckBox1.Checked;
        GcListBox1.DefaultColumn.Header.Clickable = CheckBox2.Checked;
    }
}

Partial Class MultiColumn_DataSource
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        ' カラムの設定をします。
        GcComboBox1.ListBox.TextSubItemIndex = GcNumber1.Integer
        GcComboBox1.ListBox.DescriptionSubItemIndex = GcNumber2.Integer
        GcComboBox1.ListBox.DefaultColumn.Header.AllowResize = CheckBox1.Checked
        GcComboBox1.ListBox.DefaultColumn.Header.Clickable = CheckBox2.Checked

        GcListBox1.TextSubItemIndex = GcNumber1.Integer
        GcListBox1.DescriptionSubItemIndex = GcNumber2.Integer
        GcListBox1.DefaultColumn.Header.AllowResize = CheckBox1.Checked
        GcListBox1.DefaultColumn.Header.Clickable = CheckBox2.Checked
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="MultiColumn_DataSource, App_Web_o50vx2gw" stylesheettheme="SkinFile" %>

<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMCombo" tagprefix="im_combo" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMList" tagprefix="im_list" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        // Textプロパティとして表示するカラムのインデックスを設定します。
        function GcNumber1_ValueChanged(sender, eArgs) {
            if (!document.getElementById("isClient").checked) return;

            var list = FindIMControl("<% =GcComboBox1.ClientID %>").GetListBox();
            list.SetTextSubItemIndex(sender.GetInteger());
            FindIMControl("<% =GcListBox1.ClientID %>").SetTextSubItemIndex(sender.GetInteger());
        }
        // ステータスバーに表示するカラムのインデックスを設定します。
		function GcNumber2_ValueChanged(sender, eArgs) {
		    if (!document.getElementById("isClient").checked) return;

		    var list = FindIMControl("<% =GcComboBox1.ClientID %>").GetListBox();
		    list.SetDescriptionSubItemIndex(sender.GetInteger());
		    FindIMControl("<% =GcListBox1.ClientID %>").SetDescriptionSubItemIndex(sender.GetInteger());
		}
        // カラムヘッダの幅サイズ変更を有効にするかどうか設定します。
		function AllowResize(obj) {
		    if (!document.getElementById("isClient").checked) return;

		    var list = FindIMControl("<% =GcComboBox1.ClientID %>").GetListBox();
		    var comboColumn = list.GetDefaultColumnHeader();
		    var listColumn = FindIMControl("<% =GcListBox1.ClientID %>").GetDefaultColumnHeader();
		    comboColumn.SetAllowResize(obj.checked);
		    listColumn.SetAllowResize(obj.checked);
		}
        // カラムヘッダクリックによるソートを有効にするかどうか設定します。
		function Clickable(obj) {
		    if (!document.getElementById("isClient").checked) return;

		    var list = FindIMControl("<% =GcComboBox1.ClientID %>").GetListBox();
		    var comboColumn = list.GetDefaultColumnHeader();
		    var listColumn = FindIMControl("<% =GcListBox1.ClientID %>").GetDefaultColumnHeader();
		    comboColumn.SetClickable(obj.checked);
		    listColumn.SetClickable(obj.checked);
		}
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Sample.mdb" 
            SelectCommand="SELECT [会社名], [郵便番号], [住所1], [住所2] , [TEL] FROM [会社]">
    </asp:AccessDataSource>
    
    <div class="sample">
        <table>
            <tr>
                <td class="controlsTd">コンボ:
                    <br />
                    <im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" 
                        DataSourceID="AccessDataSource1" ItemsChanged="False" Width="250px">
                        <ListBox AutoGenerateColumns="True" AutoWidth="True" StatusBar="True" AllowResize="True" />
                        <horizontalline linecolor="#FF6666" linestyle="Solid" linewidth="1px" />
                        <verticalline linestyle="Dotted" linewidth="1px" />
                        <listheaderpane visible="True" />
                        <defaultcolumn autowidth="True" header-allowresize="True" header-clickable="True" />
                        <listcolumn datapropertyname = "データバインドされた Col0" header-text = "データバインドされた Col0" ></listcolumn>
                        <listcolumn datapropertyname = "データバインドされた Col1" header-text = "データバインドされた Col1" ></listcolumn>
                        <listcolumn datapropertyname = "データバインドされた Col2" header-text = "データバインドされた Col2" ></listcolumn>
                        <ItemTemplate BackColor="#FFFACD"></ItemTemplate>
                        <ItemTemplate BackColor="#FFF5EE"></ItemTemplate>
                        <helpvalue ></helpvalue>
                    </im_combo:GcComboBox>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">リスト:<br />
                    <im_list:GcListBox ID="GcListBox1" runat="server" HasLoadFromXml="True" Width="570px"
                        AutoGenerateColumns="True" DataSourceID="AccessDataSource1" StatusBar="True">
                        <HorizontalLine LineColor="#FF9966" LineStyle="Solid" LineWidth="1px" />
                        <VerticalLine LineColor="#CCCCCC" LineStyle="Dashed" LineWidth="1px" />
                        <ListHeaderPane Visible="True" />
                        <DefaultColumn AutoWidth="True" Header-AllowResize="True" Header-Clickable="True" />
                        <listcolumn datapropertyname = "データバインドされた Col0" header-text = "データバインドされた Col0" ></listcolumn>
                        <listcolumn datapropertyname = "データバインドされた Col1" header-text = "データバインドされた Col1" ></listcolumn>
                        <listcolumn datapropertyname = "データバインドされた Col2" header-text = "データバインドされた Col2" ></listcolumn>
                        <ItemTemplate BackColor="#F5FFFA" ForeColor="#483D8B"></ItemTemplate>
                        <ItemTemplate BackColor="#FAEBD7" ForeColor="#B22222"></ItemTemplate>
                        <helpvalue ></helpvalue>
                    </im_list:GcListBox>
                </td>
            </tr>
        </table>
    </div>
    <label style="font-size:80%;"><input type="checkbox" id="isClient" checked="checked" /> クライアント側の設定を有効にする</label>
    <table class="inputTable">
        <tr>
            <th class="inputTh">Textプロパティとして表示するカラムのインデックス</th>
            <td class="inputTd">
                <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" 
                    MaxValue="4" MinValue="0" Width="60px">
                    <clientevents valuechanged="GcNumber1_ValueChanged"></clientevents>
                    <DropDown Visible="False" Enabled="false" /><Spin Visible="True" /><helpvalue value = "0" ></helpvalue>
                </im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <th class="inputTh">ステータスバーに表示するカラムのインデックス</th>
            <td class="inputTd">
                <im_number:GcNumber ID="GcNumber2" runat="server" HasLoadFromXml="True" 
                    MaxValue="4" MinValue="0" Width="60px">
                    <clientevents valuechanged="GcNumber2_ValueChanged"></clientevents>
                    <DropDown Visible="False" Enabled="false" /><Spin Visible="True" /><helpvalue value = "1" ></helpvalue>
                </im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <th class="inputTh">カラムヘッダの幅サイズ変更</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox1" runat="server" Checked="True" Text="有効にする" onclick="AllowResize(this);"/>
            </td>
        </tr>
        <tr>
            <th class="inputTh">カラムヘッダクリックによるソート</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox2" runat="server" Checked="True" Text="有効にする" onclick="Clickable(this);"/>
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="サーバー側で設定" 
            onclick="Button1_Click" />
    </center>
</asp:Content>


このページの先頭へ戻る