Ridimensionare GridWeb nella finestra del browser
Possibili Scenari di Utilizzo
A volte è necessario che Aspose.Cells.GridWeb si ridimensioni in base alla finestra del browser. Potresti aver bisogno che GridWeb si adatti sempre alle dimensioni (altezza, larghezza) e sia compatibile con le dimensioni della finestra del browser. Aspose.Cells.GridWeb fornisce la funzione lato client resize() a questo scopo. Inoltre, è possibile rendere il controllo GridWeb ridimensionabile nella finestra del browser. Ad esempio, è possibile utilizzare il manico in basso a destra (tramite il mouse) per personalizzare la larghezza/altezza nella finestra. È inoltre necessario includere/specificare i file javascript jquery per farlo funzionare nel codice sorgente della pagina nel tuo progetto.
Utilizzo del metodo resize di GridWeb
Il codice seguente controllerà se è stata presa un’azione di ridimensionamento ogni 100 millisecondi. Quando non ci sono più azioni di ridimensionamento, vuol dire che l’operazione di ridimensionamento è terminata. Utilizziamo un file di modello di esempio che viene importato in GridWeb. Utilizziamo il codice lato client per ridimensionare GridWeb. Lo screenshot mostra che GridWeb si ridimensiona di conseguenza quando si ridimensiona la finestra del browser.
Codice di Esempio
| // 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); | |
| } | |
| } | |
| } | |
| } |
Rendere GridWeb ridimensionabile utilizzando la funzionalità resizable jquery ui
Il codice seguente renderà il controllo GridWeb ridimensionabile nella finestra del browser. Ad esempio, è possibile utilizzare il manico in basso a destra per personalizzare le dimensioni di GridWeb nella finestra. Utilizziamo lo stesso file di modello che viene importato in GridWeb per primo. Utilizziamo gli script jquery per rendere GridWeb ridimensionabile. Lo screenshot mostra che GridWeb è stato ridimensionato utilizzando il suo manico in basso a destra nella finestra del browser.
Codice di Esempio
| // 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); | |
| } | |
| } | |
| } | |
| } |