Tarayıcı penceresinde GridWeb i yeniden boyutlandırın
Olası Kullanım Senaryoları
Bazen Aspose.Cells.GridWeb’in kendisini tarayıcı penceresine göre yeniden boyutlandırmasını istersiniz. GridWeb’in her zaman boyutunu (yükseklik, genişlik) ayarlamasını ve tarayıcı penceresinin boyutuna uygun olmasını isteyebilirsiniz. Aspose.Cells.GridWeb, bu amaca yönelik istemci tarafında resize() işlevi sağlar. Dahası, GridWeb kontrolünü tarayıcı penceresinde yeniden boyutlandırılabilir hale getirebilirsiniz. Örneğin, genişlik/yüksekliğini özelleştirmek için alt sağ kolu (fare aracılığıyla) kullanabilirsiniz. Ayrıca bu işlevin çalışması için projenizin sayfa kaynağında jquery JavaScript dosyalarını da belirtmeniz gerekebilir.
GridWeb’in resize yöntemini kullanma
Aşağıdaki kod, her 100 milisaniyede bir boyutlandırma işlemi olup olmadığını kontrol eder. Daha fazla boyutlandırma işlemi olmadığında, o zaman boyutlandırma işleminin artık bittiğini düşünür. GridWeb’e içe aktarılan örnek bir şablon dosyası kullanıyoruz. GridWeb’in boyutunu tarayıcı penceresinde yeniden boyutlandırmak için istemci tarafı kodunu kullanıyoruz. Ekran görüntüsü, tarayıcı penceresini boyutlandırırken GridWeb’in kendisini buna göre boyutlandırdığını göstermektedir.
Örnek Kod
| // 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); | |
| } | |
| } | |
| } | |
| } |
GridWeb’i resizable yapmak için resizable jquery ui özelliğini kullanma
Aşağıdaki kod, GridWeb kontrolünün tarayıcı penceresinde yeniden boyutlandırılmasını sağlar. Örneğin, GridWeb’in boyutunu özelleştirmek için alt sağ köşe kolu kullanabilirsiniz. İlk olarak GridWeb’e içeri aktarılan aynı şablon dosyasını kullanırız. GridWeb’i yeniden boyutlandırmak için jquery betiklerini kullanırız. Ekran görüntüsü, GridWeb’in tarayıcı penceresinde alt sağ köşe kolunu kullanarak boyutlandırıldığını göstermektedir.
Örnek Kod
| // 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); | |
| } | |
| } | |
| } | |
| } |