コンテキストメニュー

SPREAD for ASP.NETでは、独自のコンテキストメニューを表示することができます。 コンテキストメニューは列ヘッダ、行ヘッダ、データ領域でそれぞれ設定することができます。

メニューはサーバー側のコード、マークアップコード、SPREADデザイナで作成することができ、 クリックされた際のイベントは、サーバー側とクライアント側で取得することができます。
 ID氏名カナ生年月日性別血液型部署入社日メールアドレス
11001亀甲 滋万キコウ シゲマ1950/02/04A人事部1972/04/01sigema_kikou@abc.co.jp
21002寒田 希世カンダ キヨ1959/06/28B人事部1981/04/01kiyo_kanda@bbb.or.jp
31003小和瀬 澄オワセ キヨ1969/03/06A人事部1991/04/01kiyo_owase@aaa.co.jp
41004宇夫 早余子ウブ サヨコ1976/07/28O人事部1998/04/01sayoko_ubu@bbb.or.jp
51005宇田津 聖智ウダツ キヨトモ1965/09/04A営業部1987/04/01kiyotomo_udatu@abc.co.jp
61006茨城 昭児イバラキ ショウジ1963/04/28O営業部1985/04/01shouzi_ibaraki@xyz.ne.jp
71007石ヶ休 椎茄イシガキュウ シイナ1953/02/21O営業部1975/04/01siina_isigagyuu@abc.co.jp
81008赤司 恵治郎アカツカサ ケイジロウ1968/08/02O経理部1990/04/01keizirou_akatukasa@abc.co.jp
91009小橋 仰一オハシ ギョウイチ1972/03/02B経理部1994/04/01gyouiti_ohasi@abc.co.jp
101010一重 公大イチジュウ コウダイ1964/04/19B経理部1986/04/01koudai_itizyuu@xyz.ne.jp
111011稲並 勝五郎イナミ ショウゴロウ1962/02/18A営業部1984/04/01shougorou_inami@bbb.or.jp
121012穎原 紀代一エイハラ キヨカズ1965/02/13O営業部1987/04/01kiyokazu_eihara@bbb.or.jp
131013安士 定助アンシ サダスケ1964/09/09AB経理部1986/04/01sadasuke_ansi@aaa.co.jp
141014今重 邦三郎イマジュウ クニサブロウ1969/09/01O営業部1991/04/01kunisaburou_imazyuu@xyz.ne.jp
151015魚見 秀里ウオミ シュウリ1974/04/23A営業部1996/04/01shuuri_uomi@abc.co.jp
161016小佐井 幸仁オサイ コウジ1966/10/23A営業部1988/04/01kouzi_osai@aaa.co.jp
171017大高 吉左右オオダカ キチサユウ1950/10/07B営業部1972/04/01kitisayuu_oodaka@bbb.or.jp
181018上垣内 正名カミガイト ショウメイ1978/06/19O営業部2000/04/01shoumei_kamigaito@abc.co.jp
191019金曽 憙佳カネソ キヨシ1965/01/03AB営業部1987/04/01kiyosi_kaneso@xyz.ne.jp
201020吉光 定太郎キッコウ サダタロウ1960/10/18AB営業部1982/04/01sadatarou_kikkou@abc.co.jp
211021小曾 三三コソ サンゾウ1966/06/17O営業部1988/04/01sanzou_koso@xyz.ne.jp
221022貴俵 健有キヒョウ ケンユウ1952/02/26A営業部1974/04/01kenyuu_kihyou@abc.co.jp
231023蔭島 太郎カゲシマ タロウ1952/10/09A営業部1974/04/01tarou_kagesima@abc.co.jp
241024金賀 憲逸カナガ ケンイツ1954/01/01B営業部1976/04/01kenitu_kanaga@xyz.ne.jp
251025楠下 サヤ子クスノキシタ サヤコ1953/03/27O営業部1975/04/01sayako_kusunokisita@bbb.or.jp
261026角本 好七カドモト コウシチ1954/10/02O営業部1976/04/01kousiti_kadomoto@abc.co.jp
271027蒲沢 宗英ガマザワ シュウエイ1967/03/23O営業部1989/04/01shuuei_gamazawa@abc.co.jp
281028久角 堅市クスミ ケンイチ1969/09/04A営業部1991/04/01keniti_kusumi@bbb.or.jp
291029郷田 圭亮サトダ ケイスケ1961/05/16A製品部1983/04/01keisuke_satoda@abc.co.jp
301030倉員 恵孝ソウイン ケイタカ1959/09/05A製品部1981/04/01keitaka_souin@bbb.or.jp
311031饒村 九三子ジョウムラ クミコ1950/08/20A人事部1972/04/01kumiko_zyaumura@zzz.ne.jp
321032潮屋 恵勇シオヤ ケイユウ1977/02/26B人事部1999/04/01keiyuu_sioya@abc.co.jp
331033多留 光八タル コウハチ1961/06/01O営業部1983/04/01kouhati_taru@bbb.or.jp
341034茶本 将司サモト ショウジ1951/01/24AB営業部1973/04/01shouzi_samoto@zzz.ne.jp
351035大部 悟作ダイベ ゴサク1965/08/19O営業部1987/04/01gosaku_daibe@abc.co.jp
361036立井 健七タテイ ケンシチ1969/02/25O経理部1991/04/01kensiti_tatei@bbb.or.jp
371037高橋 賢一朗タカハシ ケンイチロウ1974/04/02O経理部1996/04/01kenitirou_takahasi@xyz.ne.jp
381038請川 公平セイカワ クンペイ1957/05/16B営業部1979/04/01kunpei_seikawa@abc.co.jp
391039椹木 公己サワキ コウキ1969/05/14A営業部1991/04/01kouki_sawaki@bbb.or.jp
401040田底 清策タゾコ キヨカズ1967/02/10A営業部1989/04/01kiyokazu_tazoko@bbb.or.jp
411041調 佐之助シラベ サノスケ1964/06/06A製品部1986/04/01sanosuke_sirabe@abc.co.jp
421042垰野 久仁弘タオノ クニヒロ1966/08/23B製品部1988/04/01kunihiro_taono@xyz.ne.jp
431043麝島 冴ジャジマ サエ1966/02/16B営業部1988/04/01sae_zyazima@abc.co.jp
441044砂古口 祥公サコグチ サチキミ1969/03/27O製品部1991/04/01satikimi_sakoguti@abc.co.jp
451045桜谷 欣重サクラタニ キンジュウ1960/07/22O製品部1982/04/01kinzyuu_sakuratani@zzz.ne.jp
461046赤野 茂貞セキノ シゲサダ1958/09/05B営業部1980/04/01sigesada_sekino@xyz.ne.jp
471047栄永 貢右サカエナガ コウユウ1951/02/06B製品部1973/04/01kouyuu_sakaenaga@aaa.co.jp
481048鷹木 サツタカキ サツ1957/10/05B製品部1979/04/01satu_takaki@abc.co.jp
491049澤海 剛義サワウミ ゴウヨシ1960/02/09O製品部1982/04/01gouyosi_sawaumi@abc.co.jp
501050外江 昊司ソトエ コウジ1968/07/23製品部1990/04/01gouyosi_sawaumi@abc.co.jp
   

ソースコード

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

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

        // クライアントイベント設定
        string js = "var spid='" + FpSpread1.ClientID + "';";
        js += "var ss=document.getElementById(spid);" + "\r\n";
        js += "if (ss.addEventListener) {" + "\r\n";
        js += "    ss.addEventListener(\"MenuItemClicked\", spread_MenuItemClicked, false);" + "\r\n";
        js += "} else {" + "\r\n";
        js += "    ss.onMenuItemClicked = spread_MenuItemClicked;" + "\r\n";
        js += "}" + "\r\n";

        ClientScript.RegisterStartupScript(this.GetType(), "onStartUpScript", js, true);

        if (IsPostBack)
        {
            return;
        }

        // SPREADの設定
        InitSpread(FpSpread1);

        // シート設定
        InitSpreadStyles(FpSpread1.Sheets[0]);
    }

    private void InitSpread(FarPoint.Web.Spread.FpSpread spread)
    {
        //データ連結
        System.Data.DataSet ds = new System.Data.DataSet();
        ds.ReadXml(MapPath("../App_Data/data50.xml"));
        spread.DataSource = ds;

        FarPoint.Web.Spread.ContextMenu vpMenu = new FarPoint.Web.Spread.ContextMenu();
        vpMenu.Type = FarPoint.Web.Spread.ContextMenuType.Viewport;

        // コピー
        FarPoint.Web.Spread.MenuItem copyVpItem = new FarPoint.Web.Spread.MenuItem("コピー");
        copyVpItem.ImageUrl = "../images/contextmenu/Copy.png";

        // 貼り付け
        FarPoint.Web.Spread.MenuItem pasteVpItem = new FarPoint.Web.Spread.MenuItem("貼り付け");
        pasteVpItem.ImageUrl = "../images/contextmenu/Paste.png";

        FarPoint.Web.Spread.MenuItem editVpItem = new FarPoint.Web.Spread.MenuItem("セル操作");
        editVpItem.ChildItems.AddRange(new FarPoint.Web.Spread.MenuItem[] {
            copyVpItem, 
            pasteVpItem 
        });
        vpMenu.Items.Add(editVpItem);

        spread.EnableContextMenu = true;
        spread.ContextMenus.Add(vpMenu);

        spread.CssClass = "spreadStyle";
        spread.UseClipboard = false;
    }

    private void InitSpreadStyles(FarPoint.Web.Spread.SheetView sheet)
    {
        // フォントサイズの設定
        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].Width = 36;
        sheet.Columns[1].Width = 88;
        sheet.Columns[2].Width = 91;
        sheet.Columns[3].Width = 80;
        sheet.Columns[4].Width = 36;
        sheet.Columns[5].Width = 46;
        sheet.Columns[6].Width = 49;
        sheet.Columns[7].Width = 80;
        sheet.Columns[8].Width = 181;

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

        // ページサイズの設定
        sheet.PageSize = 50;
    }
}

Partial Class sheet_contextmenu
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' クライアントイベント設定
        Dim js As String = "var spid='" + FpSpread1.ClientID & "';"
        js += "var ss=document.getElementById(spid);" & vbCr & vbLf
        js += "if (ss.addEventListener) {" & vbCr & vbLf
        js += "    ss.addEventListener(""MenuItemClicked"", spread_MenuItemClicked, false);" & vbCr & vbLf
        js += "} else {" & vbCr & vbLf
        js += "    ss.onMenuItemClicked = spread_MenuItemClicked;" & vbCr & vbLf
        js += "}" & vbCr & vbLf

        ClientScript.RegisterStartupScript(Me.[GetType](), "onStartUpScript", js, True)

        If IsPostBack Then
            Return
        End If

        ' SPREADの設定
        InitSpread(FpSpread1)

        ' シート設定
        InitSpreadStyles(FpSpread1.Sheets(0))
    End Sub

    Private Sub InitSpread(ByVal spread As FarPoint.Web.Spread.FpSpread)
        'データ連結
        Dim ds As New System.Data.DataSet()
        ds.ReadXml(MapPath("../App_Data/data50.xml"))
        spread.DataSource = ds

        Dim vpMenu As New FarPoint.Web.Spread.ContextMenu()
        vpMenu.Type = FarPoint.Web.Spread.ContextMenuType.Viewport

        ' コピー
        Dim copyVpItem As New FarPoint.Web.Spread.MenuItem("コピー")
        copyVpItem.ImageUrl = "../images/contextmenu/Copy.png"

        ' 貼り付け
        Dim pasteVpItem As New FarPoint.Web.Spread.MenuItem("貼り付け")
        pasteVpItem.ImageUrl = "../images/contextmenu/Paste.png"

        Dim editVpItem As New FarPoint.Web.Spread.MenuItem("セル操作")
        editVpItem.ChildItems.AddRange(New FarPoint.Web.Spread.MenuItem() {copyVpItem, pasteVpItem})
        vpMenu.Items.Add(editVpItem)

        spread.EnableContextMenu = True
        spread.ContextMenus.Add(vpMenu)

        spread.CssClass = "spreadStyle"
        spread.UseClipboard = False
    End Sub

    Private Sub InitSpreadStyles(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' フォントサイズの設定
        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).Width = 36
        sheet.Columns(1).Width = 88
        sheet.Columns(2).Width = 91
        sheet.Columns(3).Width = 80
        sheet.Columns(4).Width = 36
        sheet.Columns(5).Width = 46
        sheet.Columns(6).Width = 49
        sheet.Columns(7).Width = 80
        sheet.Columns(8).Width = 181

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

        ' ページサイズの設定
        sheet.PageSize = 50
    End Sub
End Class
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
  CodeFile="contextmenu.aspx.cs" Inherits="sheet_contextmenu" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" runat="Server">
<script type="text/javascript">
    function spread_MenuItemClicked(e) {
        var e = e || window.event;
        var spread = document.getElementById(spid);
        var menuItem = e.SelectedItem;

        var node = menuItem.childNodes[1].childNodes[0];
        var itemText;
        if (node.nodeType == 1) {
            itemText = node.innerText;
        } else {
            itemText = node.data;
        }
        switch (itemText) {
            // セル操作
            case "コピー":
                spread.Copy();
                break;
            case "貼り付け":
                spread.Paste();
                break;
            // 列操作
            case "列幅を列内の最長テキストに調整":
                var rg = spread.GetSelectedRange();
                for (var i = rg.col; i < rg.col + rg.colCount; i++) {
                    spread.SizeToFit(i);
                }
                break;
            case "列幅の調整...":
                var newWidth = prompt("この列の列幅を入力してください", spread.Columns(spread.GetActiveCol()).GetWidth());                
                if (!isNaN(newWidth) && newWidth != null) {
                    var rg = spread.GetSelectedRange();
                    for (var i = rg.col; i < rg.col + rg.colCount; i++) {
                        spread.SetColWidth(i, newWidth);
                    }
                }
                break;
            // 行操作
            case "行の削除":
                spread.Delete();
                break;
            case "この行を先頭にスクロール":
                spread.ScrollTo(spread.ActiveRow, 1);
                break;
            default:
                return;
        }
        e.cancel = true;
    }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <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>
        <ContextMenus>
            <FarPoint:ContextMenu Type="ColumnHeader">
            <Items>
                <FarPoint:MenuItem Text="列操作">
                <ChildItems>
                    <FarPoint:MenuItem Text="列幅を列内の最長テキストに調整">
                    </FarPoint:MenuItem>
                    <FarPoint:MenuItem Text="列幅の調整...">
                    </FarPoint:MenuItem>
                </ChildItems>
                </FarPoint:MenuItem>
            </Items>
            </FarPoint:ContextMenu>
            <FarPoint:ContextMenu Type="RowHeader">
            <Items>
                <FarPoint:MenuItem Text="行操作">
                <ChildItems>
                    <FarPoint:MenuItem Text="行の削除">
                    </FarPoint:MenuItem>
                    <FarPoint:MenuItem Text="この行を先頭にスクロール">
                    </FarPoint:MenuItem>
                </ChildItems>
                </FarPoint:MenuItem>
            </Items>
            </FarPoint:ContextMenu>
        </ContextMenus>
    </FarPoint:FpSpread>
</asp:Content>