Redimensionner GridWeb dans la fenêtre du navigateur
Scénarios d’utilisation possibles
Parfois, vous voulez que Aspose.Cells. GridWeb se redimensionne en fonction de la fenêtre du navigateur. Vous pourriez avoir besoin que GridWeb ajuste toujours sa taille (hauteur, largeur) et soit compatible avec la taille de la fenêtre du navigateur. Aspose.Cells.GridWeb fournit côté clientredimensionner() fonction à cet effet. De plus, vous pouvez même rendre le contrôle GridWeb redimensionnable dans la fenêtre du navigateur. Par exemple, vous pouvez utiliser la poignée en bas à droite (via la souris) pour personnaliser sa largeur/hauteur dans la fenêtre. Vous devez également inclure/spécifier les fichiers Javascript jquery pour le faire fonctionner dans la source de la page de votre projet.
Utilisation de la méthode de redimensionnement de GridWeb
Le code suivant vérifiera si une action de redimensionnement a lieu toutes les 100 millisecondes. Lorsqu’il n’y a plus d’action de redimensionnement, il pense que l’opération de redimensionnement est maintenant terminée. Nous utilisons un exemple de fichier modèle qui est importé dans GridWeb. Nous utilisons du code côté client pour redimensionner le GridWeb. La capture d’écran montre que GridWeb se redimensionne en conséquence lors du redimensionnement de la fenêtre du navigateur.
Exemple de code
| // 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); | |
| } | |
| } | |
| } | |
| } |
Rendre GridWeb redimensionnable à l’aide de la fonction d’interface utilisateur jquery redimensionnable
Le code suivant rendra le contrôle GridWeb redimensionnable dans la fenêtre du navigateur. Par exemple, vous pouvez utiliser la poignée en bas à droite pour personnaliser sa taille de GridWeb dans la fenêtre. Nous utilisons le même fichier modèle qui est d’abord importé dans GridWeb. Nous utilisons des scripts jquery pour rendre le GridWeb redimensionnable. La capture d’écran montre que GridWeb a été redimensionné à l’aide de sa poignée en bas à droite dans la fenêtre du navigateur.
Exemple de code
| // 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); | |
| } | |
| } | |
| } | |
| } |