表示機能 - 長い文字列の表示 -

コントロールに表示しきれない文字列はオーバーフローチップで表示できます。またテキストコントロールでは、文末や文中に省略文字の表示ができます。

テキスト:
コンボ:
リスト:
オーバーフローチップ
省略文字の表示(テキスト)
省略文字に使用する文字(テキスト)

ソースコード

別ウィンドウで表示
using GrapeCity.Web.Input.IMEdit;
using System;

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

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        // オーバーフローチップを設定します。
        GcTextBox1.OverflowTip = CheckBox1.Checked;
        GcComboBox1.ListBox.OverflowTip = CheckBox1.Checked;
        GcListBox1.OverflowTip = CheckBox1.Checked;

        // 省略文字を設定します。
        GcTextBox1.Ellipsis = (EllipsisMode)DropDownList1.SelectedIndex;
        GcTextBox1.EllipsisString = TextBox1.Text;
    }
}

Partial Class Display_Overflow
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        ' オーバーフローチップを設定します。
        GcTextBox1.OverflowTip = CheckBox1.Checked
        GcComboBox1.ListBox.OverflowTip = CheckBox1.Checked
        GcListBox1.OverflowTip = CheckBox1.Checked

        ' 省略文字を設定します。
        GcTextBox1.Ellipsis = DropDownList1.SelectedIndex
        GcTextBox1.EllipsisString = TextBox1.Text
    End Sub
End Class

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

<%@ 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.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" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        // オーバーフローチップを表示するかどうかを設定します。
        function OverflowTip(obj) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcTextBox1.ClientID %>").SetOverflowTip(obj.checked);
            FindIMControl("<% =GcComboBox1.ClientID %>").GetListBox().SetOverflowTip(obj.checked);
            FindIMControl("<% =GcListBox1.ClientID %>").SetOverflowTip(obj.checked);
        }
        // 省略文字の表示方法を設定します。
        function EllipsisMode(obj) {
            if (!document.getElementById("isClient").checked) return;

           FindIMControl("<%= GcTextBox1.ClientID %>").SetEllipsis(obj.options[obj.selectedIndex].value);
        }
        // 省略文字として表示される文字を設定します。
        function EllipsisString(obj) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<%= GcTextBox1.ClientID %>").SetEllipsisString(obj.value);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="sample">
        <table>
            <tr>
                <td class="controlsTd">テキスト:</td>
                <td>
                    <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" 
                        OverflowTip="True" Text="PowerTools InputMan for ASP.NET 8.0J" 
                        Width="200px" Ellipsis="EllipsisEnd"></im_edit:GcTextBox>
                </td>
                
            </tr>
            <tr>
                <td class="controlsTd">コンボ:</td>
                <td>
                    <im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" Width="200px">
                        <ListBox OverflowTip="True" />
                        <comboitem></comboitem>
                        <subitem index="0" value="PowerTools InputMan for ASP.NET 8.0J"></subitem>
                        <comboitem></comboitem>
                        <subitem index="1" value="PowerTools InputMan for Windows Forms 7.0J"></subitem>
                        <comboitem></comboitem>
                        <subitem index="2" value="PowerTools MultiRow for Windows Forms 7.0J"></subitem>
                        <comboitem></comboitem>
                        <subitem index="3" value="PowerTools CalendarGrid for Windows Forms 1.0J"></subitem>
                        <comboitem></comboitem>
                        <subitem index="4" value="PowerTools SPREAD for Windows Forms 7.0J"></subitem>
                        <comboitem></comboitem>
                        <subitem index="5" value="PowerTools SPREAD for ASP.NET 8.0J"></subitem>
                        <helpvalue ></helpvalue>
                    </im_combo:GcComboBox>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">リスト:</td>
                <td>
                    <im_list:GcListBox ID="GcListBox1" runat="server" HasLoadFromXml="True" 
                        OverflowTip="True" Width="200px" Height="150px"><ListHeaderPane Visible="True" /><listcolumn autowidth="True" header-contenthalign="Left" header-text="製品名"></listcolumn>
                        <listitem></listitem>
                        <subitem index="0" value="PowerTools InputMan for ASP.NET 8.0J"></subitem>
                        <listitem></listitem>
                        <subitem index="1" value="PowerTools InputMan for Windows Forms 7.0J"></subitem>
                        <listitem></listitem>
                        <subitem index="2" value="PowerTools MultiRow for Windows Forms 7.0J"></subitem>
                        <listitem></listitem>
                        <subitem index="3" value="PowerTools CalendarGrid for Windows Forms 7.0J"></subitem>
                        <listitem></listitem>
                        <subitem index="4" value="PowerTools SPREAD for Windows Forms 7.0J"></subitem>
                        <listitem></listitem>
                        <subitem index="5" value="PowerTools SPREAD for ASP.NET 8.0J"></subitem>
                        <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">オーバーフローチップ</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox1" runat="server" Checked="True" 
                    Text="オーバーフローチップを表示する" onclick="OverflowTip(this);" />
            </td>
        </tr>
        <tr>
            <th class="inputTh">省略文字の表示(テキスト)</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList1" runat="server" onchange="EllipsisMode(this)">
                    <asp:ListItem Value="none">表示しない</asp:ListItem>
                    <asp:ListItem Selected="True" Value="ellipsisend">文字列の末尾に表示</asp:ListItem>
                    <asp:ListItem Value="ellipsispath">文字列の中央部分に表示</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">省略文字に使用する文字(テキスト)</th>
            <td class="inputTd">
                <asp:TextBox ID="TextBox1" runat="server" Width="200px" onchange="EllipsisString(this)"></asp:TextBox>
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="サーバー側で設定" 
            onclick="Button1_Click" />
    </center>
</asp:Content>


このページの先頭へ戻る