InputMan for ASP.NET オンラインデモ

using GrapeCity.Web.Input.Core;
using System;

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

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        // ドロップダウン機能の有効無効
        GcTextBox1.DropDown.Enabled = CheckBox1.Checked;
        GcNumber1.DropDown.Enabled = CheckBox1.Checked;
        GcDateTime1.DropDown.Enabled = CheckBox1.Checked;
        GcDate1.DropDown.Enabled = CheckBox1.Checked;

        // フォーカス取得時にドロップダウン
        GcTextBox1.DropDown.AutoDropDown = CheckBox2.Checked;
        GcNumber1.DropDown.AutoDropDown = CheckBox2.Checked;
        GcDateTime1.DropDown.AutoDropDown = CheckBox2.Checked;
        GcDate1.DropDown.AutoDropDown = CheckBox2.Checked;

        // ボタンの表示
        GcTextBox1.DropDown.Visible = CheckBox3.Checked;
        GcNumber1.DropDown.Visible = CheckBox3.Checked;
        GcDateTime1.DropDown.Visible = CheckBox3.Checked;
        GcDate1.DropDown.Visible = CheckBox3.Checked;

        // オブジェクトの配置
        GcTextBox1.DropDownEditor.Align = (AlignEnum)RadioButtonList1.SelectedIndex;
        GcNumber1.DropDownCalculator.Align = (AlignEnum)RadioButtonList1.SelectedIndex;
        GcDateTime1.DropDownCalendar.Align = (AlignEnum)RadioButtonList1.SelectedIndex;
        GcDate1.DropDownCalendar.Align = (AlignEnum)RadioButtonList1.SelectedIndex;

        // 開くときのアニメーション
        GcTextBox1.DropDown.OpeningAnimation = (DropDownAnimation)DropDownList1.SelectedIndex;
        GcNumber1.DropDown.OpeningAnimation = (DropDownAnimation)DropDownList1.SelectedIndex;
        GcDateTime1.DropDown.OpeningAnimation = (DropDownAnimation)DropDownList1.SelectedIndex;
        GcDate1.DropDown.OpeningAnimation = (DropDownAnimation)DropDownList1.SelectedIndex;

        // 閉じるときのアニメーション
        GcTextBox1.DropDown.ClosingAnimation = (DropDownAnimation)DropDownList2.SelectedIndex;
        GcNumber1.DropDown.ClosingAnimation = (DropDownAnimation)DropDownList2.SelectedIndex;
        GcDateTime1.DropDown.ClosingAnimation = (DropDownAnimation)DropDownList2.SelectedIndex;
        GcDate1.DropDown.ClosingAnimation = (DropDownAnimation)DropDownList2.SelectedIndex;

        // 影の表示
        GcTextBox1.DropDown.DropDownShadow = CheckBox4.Checked;
        GcNumber1.DropDown.DropDownShadow = CheckBox4.Checked;
        GcDateTime1.DropDown.DropDownShadow = CheckBox4.Checked;
        GcDate1.DropDown.DropDownShadow = CheckBox4.Checked;
    }
}

Partial Class Display_DropDown
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        ' ドロップダウン機能の有効無効
        GcTextBox1.DropDown.Enabled = CheckBox1.Checked
        GcNumber1.DropDown.Enabled = CheckBox1.Checked
        GcDateTime1.DropDown.Enabled = CheckBox1.Checked
        GcDate1.DropDown.Enabled = CheckBox1.Checked

        ' フォーカス取得時にドロップダウン
        GcTextBox1.DropDown.AutoDropDown = CheckBox2.Checked
        GcNumber1.DropDown.AutoDropDown = CheckBox2.Checked
        GcDateTime1.DropDown.AutoDropDown = CheckBox2.Checked
        GcDate1.DropDown.AutoDropDown = CheckBox2.Checked

        ' ボタンの表示
        GcTextBox1.DropDown.Visible = CheckBox3.Checked
        GcNumber1.DropDown.Visible = CheckBox3.Checked
        GcDateTime1.DropDown.Visible = CheckBox3.Checked
        GcDate1.DropDown.Visible = CheckBox3.Checked

        ' オブジェクトの配置
        GcTextBox1.DropDownEditor.Align = RadioButtonList1.SelectedIndex
        GcNumber1.DropDownCalculator.Align = RadioButtonList1.SelectedIndex
        GcDateTime1.DropDownCalendar.Align = RadioButtonList1.SelectedIndex
        GcDate1.DropDownCalendar.Align = RadioButtonList1.SelectedIndex

        ' 開くときのアニメーション
        GcTextBox1.DropDown.OpeningAnimation = DropDownList1.SelectedIndex
        GcNumber1.DropDown.OpeningAnimation = DropDownList1.SelectedIndex
        GcDateTime1.DropDown.OpeningAnimation = DropDownList1.SelectedIndex
        GcDate1.DropDown.OpeningAnimation = DropDownList1.SelectedIndex

        ' 閉じるときのアニメーション
        GcTextBox1.DropDown.ClosingAnimation = DropDownList2.SelectedIndex
        GcNumber1.DropDown.ClosingAnimation = DropDownList2.SelectedIndex
        GcDateTime1.DropDown.ClosingAnimation = DropDownList2.SelectedIndex
        GcDate1.DropDown.ClosingAnimation = DropDownList2.SelectedIndex

        ' 影の表示
        GcTextBox1.DropDown.DropDownShadow = CheckBox4.Checked
        GcNumber1.DropDown.DropDownShadow = CheckBox4.Checked
        GcDateTime1.DropDown.DropDownShadow = CheckBox4.Checked
        GcDate1.DropDown.DropDownShadow = CheckBox4.Checked
    End Sub
End Class

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

<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMExtenders" tagprefix="im_extenders" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        function SetEnabled(obj) {
            if (!document.getElementById("isClient").checked) return;

            // ドロップダウン機能を有効にするかどうか設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownEnabled(obj.checked);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownEnabled(obj.checked);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownEnabled(obj.checked);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownEnabled(obj.checked);

        }

        function AutoDropDown(obj) {
            if (!document.getElementById("isClient").checked) return;

            // フォーカス取得時にドロップダウンするかどうか設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetAutoDropDown(obj.checked);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetAutoDropDown(obj.checked);
            FindIMControl("<% =GcNumber1.ClientID %>").SetAutoDropDown(obj.checked);
            FindIMControl("<% =GcDate1.ClientID %>").SetAutoDropDown(obj.checked);
        }

        function Visible(obj) {
            if (!document.getElementById("isClient").checked) return;

            // ドロップダウンボタンを表示するかどうか設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownVisible(obj.checked);
        }

        function DropDownAlign(obj) {
            if (!document.getElementById("isClient").checked) return;

            // ドロップダウンオブジェクトの配置を設定します。
            var align;
            var radio = obj.getElementsByTagName("input");
            for (var i = 0; i < radio.length; ++i) {
                if (radio[i].checked) {
                    align = radio[i].value;
                }
            }
            
            FindIMControl("<% =GcTextBox1.ClientID %>").GetDropDownEditor().SetAlign(align);
            FindIMControl("<% =GcDateTime1.ClientID %>").GetDropDownPicker().SetAlign(align);
            FindIMControl("<% =GcNumber1.ClientID %>").GetDropDownNumericPad().SetAlign(align);
            FindIMControl("<% =GcDate1.ClientID %>").GetDropDownCalendar().SetAlign(align);
        }

        function OpenAnimation(animation) {
            if (!document.getElementById("isClient").checked) return;

            // 開くときのアニメーション効果を設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownOpeningAnimation(animation);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownOpeningAnimation(animation);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownOpeningAnimation(animation);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownOpeningAnimation(animation);
        }

        function CloseAnimation(animation) {
            if (!document.getElementById("isClient").checked) return;

            // 閉じるときのアニメーション効果を設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownClosingAnimation(animation);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownClosingAnimation(animation);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownClosingAnimation(animation);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownClosingAnimation(animation);
        }

        function DropDownShadow(obj) {
            if (!document.getElementById("isClient").checked) return;

            // ドロップダウンオブジェクトに影をつけるかどうかを設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownShadow(obj.checked);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownShadow(obj.checked);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownShadow(obj.checked);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownShadow(obj.checked);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="sample">
    <table>
        <tr>
            <td class="controlsTd">テキスト：</td>
            <td class="controlsTd">
                <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" 
                    MultiLine="True" Text="仙台本社:
　仙台市泉区紫山
関東支社:
　川口市本町
大阪支店:
　大阪市北区中之島
名古屋営業所
　名古屋市中村区名駅" Width="170px">
                    <DropDown Visible="True" AutoDropDown="True" />
                    <dropdowneditor width="200px"></dropdowneditor>
                </im_edit:GcTextBox>
            </td>
            <td class="controlsTd">日付時刻：</td>
            <td>
                <im_date:GcDateTime ID="GcDateTime1" runat="server" HasLoadFromXml="True" 
                    Width="170px">
                    <helpvalue value = "2015/01/13 11:06:23" ></helpvalue><DropDown AutoDropDown="True" DropDownType="Picker" />
                </im_date:GcDateTime>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">数値：</td>
            <td>
                <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" Width="170px">
                    <DropDown AutoDropDown="True" DropDownType="NumericPad" />
                    <helpvalue value = "0" ></helpvalue>
                </im_number:GcNumber>
            </td>
            <td class="controlsTd">日付：</td>
            <td>
                <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="170px">
                     <DropDown AutoDropDown="True" />
                 </im_date:GcDate>
            </td>
        </tr>
    </table>
    </div>
    <im_extenders:GcShortcut ID="GcShortcut1" runat="server">
        <shortcutitem controlid = "GcTextBox1" value = "Clear,113,DropDown,118"/>
        <shortcutitem controlid = "GcNumber1" value = "Clear,113,DropDown,118"/>
        <shortcutitem controlid = "GcDate1" value = "Clear,113,DropDown,118,Now,119"/>
        <shortcutitem controlid = "GcDateTime1" value = "Clear,113,DropDown,118,Now,119"/>
    </im_extenders:GcShortcut>
    <label style="font-size:80%;"><input type="checkbox" id="isClient" checked="checked" /> クライアント側の設定を有効にする</label>
    <table class="inputTable">
        <tr>
            <th class="inputTh">ドロップダウン機能</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox1" runat="server" Checked="True" Text="有効にする" onclick="SetEnabled(this);"/> 
                <asp:CheckBox ID="CheckBox2" runat="server" Checked="True" Text="フォーカス取得時にドロップダウンする" onclick="AutoDropDown(this);" /> 
            </td>
        </tr>
        <tr>
            <th class="inputTh">ドロップダウンボタンの表示</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox3" runat="server" Checked="True" Text="表示する" onclick="Visible(this);" />
            </td>
        </tr>
        <tr>
            <th class="inputTh">ドロップダウンオブジェクトの配置</th>
            <td class="inputTd">
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" 
                    RepeatDirection="Horizontal" onchange="DropDownAlign(this);">
                    <asp:ListItem Selected="True" Value="left">左揃え</asp:ListItem>
                    <asp:ListItem Value="right">右揃え</asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">開くときのアニメーション</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList1" runat="server" onchange="OpenAnimation(this.value)">
                    <asp:ListItem Selected="True" Value="none">なし</asp:ListItem>
                    <asp:ListItem Value="scroll">Scroll</asp:ListItem>
                    <asp:ListItem Value="slide">Slide</asp:ListItem>
                    <asp:ListItem Value="fade">Fade</asp:ListItem>
                    <asp:ListItem Value="center">Center</asp:ListItem>
                    <asp:ListItem Value="extend">Extend</asp:ListItem>
                    <asp:ListItem Value="drag">Drag</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">閉じるときのアニメーション</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList2" runat="server" onchange="CloseAnimation(this.value)">
                    <asp:ListItem Selected="True" Value="none">なし</asp:ListItem>
                    <asp:ListItem Value="scroll">Scroll</asp:ListItem>
                    <asp:ListItem Value="slide">Slide</asp:ListItem>
                    <asp:ListItem Value="fade">Fade</asp:ListItem>
                    <asp:ListItem Value="center">Center</asp:ListItem>
                    <asp:ListItem Value="extend">Extend</asp:ListItem>
                    <asp:ListItem Value="drag">Drag</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">影の表示</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox4" runat="server" Text="ドロップダウンオブジェクトに影をつける" onclick="DropDownShadow(this);" />
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="サーバー側で設定" onclick="Button1_Click" />
    </center>
</asp:Content>