ブラウザウィンドウでGridWebをリサイズする

可能な使用シナリオ

Aspose.Cells.GridWebを常にブラウザウィンドウのサイズに合わせてリサイズする必要がある場合があります。Aspose.Cells.GridWebはそのためにクライアントサイドの*resize()*関数を提供しています。また、ブラウザウィンドウ内でGridWebコントロールをリサイズ可能にすることもできます。例えば、ウィンドウ内で幅や高さをカスタマイズするために、右下のハンドル（マウスを使用）を使用できます。プロジェクトのページソースでそれを機能させるためにjqueryのJavascriptファイルを含める/指定する必要もあります。

GridWebのresizeメソッドの使用

次のコードは、100ミリ秒ごとにリサイズアクションが行われているかどうかをチェックします。リサイズアクションがなくなったら、リサイズ操作が終了したと判断します。GridWebにインポートされたサンプルテンプレートファイルを使用します。GridWebをリサイズするためにクライアントサイドコードを使用します。スクリーンショットには、ブラウザウィンドウのサイズを変更するとGridWebがそれに応じて自動的にリサイズする様子が示されています。

todo:image_alt_text

サンプルコード

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
//----------------------------------------------------------------------
//------ResizeGridWebUsingResizeMethod.aspx-----------------------------
//----------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ResizeGridWebUsingResizeMethod.aspx.cs" Inherits="Aspose.Cells.GridWeb.Examples.CSharp.WorkingWithGridWebClientSideScript.ResizeGridWebUsingResizeMethod" %>
<%@ Register TagPrefix="acw" Namespace="Aspose.Cells.GridWeb" Assembly="Aspose.Cells.GridWeb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.fullheight {
display: inline-block;
min-height: 80%;
height: 90%;
padding: 0;
position: relative;
margin-right: -0.3em;
vertical-align: top;
}
html, body, form {
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #000000;
min-height: 99%;
height: 100%;
overflow: visible;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function doResizing() {
//alert("I'm done resizing for the moment");
$("#GridWeb1")[0].resize();
};
var resizeTimer;
$(window).resize(function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doResizing, 100);
});
</script>
<title>Using GridWeb’s resize method</title>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; height: 100%; overflow: visible;">
<span id="gridwebpanel" class="fullheight">
<acw:GridWeb ID="GridWeb1" runat="server" Width="100%" Height="100%" ShowLoading="true" XhtmlMode="true"
PresetStyle="Standard" EnableAJAX="true">
</acw:GridWeb>
</span>
</div>
</form>
</body>
</html>
//----------------------------------------------------------------------
//------ResizeGridWebUsingResizeMethod.aspx.cs--------------------------
//----------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Aspose.Cells.GridWeb.Examples.CSharp.WorkingWithGridWebClientSideScript
{
public partial class ResizeGridWebUsingResizeMethod : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false && this.GridWeb1.IsPostBack == false)
{
string filePath = Server.MapPath("~/01_SourceDirectory/sampleResizableGridWeb.xlsx");
GridWeb1.ImportExcelFile(filePath);
}
}
}
}
view raw Examples.GridWeb-CSharp-WorkingWithGridWebClientSideScript-ResizeGridWebUsingResizeMethod hosted with ❤ by GitHub

jQuery UIのresizable機能を使用してGridWebをリサイズ可能にする

次のコードを使用すると、GridWebコントロールをブラウザウィンドウ内でリサイズできます。たとえば、GridWebのサイズをブラウザウィンドウ内でカスタマイズするために、右下のハンドルを使用できます。最初にGridWebにインポートされる同じテンプレートファイルを使用します。GridWebをリサイズ可能にするために、jqueryスクリプトを使用します。スクリーンショットは、ブラウザウィンドウ内でGridWebが右下のハンドルを使用してリサイズされたことを示しています。

todo:image_alt_text

サンプルコード

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
//----------------------------------------------------------------------
//------MakingGridWebResizableUsingResizablejQueryUiFeature.aspx--------
//----------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MakingGridWebResizableUsingResizablejQueryUiFeature.aspx.cs" Inherits="Aspose.Cells.GridWeb.Examples.CSharp.WorkingWithGridWebClientSideScript.MakingGridWebResizableUsingResizablejQueryUiFeature" %>
<%@ Register TagPrefix="acw" Namespace="Aspose.Cells.GridWeb" Assembly="Aspose.Cells.GridWeb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#resizable").resizable(
{
resize: function () {
$("#GridWeb1").height($("#resizable").height());
$("#GridWeb1").width($("#resizable").width());
$("#GridWeb1")[0].resize();
}
}
);
});
</script>
<title>Making GridWeb resizable using resizable jquery ui feature</title>
</head>
<body>
<form id="form1" runat="server">
<div id="resizable" class="ui-widget-content">
<acw:GridWeb ID="GridWeb1" runat="server" XhtmlMode="True" Height="400px" Width="100%">
</acw:GridWeb>
</div>
</form>
</body>
</html>
//----------------------------------------------------------------------
//------MakingGridWebResizableUsingResizablejQueryUiFeature.aspx.cs-----
//----------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Aspose.Cells.GridWeb.Examples.CSharp.WorkingWithGridWebClientSideScript
{
public partial class MakingGridWebResizableUsingResizablejQueryUiFeature : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false && this.GridWeb1.IsPostBack == false)
{
string filePath = Server.MapPath("~/01_SourceDirectory/sampleResizableGridWeb.xlsx");
GridWeb1.ImportExcelFile(filePath);
}
}
}
}
view raw Examples.GridWeb-CSharp-WorkingWithGridWebClientSideScript-MakingGridWebResizableUsingResizablejQueryUiFeature hosted with ❤ by GitHub
クライアントサイドでGridWebセルの値を読み取ります。 GridWebでクライアント側の関数を使用して範囲を選択したり、選択された範囲を取得する方法