マルチカラムリスト - クライアント側での項目操作 -

コンボコントロールでは、クライアント側でドロップダウンリストの項目の追加や削除が可能です。

動作確認
■項目の追加
背景色
文字色
カラム1の値
カラム2の値
カラム3の値

■項目の削除
インデックス

ソースコード

別ウィンドウで表示
using System;
using GrapeCity.Web.Input.Core.ListBox;
using GrapeCity.Web.Input.IMCombo;

public partial class MultiColumn_ComboItem : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // コンボコントロールを設定します。
            GcComboBox1.LoadDataDynamically = false;
            GcComboBox1.ListBox.AutoWidth = true;
            GcComboBox1.ListBox.DefaultColumn.AutoWidth = true;
            GcComboBox1.ListBox.DefaultColumn.Header.AllowResize = true;
            GcComboBox1.ListBox.HeaderPane.Visible = true;

            // カラムを追加します。
            GcComboBox1.ListBox.Columns.Add(new ListColumn("カラム1"));
            GcComboBox1.ListBox.Columns.Add(new ListColumn("カラム2"));
            GcComboBox1.ListBox.Columns.Add(new ListColumn("カラム3"));

            // 項目をひとつ追加します。
            GcComboBox1.Items.Add(new ComboItem(new SubItem("項目1のサブ項目1"), new SubItem("項目1のサブ項目2"), new SubItem("項目1のサブ項目3")));
        }
    }
}
Imports GrapeCity.Web.Input.Core.ListBox
Imports GrapeCity.Web.Input.IMCombo

Partial Class MultiColumn_ComboItem
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            ' コンボコントロールを設定します。
            GcComboBox1.LoadDataDynamically = False
            GcComboBox1.ListBox.AutoWidth = True
            GcComboBox1.ListBox.DefaultColumn.AutoWidth = True
            GcComboBox1.ListBox.DefaultColumn.Header.AllowResize = True
            GcComboBox1.ListBox.HeaderPane.Visible = True

            ' カラムを追加します。
            GcComboBox1.ListBox.Columns.Add(New ListColumn("カラム1"))
            GcComboBox1.ListBox.Columns.Add(New ListColumn("カラム2"))
            GcComboBox1.ListBox.Columns.Add(New ListColumn("カラム3"))

            ' 項目をひとつ追加します。
            GcComboBox1.Items.Add(New ComboItem(New SubItem("項目1のサブ項目1"), New SubItem("項目1のサブ項目2"), New SubItem("項目1のサブ項目3")))
        End If
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="MultiColumn_ComboItem, 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.IMEdit" tagprefix="im_edit" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>
<%@ Register assembly="GrapeCity.Web.Input.ColorPicker.v80" namespace="GrapeCity.Web.Input.IMColorPicker" tagprefix="im_ColorPicker" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        function Add_Item() {
            // サブ項目を作成します。
            var subItem1 = new GCIM.ListSubItem(FindIMControl('<% =this.GcTextBox1.ClientID %>').GetText());
            var subItem2 = new GCIM.ListSubItem(FindIMControl('<% =this.GcTextBox2.ClientID %>').GetText());
            var subItem3 = new GCIM.ListSubItem(FindIMControl('<% =this.GcTextBox3.ClientID %>').GetText());

            // コンボ項目にサブ項目を追加します。
            var item = new GCIM.ListItem();
            item.AddSubItem(subItem1);
            item.AddSubItem(subItem2);
            item.AddSubItem(subItem3);

            // 背景色を設定します。
            if (FindIMControl('<% =this.GcColorPicker1.ClientID %>').GetSelectedIndex() > -1) {
                item.SetBackColor(FindIMControl('<% =this.GcColorPicker1.ClientID %>').GetText());
            }

            // 文字色を設定します。
            if (FindIMControl('<% =this.GcColorPicker2.ClientID %>').GetSelectedIndex() > -1) {
                item.SetForeColor(FindIMControl('<% =this.GcColorPicker2.ClientID %>').GetText());
            }

            // コントロールに項目を追加、更新します。
            FindIMControl("<% =this.GcComboBox1.ClientID %>").AddItem(item);
            // コントロールをドロップダウン表示します。
            FindIMControl('<% =this.GcComboBox1.ClientID %>').SetDroppedDown(true);

            // 入力エリアをクリアします。
            FindIMControl('<% =this.GcTextBox1.ClientID %>').Clear();
            FindIMControl('<% =this.GcTextBox2.ClientID %>').Clear();
            FindIMControl('<% =this.GcTextBox3.ClientID %>').Clear();
        }

        function Delete_Item() {
            var combo = FindIMControl("<% =GcComboBox1.ClientID %>");
            var index = FindIMControl("<% =GcNumber1.ClientID %>").GetValue();

            if (index >= combo.GetItemsCount()) {
                alert("存在しないインデックスです。");
                return;
            }
            // 指定の項目をクリアします。
            combo.RemoveItemAt(index);
            combo.Clear();
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="sample">
        <table>
            <tr>
                <th>動作確認</th>
            </tr>
            <tr>
                <td>
                    <im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" Width="200">
                    </im_combo:GcComboBox>
                </td>
            </tr>
        </table>
    </div>
    <table class="inputTable">
        <tr>
            <td colspan="3">■項目の追加</td>
        </tr>
        <tr>
            <th class="inputTh">背景色</th>
            <td class="inputTd">
                <im_ColorPicker:GcColorPicker ID="GcColorPicker1" runat="server" Width="200px">
                </im_ColorPicker:GcColorPicker>
            </td>
            <td class="inputTd" rowspan="5" align="center">
                <input id="Button2" class="button" type="button" value="追加" onclick="Add_Item();"/></td>
        </tr>
        <tr>
            <th class="inputTh">文字色</th>
            <td class="inputTd">
                <im_ColorPicker:GcColorPicker ID="GcColorPicker2" runat="server" Width="200px">
                </im_ColorPicker:GcColorPicker>
            </td>
        </tr>
        <tr>
            <th class="inputTh">カラム1の値</th>
            <td class="inputTd">
                <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" Width="200px">
                </im_edit:GcTextBox>
            </td>
        </tr>
        <tr>
            <th class="inputTh">カラム2の値</th>
            <td class="inputTd">
                <im_edit:GcTextBox ID="GcTextBox2" runat="server" HasLoadFromXml="True" Width="200px">
                </im_edit:GcTextBox>
            </td>
        </tr>
        <tr>
            <th class="inputTh">カラム3の値</th>
            <td class="inputTd">
                <im_edit:GcTextBox ID="GcTextBox3" runat="server" HasLoadFromXml="True" Width="200px">
                </im_edit:GcTextBox>
            </td>
        </tr>
        <tr>
            <td colspan="3"><br />■項目の削除</td>
        </tr>
        <tr>
            <th class="inputTh">インデックス</th>
            <td class="inputTd">
                <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" 
                    MinValue="0" Width="50px">
                    <Format Digit="####0" NegativePrefix="-" />
                    <DisplayFormat Digit="####0" NegativePrefix="-" />
                    <DropDown Visible="False" Enabled="false" />
                    <Spin Visible="True" Wrap="False" />
                    <helpvalue value = "0" ></helpvalue>
                </im_number:GcNumber>
            </td>
            <td class="inputTd" align="center">
                <input id="Button3" class="button" type="button" value="削除" onclick="Delete_Item();"/>
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="ポストバック確認用" />
    </center>
</asp:Content>


このページの先頭へ戻る