SPREAD for ASP.NETデモアプリケーション

現在位置 : ホーム > 製品情報 > SPREAD for ASP.NET製品仕様 > デモアプリケーショントップ > セル型 > AJAXControlToolkitセル型

デモアプリケーショントップ

新機能

AJAXControlToolkitセル型

AJAXControlToolkitセル型

AJAX Control Toolkitを使用したセル型を提供しています。表示データの形式にあわせてセル型を自由に選べます。

このサンプルでは、以下の10種類を紹介します。

Ajaxコンボボックス：セルへの直接入力とドロップダウンリストからの選択が可能です
オートコンプリート：このサンプルでは、日付（例：1950/02/04）の入力時にテキストの補完が行われます
カレンダー：カレンダーが表示されます
マスク編集：マスク文字を表示した入力が可能です
相互排他チェックボックス：このサンプルでは、B・C列から１つ、D・E列から１つのチェックが可能です

数値スピン：セル内でAJAX ControlToolkit のNumericUpDownコントロールの機能を実現します。
レーティング：このサンプルでは評価を表す星印で、レーティング設定が可能です。
スライダー：セルに範囲を示すスライダーおよび現在の値を表示します。
スライドショー：セル内で設定した複数枚画像のスライドショーが行われます。
ウォーターマーク：セルの値が空でフォーカスがないときに、代わりとなるテキストを表示します。

Ajaxコンボボックス：

オートコンプリート：

カレンダー：

マスク編集：

相互排他チェックボックス：

CheckBox1-1

CheckBox1-2

CheckBox2-1

CheckBox2-2

AJAX Control Toolkit セル型1

AJAX Control Toolkit セル型2

ソースコード

C#
VB
ASPX

別ウィンドウで表示

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class celltype_ajaxcontroltoolkitcelltype : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack) return;

        FpSpread1.Sheets.Count = 2;

        // SPREAD初期化
        FarPoint.Web.Spread.SheetView sheet1 = FpSpread1.Sheets[0];
        FarPoint.Web.Spread.SheetView sheet2 = FpSpread1.Sheets[1];

        sheet1.SheetName = "AJAX Control Toolkit セル型1";
        sheet2.SheetName = "AJAX Control Toolkit セル型2";

        InitSpread(sheet1);
        InitSpread(sheet2);

        // セル型の設定
        SetCellType1(sheet1);
        SetCellType2(sheet2);

    }

    private void InitSpread(FarPoint.Web.Spread.SheetView sheet)
    {
        // SPREAD設定        
        sheet.FpSpread.CssClass = "spreadStyle";
        sheet.FpSpread.UseClipboard = false;
        sheet.FpSpread.CommandBar.Visible = false;

        // フォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%");

        sheet.Columns[0].Font.Bold = true;

        // シート設定
        sheet.RowCount = 5;
        sheet.ColumnCount = 5;

        // 列幅の設定
        sheet.Columns[0].Width = 220;
        sheet.Columns[1].Width = 120;
        sheet.Columns[2].Width = 120;
        sheet.Columns[3].Width = 120;
        sheet.Columns[4].Width = 120;

        // 縦方向の揃え位置を中央に設定
        sheet.DefaultStyle.VerticalAlign = VerticalAlign.Middle;
    }

    private void SetCellType1(FarPoint.Web.Spread.SheetView sheet)
    {
        // セルをロックしてユーザの編集を禁止
        sheet.Columns[0].HorizontalAlign = HorizontalAlign.Right;
        sheet.Columns[0].Locked = true; ;

        sheet.Cells[0, 0].Text = "Ajaxコンボボックス：";
        sheet.Cells[1, 0].Text = "オートコンプリート：";
        sheet.Cells[2, 0].Text = "カレンダー：";
        sheet.Cells[3, 0].Text = "マスク編集：";
        sheet.Cells[4, 0].Text = "相互排他チェックボックス：";

        // Ajaxコンボボックス型セルの設定
        System.Data.DataSet ds = new System.Data.DataSet();
        ds.ReadXml(MapPath("../App_Data/data.xml"));

        FarPoint.Web.Spread.Extender.AjaxComboBoxCellType ajcmbbx = new FarPoint.Web.Spread.Extender.AjaxComboBoxCellType();
        ajcmbbx.DataSource = ds;
        ajcmbbx.DataMember = "data";
        ajcmbbx.DataTextField = "氏名";
        ajcmbbx.DataValueField = "ID";
        ajcmbbx.ShowEditor = true;
        sheet.Cells[0, 1].CellType = ajcmbbx;

        // オートコンプリート型セルの設定
        FarPoint.Web.Spread.Extender.AutoCompleteCellType ac = new FarPoint.Web.Spread.Extender.AutoCompleteCellType();
        ac.ShowEditor = true;
        ac.ServiceMethod = "GetCompletionList";
        ac.MinimumPrefixLength = 1;
        ac.CompletionInterval = 100;
        ac.EnableCaching = true;
        ac.CompletionSetCount = 10;
        ac.DelimiterCharacters = ";, :";
        sheet.Cells[1, 1].CellType = ac;

        // カレンダー型セルの設定
        FarPoint.Web.Spread.Extender.DateCalendarCellType dc = new FarPoint.Web.Spread.Extender.DateCalendarCellType();
        dc.DateFormat = "yyyy年MM月dd日";
        dc.ShowEditor = true;
        dc.TodaysDateFormat = "yyyy年 MMMM d日";
        dc.DaysModeTitleFormat = "yyyy年 MMMM";
        sheet.Cells[2, 1].CellType = dc;
        sheet.Cells[2, 1].Value = DateTime.Today;

        // マスク編集型セルの設定
        FarPoint.Web.Spread.Extender.MaskedEditCellType medit = new FarPoint.Web.Spread.Extender.MaskedEditCellType();
        medit.Editor.BorderWidth = 0;
        medit.ShowEditor = true;
        medit.MaskType = AjaxControlToolkit.MaskedEditType.Number;
        medit.Mask = "9,999,999.99";
        medit.ClearMaskOnLostFocus = false;
        sheet.Cells[3, 1].CellType = medit;

        // 相互排他チェックボックス型セルの設定
        FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType mechk11 = new FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType();
        mechk11.Text = "CheckBox1-1";
        mechk11.Key = "Key1";
        sheet.Cells[4, 1].CellType = mechk11;

        FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType mechk12 = new FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType();
        mechk12.Text = "CheckBox1-2";
        mechk12.Key = "Key1";
        sheet.Cells[4, 2].CellType = mechk12;

        FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType mechk21 = new FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType();
        mechk21.Text = "CheckBox2-1";
        mechk21.Key = "Key2";
        sheet.Cells[4, 3].CellType = mechk21;

        FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType mechk22 = new FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType();
        mechk22.Text = "CheckBox2-2";
        mechk22.Key = "Key2";
        sheet.Cells[4, 4].CellType = mechk22;
    }

    private void SetCellType2(FarPoint.Web.Spread.SheetView sheet)
    {
        // セルをロックしてユーザの編集を禁止
        sheet.Columns[0].HorizontalAlign = HorizontalAlign.Right;
        sheet.Columns[0].Locked = true; ;

        sheet.Cells[0, 0].Value = "数値スピン：";
        sheet.Cells[1, 0].Value = "レーティング：";
        sheet.Cells[2, 0].Value = "スライダー：";
        sheet.Cells[3, 0].Value = "スライドショー：";
        sheet.Cells[4, 0].Value = "ウォーターマーク：";

        // 数値スピン型セルの設定
        FarPoint.Web.Spread.Extender.NumericUpDownCellType nudc = new FarPoint.Web.Spread.Extender.NumericUpDownCellType();
        nudc.ShowEditor = true;
        nudc.Minimum = 0;
        nudc.Maximum = 100;
        nudc.Step = 5;
        sheet.Cells[0, 1].CellType = nudc;

        // レーティング型セルの設定
        FarPoint.Web.Spread.Extender.RatingCellType ratingcell = new FarPoint.Web.Spread.Extender.RatingCellType();
        ratingcell.StarCssClass = "ratingStar";
        ratingcell.EmptyStarCssClass = "emptyRatingStar";
        ratingcell.FilledStarCssClass = "filledRatingStar";
        ratingcell.WaitingStarCssClass = "savedRatingStar";
        ratingcell.CurrentRating = 2;
        ratingcell.MaxRating = 5;
        sheet.Cells[1, 1].CellType = ratingcell;

        // スライダー型セルの設定
        FarPoint.Web.Spread.Extender.SliderCellType slidercell = new FarPoint.Web.Spread.Extender.SliderCellType();
        slidercell.EnableHandleAnimation = true;
        slidercell.Minimum = 0;
        slidercell.Maximum = 100;
        slidercell.TooltipText = "{0}";
        slidercell.ShowEditor = true;
        sheet.Cells[2, 1].CellType = slidercell;
        sheet.Cells[2, 1].Value = 20;

        // スライドショー型セルの設定
        FarPoint.Web.Spread.Extender.SlideShowCellType slideshowcell = new FarPoint.Web.Spread.Extender.SlideShowCellType();
        slideshowcell.AutoPlay = true;
        slideshowcell.Loop = true;
        slideshowcell.PlayInterval = 1000;
        slideshowcell.SlideShowServiceMethod = "GetSlides";
        sheet.Cells[3, 1].CellType = slideshowcell;

        // ウォーターマーク型セルの設定
        FarPoint.Web.Spread.Extender.TextBoxWatermarkCellType txtcell = new FarPoint.Web.Spread.Extender.TextBoxWatermarkCellType();
        txtcell.WatermarkText = "ここに値を入力してください";
        sheet.Cells[4, 1].CellType = txtcell;
    }

    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string[] GetCompletionList(string prefixText, int count)
    {
        List<string> items = new List<string>();
        int i;

        string APP_DATA = "../App_Data/data.xml";
        string fpath = HttpContext.Current.Server.MapPath(APP_DATA);

        System.Data.DataSet ds = new System.Data.DataSet();
        ds.ReadXml(fpath);

        System.Data.DataTable dt = ds.Tables[0];
        System.Data.DataRow dr;

        for (i = 0; i < dt.Rows.Count; i++)
        {
            dr = dt.Rows[i];
            string str = dr["生年月日"].ToString();
            if (str != null && str.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase))
            {
                if (!items.Contains(str))
                    items.Add(str);
            }
            if (items.Count == count)
                break;
        }
        return items.ToArray();
    }

    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static AjaxControlToolkit.Slide[] GetSlides()
    {
        List<AjaxControlToolkit.Slide> items = new List<AjaxControlToolkit.Slide>();
        items.Add(new AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_spread.png", "", ""));
        items.Add(new AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_activereports.png", "", ""));
        items.Add(new AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_inputman.png", "", ""));
        items.Add(new AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_multirow.png", "", ""));
        items.Add(new AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_flexgrid.png", "", ""));

        return items.ToArray();
    }

}

Partial Class celltype_ajaxcontroltoolkitcelltype
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If IsPostBack Then
            Return
        End If

        ' SPREAD初期化
        FpSpread1.Sheets.Count = 2
        Dim sheet1 As FarPoint.Web.Spread.SheetView = FpSpread1.Sheets(0)
        Dim sheet2 As FarPoint.Web.Spread.SheetView = FpSpread1.Sheets(1)


        sheet1.SheetName = "AJAX Control Toolkit セル型1"
        sheet2.SheetName = "AJAX Control Toolkit セル型2"

        InitSpread(sheet1)
        InitSpread(sheet2)


        ' セル型の設定
        SetCellType1(sheet1)
        SetCellType2(sheet2)
    End Sub

    Private Sub InitSpread(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' SPREAD設定        
        sheet.FpSpread.CssClass = "spreadStyle"
        sheet.FpSpread.UseClipboard = False
        sheet.FpSpread.CommandBar.Visible = False

        ' フォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%")

        'FpSpread1.Columns(0).Font.Bold = True
        sheet.Columns(0).Font.Bold = True

        ' シート設定
        sheet.RowCount = 5
        sheet.ColumnCount = 5

        ' 列幅の設定
        sheet.Columns(0).Width = 220
        sheet.Columns(1).Width = 120
        sheet.Columns(2).Width = 120
        sheet.Columns(3).Width = 120
        sheet.Columns(4).Width = 120

        ' 縦方向の揃え位置を中央に設定
        sheet.DefaultStyle.VerticalAlign = VerticalAlign.Middle
    End Sub

    Private Sub SetCellType1(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' セルをロックしてユーザの編集を禁止
        sheet.Columns(0).HorizontalAlign = HorizontalAlign.Right
        sheet.Columns(0).Locked = True

        sheet.Cells(0, 0).Text = "Ajaxコンボボックス："
        sheet.Cells(1, 0).Text = "オートコンプリート："
        sheet.Cells(2, 0).Text = "カレンダー："
        sheet.Cells(3, 0).Text = "マスク編集："
        sheet.Cells(4, 0).Text = "相互排他チェックボックス："

        ' Ajaxコンボボックス型セルの設定
        Dim ds As New System.Data.DataSet()
        ds.ReadXml(MapPath("../App_Data/data.xml"))

        Dim ajcmbbx As New FarPoint.Web.Spread.Extender.AjaxComboBoxCellType()
        ajcmbbx.DataSource = ds
        ajcmbbx.DataMember = "data"
        ajcmbbx.DataTextField = "氏名"
        ajcmbbx.DataValueField = "ID"
        ajcmbbx.ShowEditor = True
        sheet.Cells(0, 1).CellType = ajcmbbx

        ' オートコンプリート型セルの設定
        Dim ac As New FarPoint.Web.Spread.Extender.AutoCompleteCellType()
        ac.ShowEditor = True
        ac.ServiceMethod = "GetCompletionList"
        ac.MinimumPrefixLength = 1
        ac.CompletionInterval = 100
        ac.EnableCaching = True
        ac.CompletionSetCount = 10
        ac.DelimiterCharacters = ";, :"
        sheet.Cells(1, 1).CellType = ac

        ' カレンダー型セルの設定
        Dim dc As New FarPoint.Web.Spread.Extender.DateCalendarCellType()
        dc.DateFormat = "yyyy年MM月dd日"
        dc.ShowEditor = True
        dc.TodaysDateFormat = "yyyy年 MMMM d日"
        dc.DaysModeTitleFormat = "yyyy年 MMMM"
        sheet.Cells(2, 1).CellType = dc
        sheet.Cells(2, 1).Value = DateTime.Today

        ' マスク編集型セルの設定
        Dim medit As New FarPoint.Web.Spread.Extender.MaskedEditCellType()
        medit.Editor.BorderWidth = 0
        medit.ShowEditor = True
        medit.MaskType = AjaxControlToolkit.MaskedEditType.Number
        medit.Mask = "9,999,999.99"
        medit.ClearMaskOnLostFocus = False
        sheet.Cells(3, 1).CellType = medit

        ' 相互排他チェックボックス型セルの設定
        Dim mechk11 As New FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType()
        mechk11.Text = "CheckBox1-1"
        mechk11.Key = "Key1"
        sheet.Cells(4, 1).CellType = mechk11

        Dim mechk12 As New FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType()
        mechk12.Text = "CheckBox1-2"
        mechk12.Key = "Key1"
        sheet.Cells(4, 2).CellType = mechk12

        Dim mechk21 As New FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType()
        mechk21.Text = "CheckBox2-1"
        mechk21.Key = "Key2"
        sheet.Cells(4, 3).CellType = mechk21

        Dim mechk22 As New FarPoint.Web.Spread.Extender.MutuallyExclusiveCheckBoxCellType()
        mechk22.Text = "CheckBox2-2"
        mechk22.Key = "Key2"
        sheet.Cells(4, 4).CellType = mechk22
    End Sub

    Private Sub SetCellType2(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' セルをロックしてユーザの編集を禁止
        sheet.Columns(0).HorizontalAlign = HorizontalAlign.Right
        sheet.Columns(0).Locked = True

        sheet.Cells(0, 0).Value = "数値スピン："
        sheet.Cells(1, 0).Value = "レーティング："
        sheet.Cells(2, 0).Value = "スライダー："
        sheet.Cells(3, 0).Value = "スライドショー："
        sheet.Cells(4, 0).Value = "ウォーターマーク："

        ' 数値スピン型セルの設定
        Dim nudc As New FarPoint.Web.Spread.Extender.NumericUpDownCellType()
        nudc.ShowEditor = True
        nudc.Minimum = 0
        nudc.Maximum = 100
        nudc.Step = 5
        sheet.Cells(0, 1).CellType = nudc

        ' レーティング型セルの設定
        Dim ratingcell As New FarPoint.Web.Spread.Extender.RatingCellType()
        ratingcell.StarCssClass = "ratingStar"
        ratingcell.EmptyStarCssClass = "emptyRatingStar"
        ratingcell.FilledStarCssClass = "filledRatingStar"
        ratingcell.WaitingStarCssClass = "savedRatingStar"
        ratingcell.CurrentRating = 2
        ratingcell.MaxRating = 5
        sheet.Cells(1, 1).CellType = ratingcell

        ' スライダー型セルの設定
        Dim slidercell As New FarPoint.Web.Spread.Extender.SliderCellType()
        slidercell.EnableHandleAnimation = True
        slidercell.Minimum = 0
        slidercell.Maximum = 100
        slidercell.TooltipText = "{0}"
        slidercell.ShowEditor = True
        sheet.Cells(2, 1).CellType = slidercell
        sheet.Cells(2, 1).Value = 20

        ' スライドショー型セルの設定
        Dim slideshowcell As New FarPoint.Web.Spread.Extender.SlideShowCellType()
        slideshowcell.AutoPlay = True
        slideshowcell.[Loop] = True
        slideshowcell.PlayInterval = 1000
        slideshowcell.SlideShowServiceMethod = "GetSlides"
        sheet.Cells(3, 1).CellType = slideshowcell


        ' ウォーターマーク型セルの設定
        Dim txtcell As New FarPoint.Web.Spread.Extender.TextBoxWatermarkCellType()
        txtcell.WatermarkText = "ここに値を入力してください"
        sheet.Cells(4, 1).CellType = txtcell
    End Sub

    <System.Web.Services.WebMethod()>
    <System.Web.Script.Services.ScriptMethod()>
    Public Shared Function GetCompletionList(ByVal prefixText As String, ByVal count As Integer) As String()
        Dim items As New List(Of String)()
        Dim i As Integer

        Dim APP_DATA As String = "../App_Data/data.xml"
        Dim fpath As String = HttpContext.Current.Server.MapPath(APP_DATA)

        Dim ds As New System.Data.DataSet()
        ds.ReadXml(fpath)

        Dim dt As System.Data.DataTable = ds.Tables(0)
        Dim dr As System.Data.DataRow

        For i = 0 To dt.Rows.Count - 1
            dr = dt.Rows(i)
            Dim str As String = dr("生年月日").ToString()
            If str IsNot Nothing AndAlso str.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase) Then
                If Not items.Contains(str) Then
                    items.Add(str)
                End If
            End If
            If items.Count = count Then
                Exit For
            End If
        Next
        Return items.ToArray()
    End Function

    <System.Web.Services.WebMethod()>
    <System.Web.Script.Services.ScriptMethod()>
    Public Shared Function GetSlides() As AjaxControlToolkit.Slide()
        Dim items As New List(Of AjaxControlToolkit.Slide)()
        items.Add(New AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_spread.png", "", ""))
        items.Add(New AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_activereports.png", "", ""))
        items.Add(New AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_inputman.png", "", ""))
        items.Add(New AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_multirow.png", "", ""))
        items.Add(New AjaxControlToolkit.Slide("../images/ajaxcontroltoolkitcelltype/cube_flexgrid.png", "", ""))
        Return items.ToArray()
    End Function

End Class

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="ajaxcontroltoolkitcelltype.aspx.cs" Inherits="celltype_ajaxcontroltoolkitcelltype" %>

<%@ Register Assembly="FarPoint.Web.SpreadJ" Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ScriptManager>
    <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid"
        BorderWidth="1px">
        <CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
            ButtonShadowColor="ControlDark">
        </CommandBar>
        <Sheets>
            <FarPoint:SheetView SheetName="Sheet1">
            </FarPoint:SheetView>
        </Sheets>
    </FarPoint:FpSpread>
</asp:Content>

このページの先頭へ戻る