ASP.NET AJAX Control Toolkit - DragPanel -

InputManの各コントロールは、ASP.NET AJAX Control ToolkitのDragPanelコントロールに配置できます。

テキスト、マスク、数値コントロール
テキスト:
マスク:
数値:
日付時刻、日付、時刻コントロール
日付時刻:
日付:
時刻:
コンボ、リストコントロール
コンボ:
リスト:
カレンダー、電卓コントロール
カレンダー:
電卓:

ソースコード

別ウィンドウで表示
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

    }
}

Partial Class ControlToolkit_DragPanel
    Inherits System.Web.UI.Page

End Class

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

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMCalculator" TagPrefix="im_calculator" %>
<%@ 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.IMCombo" TagPrefix="im_combo" %>
<%@ 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.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMDate" TagPrefix="im_date" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMMask" TagPrefix="im_mask" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMCalendar" TagPrefix="im_calendar" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .dragheader {
            border: 2px solid black;
            cursor: move;
            font-weight: bold;
            font-size: 90%;
            text-align: center;
            width: 100%;
        }
        .dragcontent {
            border: 2px solid black;
            border-top: 0px;
            background-color: White;
            width: 100%;
            height: 100%;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
    <div style="height: 150px;margin-top:-100px;">
        <asp:Panel ID="Topic1" runat="server" Width="540" style="z-index: 20;">
            <asp:Panel ID="Topic1_Header" CssClass="dragheader" runat="server" BackImageUrl="~/images/imImages/header-opened.png">
                テキスト、マスク、数値コントロール
            </asp:Panel>
            <asp:Panel ID="Topic1_Content" CssClass="dragcontent" runat="server">
                <table>
                    <tr>
                        <td class="controlsTd">テキスト:</td>
                        <td class="controlsTd">
                            <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" Text="テキストコントロール" Width="200px">
                            </im_edit:GcTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="controlsTd">マスク:</td>
                        <td class="controlsTd">
                            <im_mask:GcMask ID="GcMask1" runat="server" Width="200px" HasLoadFromXml="True">
                                <Format Pattern="℡ \D{2,4}-\D{2,4}-\D{4}" />
                            </im_mask:GcMask>
                        </td>
                    </tr>
                    <tr>
                        <td class="controlsTd">数値:</td>
                        <td class="controlsTd">
                            <im_number:GcNumber ID="GcNumber1" runat="server" Width="200px" 
                                HasLoadFromXml="True">
                                <Spin Visible="true" />
                                <DropDown DropDownType="NumericPad" />
                            </im_number:GcNumber>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </asp:Panel>
    </div>
    <asp:DragPanelExtender ID="Topic1_DragPanelExtender" runat="server" 
        DragHandleID="Topic1_Header" TargetControlID="Topic1">
    </asp:DragPanelExtender>

    <div style="height:150px;">
        <asp:Panel ID="Topic2" runat="server" Width="540px" style="z-index: 20;">
        <asp:Panel ID="Topic2_Header" runat="server" CssClass="dragheader" BackImageUrl="~/images/imImages/header-opened.png">
            日付時刻、日付、時刻コントロール
        </asp:Panel>
        <asp:Panel ID="Topic2_Content" runat="server" CssClass="dragcontent">
            <table>
                <tr>
                    <td class="controlsTd">日付時刻:</td>
                    <td class="controlsTd">
                        <im_date:GcDateTime ID="GcDateTime1" runat='server' Width="200" HasLoadFromXml="True">
                            <DropDown DropDownType="Picker" />
                        </im_date:GcDateTime>
                    </td>
                </tr>
                <tr>
                    <td class="controlsTd">日付:</td>
                    <td class="controlsTd">
                        <im_date:GcDate ID="GcDate1" runat='server' Width="200" HasLoadFromXml="True"></im_date:GcDate>
                    </td>
                </tr>
                <tr>
                    <td class="controlsTd">時刻:</td>
                    <td class="controlsTd">
                        <im_date:GcTime ID="GcTime1" runat='server' Width="200" HasLoadFromXml="True">
                            <DropDown DropDownType="Picker" />
                        </im_date:GcTime>
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </asp:Panel>
    </div>
    <asp:DragPanelExtender ID="Topic2_DragPanelExtender" runat="server" 
        DragHandleID="Topic2_Header" TargetControlID="Topic2">
    </asp:DragPanelExtender>

    <div style="height:250px;">
        <asp:Panel ID="Topic3" runat="server" Width="540px" style="z-index: 20;">
            <asp:Panel ID="Topic3_Header" runat="server" CssClass="dragheader" BackImageUrl="~/images/imImages/header-opened.png">
                コンボ、リストコントロール
            </asp:Panel>
            <asp:Panel ID="Topic3_Content" runat="server" CssClass="dragcontent">
                <table>
                    <tr>
                        <td class="controlsTd">コンボ:</td>
                        <td class="controlsTd">
                            <im_combo:GcComboBox ID="GcComboBox1" runat='server' Width="200" 
                                HasLoadFromXml="True">
                                <ListBox AutoWidth="True" />
                                <defaultcolumn autowidth="True"></defaultcolumn>
                                <listcolumn header-text="クラス名"></listcolumn>
                                <listcolumn header-text="コントロール名"></listcolumn>
                                <comboitem image="0"></comboitem>
                                <subitem index="0" value="GcTextBox"></subitem>
                                <subitem index="0" value="テキストコントロール"></subitem>
                                <comboitem image="1"></comboitem>
                                <subitem index="1" value="GcMask"></subitem>
                                <subitem index="1" value="マスクコントロール"></subitem>
                                <comboitem image="2"></comboitem>
                                <subitem index="2" value="GcDatetime"></subitem>
                                <subitem index="2" value="日付時刻コントロール"></subitem>
                                <comboitem image="3"></comboitem>
                                <subitem index="3" value="GcDate"></subitem>
                                <subitem index="3" value="日付コントロール"></subitem>
                                <comboitem image="4"></comboitem>
                                <subitem index="4" value="GcTime"></subitem>
                                <subitem index="4" value="時刻コントロール"></subitem>
                                <comboitem image="5"></comboitem>
                                <subitem index="5" value="GcNumber"></subitem>
                                <subitem index="5" value="数値コントロール"></subitem>
                                <comboitem image="6"></comboitem>
                                <subitem index="6" value="GcComboBox"></subitem>
                                <subitem index="6" value="コンボコントロール"></subitem>
                                <comboitem image="7"></comboitem>
                                <subitem index="7" value="GcListBox"></subitem>
                                <subitem index="7" value="リストコントロール"></subitem>
                                <comboitem image="8"></comboitem>
                                <subitem index="8" value="GcCalendar"></subitem>
                                <subitem index="8" value="カレンダーコントロール"></subitem>
                                <comboitem image="9"></comboitem>
                                <subitem index="9" value="GcCalculator"></subitem>
                                <subitem index="9" value="電卓コントロール"></subitem>
                                <helpvalue ></helpvalue>
                            </im_combo:GcComboBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="controlsTd" valign="top">リスト:</td>
                        <td class="controlsTd">
                            <im_list:GcListBox ID="GcListBox1" runat="server" Width="370" Height="150" 
                                HasLoadFromXml="True">
                                <ListHeaderPane Font-Name="メイリオ" Font-Size="9pt" Height="28" Visible="True" />
                                <defaultcolumn autowidth="True"></defaultcolumn>
                                <listcolumn header-text="クラス名"></listcolumn>
                                <listcolumn header-text="コントロール名"></listcolumn>
                                <listitem image="0"></listitem>
                                <subitem index="0" value="GcAddress"></subitem>
                                <subitem index="0" value="住所検索エクステンダ"></subitem>
                                <listitem image="1"></listitem>
                                <subitem index="1" value="GcBalloonTip"></subitem>
                                <subitem index="1" value="バルーンチップエクステンダ"></subitem>
                                <listitem image="2"></listitem>
                                <subitem index="2" value="GcShortcut"></subitem>
                                <subitem index="2" value="ショートカットエクステンダ"></subitem>
                                <listitem image="3"></listitem>
                                <subitem index="3" value="GcValidatorAction"></subitem>
                                <subitem index="3" value="検証アクションエクステンダ"></subitem>
                                <listitem image="4"></listitem>
                                <subitem index="4" value="GcCharacterTypeValidator"></subitem>
                                <subitem index="4" value="文字種検証コントロール"></subitem>
                                <listitem image="5"></listitem>
                                <subitem index="5" value="GcTextLengthValidator"></subitem>
                                <subitem index="5" value="文字数検証コントロール"></subitem>
                                <listitem image="6"></listitem>
                                <subitem index="6" value="GcDateRangeValidator"></subitem>
                                <subitem index="6" value="日付範囲検証コントロール"></subitem>
                                <listitem image="7"></listitem>
                                <subitem index="7" value="GcDateDifferenceValidator"></subitem>
                                <subitem index="7" value="日付比較検証コントロール"></subitem>
                                <listitem image="8"></listitem>
                                <subitem index="8" value="GcForbiddenTextValidator"></subitem>
                                <subitem index="8" value="禁止文字列検証コントロール"></subitem>
                                <listitem image="9"></listitem>
                                <subitem index="9" value="GcDataTypeValidator"></subitem>
                                <subitem index="9" value="データ型検証コントロール"></subitem>
                                <helpvalue ></helpvalue>
                            </im_list:GcListBox>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </asp:Panel>
    </div>
    <asp:DragPanelExtender ID="Topic3_DragPanelExtender" runat="server" 
        DragHandleID="Topic3_Header" TargetControlID="Topic3">
    </asp:DragPanelExtender>

    <div style="height:320px;">
        <asp:Panel ID="Topic4" runat="server" Width="540px" style="z-index: 20;">
            <asp:Panel ID="Topic4_Header" runat="server" CssClass="dragheader" BackImageUrl="~/images/imImages/header-opened.png">
                カレンダー、電卓コントロール
            </asp:Panel>
            <asp:Panel ID="Topic4_Content" runat="server" CssClass="dragcontent">
                <table>
                    <tr>
                        <td class="controlsTd" valign="top">カレンダー:</td>
                        <td class="controlsTd">
                            <im_calendar:GcCalendar ID="GcCalendar1" runat='server' HasLoadFromXml="True"></im_calendar:GcCalendar>
                        </td>
                        <td class="controlsTd" valign="top">電卓:</td>
                        <td class="controlsTd">
                            <im_calculator:GcCalculator ID="GcCalculator1" runat='server' 
                                HasLoadFromXml="True"></im_calculator:GcCalculator>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </asp:Panel>
    </div>
    <asp:DragPanelExtender ID="Topic4_DragPanelExtender" runat="server" 
            DragHandleID="Topic4_Header" Enabled="True" TargetControlID="Topic4">
    </asp:DragPanelExtender>
    
    <script type="text/javascript">
        // The following snippet works around a problem where FloatingBehavior
        // doesn't allow drops outside the "content area" of the page - where "content
        // area" is a little unusual for our sample web pages due to their use of CSS
        // for layout.
        function setBodyHeightToContentHeight() {
            document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";
        }
        setBodyHeightToContentHeight();
        $addHandler(window, "resize", setBodyHeightToContentHeight);    
    </script>

</asp:Content>


このページの先頭へ戻る