コントロールサイズの自動調整

ページ内の全てのセルが表示されるように、SPREADコントロールのサイズを自動的に 調整させることができます。ユーザーが行う列の幅や行の高さの変更に応じて、 SPREADコントロールのサイズも自動的に調整されます。

なお、このサンプルでは列内のテキストに応じて列幅を自動調整する機能も 実装されています。「列幅の自動調整」ボタンを押下すると、列幅が自動的に 調整されます。
 ID氏名カナ生年月日
11001亀甲 滋万キコウ シゲマ1950/02/04
21002寒田 希世カンダ キヨ1959/06/28
31003小和瀬 澄オワセ キヨ1969/03/06
41004宇夫 早余子ウブ サヨコ1976/07/28
51005宇田津 聖智ウダツ キヨトモ1965/09/04
61006茨城 昭児イバラキ ショウジ1963/04/28
71007石ヶ休 椎茄イシガキュウ シイナ1953/02/21
81008赤司 恵治郎アカツカサ ケイジロウ1968/08/02
91009小橋 仰一オハシ ギョウイチ1972/03/02
101010一重 公大イチジュウ コウダイ1964/04/19
   

ソースコード

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

public partial class style_clientautosize : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string js = "var spid='" + FpSpread1.ClientID + "';";
        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/datacol4.xml"));
        FpSpread1.DataSource = ds;

        spread.UseClipboard = false;
        spread.ClientAutoSize = true;        
    }

    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.DefaultStyle.VerticalAlign = VerticalAlign.Middle;
    }
}
Partial Class style_clientautosize
    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 & "';"
        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/datacol4.xml"))
        FpSpread1.DataSource = ds

        spread.UseClipboard = False
        spread.ClientAutoSize = True
    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.DefaultStyle.VerticalAlign = VerticalAlign.Middle
    End Sub
End Class

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

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

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        function setColWidth() {
            var spread = document.getElementById(spid);

            var i;
            for (i = 0; i < spread.GetColCount(); i++) {
                spread.SizeToFit(i);
            }
        }  
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <input id="Button1" type="button" value="列幅の自動調整" onclick="setColWidth();" />
    <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid"
        BorderWidth="1px" Height="200" Width="400" style="position: relative;" >
        <CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
            ButtonShadowColor="ControlDark">
        </CommandBar>
        <Sheets>
            <FarPoint:SheetView SheetName="Sheet1">
            </FarPoint:SheetView>
        </Sheets>
    </FarPoint:FpSpread>
</asp:Content>