AJAXツールキットにリンクされたパネルにGridViewをラップするResizableControlExtender

Question

サーバーコントロールとしてラップされたサイズ変更可能なGridViewを作成しようとしています。私は、私の知る限りでは をリサイズする

• 制御が
パネル内部の初期パネルサイズ は、初期に一致しなければならない存在しなければならないことを要求AJAXコントロールキット、からResizableControlExtenderを使用していますターゲットコントロール サイズ。

これは正常にパネルにグリッドを置くだけで問題なく、このテストを.aspxページで行うことができます。ページを実行してソースを表示すると、パネルがグリッドを囲むdivとしてレンダリングされていることがわかります。

しかし、サーバーコントロールでラップすると、パネルの自動サイズ設定は行われません。代わりに、パネルのレンダリングされたdivにはheightとwitdhの設定がないため、グリッドよりもいくらか小さくなります。

エクステンダの最小サイズを設定していないため、エクステンダがパネルサイズを何も設定していないためです。グリッドがレンダリングされる前にグリッドのサイズを計算することができないため（CSSに依存するため）、最小サイズを設定していません。

だから、私はどちらか間違っエクステンダーを使用していますか私は、グリッドの高さを計算できるようにする必要があります（私は信じてJavaScriptでのみ可能ですか？）私は、固定サイズでこれをハッキングしている

CSSが、これはゴミであり、サイズ変更によってラップが発生すると途切れます。

どのようなアイデアやヒントなどがあれば幸いです。

Answer 1

GridView（テーブルとしてレンダリング）がdiv内にある場合、divはGridViewより小さくすることはできません。問題は、サイズ変更ハンドルが、ResizeControlExtenderに関連付けられたJavaScriptによって間違った場所に配置されていることです。これは、パネルの高さと幅のCSSスタイルを設定していない場合に発生します。

次のコードは、テストされ、正常に動作されています：

Imports AjaxControlToolkit 

Public Class Resizer 
    Inherits Panel 

    Private _resizeExtender As ResizableControlExtender 
    Private _grid As GridView 

    Private _contentContainer As Panel 

    Private Sub Resizer_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init 
    _contentContainer = New Panel 
    _contentContainer.ID = Me.ClientID + "contentContainer" 
    _contentContainer.Style.Add("height", "50px") 
    _contentContainer.Style.Add("width", "50px") 
    _contentContainer.Style.Add("overflow", "auto") 
    _contentContainer.Style.Add("border", "solid 1px black") 

    _grid = New GridView 
    _grid.ID = Me.ClientID + "grid" 
    _grid.DataSource = CreateSource() 
    _grid.DataBind() 
    _contentContainer.Controls.Add(_grid) 

    _resizeExtender = New ResizableControlExtender 
    _resizeExtender.MinimumHeight = 50 
    _resizeExtender.ID = Me.ClientID + "resizeExtender" 
    _resizeExtender.HandleCssClass = "resizingImage" 
    _resizeExtender.TargetControlID = _contentContainer.ID 

    Me.Controls.Add(_contentContainer) 
    Me.Controls.Add(_resizeExtender) 
    End Sub 

    Private Function CreateSource() As DataView 
    Dim sourceTable As New DataTable 
    sourceTable.Columns.Add("column 1") 
    sourceTable.Columns.Add("column 2") 
    sourceTable.Columns.Add("column 3") 

    For i As Integer = 0 To 20 
     Dim row As DataRow = sourceTable.NewRow 
     row("column 1") = "col1 " + i.ToString 
     row("column 2") = "col2 " + i.ToString 
     row("column 3") = "col3 " + i.ToString 
     sourceTable.Rows.Add(row) 
    Next 
    Return New DataView(sourceTable) 
    End Function 

End Class 

これは私がしたすべてを動作させるためには、GridViewコントロールを含むパネルにスタイルを追加しました。スタイルは最初の高さと幅を設定し、ResizeControlExtenderは左下隅に適切に配置されます。

私はリサイズのために使用されるJavaScriptがAjaxToolkit例のプロジェクトから直接取得した

<script type="text/javascript"> 
     function OnClientClickGrow() { 
      var rcp = $find('ResizableControlBehavior1'); 
      var size = rcp.get_Size(); 
      rcp.set_Size({ width: size.width * 2, height: size.height * 2 }); 
      return false; 
     } 


     var fontSize = 12; 
     function OnClientResizeText(sender, eventArgs) { 
      // This sample code isn't very efficient, but demonstrates the idea well enough 
      var e = sender.get_element(); 
      // Make the font bigger until it's too big 
      while ((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) { 
       e.style.fontSize = (fontSize++) + 'pt'; 
      } 
      var lastScrollWidth = -1; 
      var lastScrollHeight = -1; 
      // Make the font smaller until it's not too big - or the last change had no effect 
      // (for Opera where e.clientWidth and e.scrollWidth don't behave correctly) 
      while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) && 
        ((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || (e.scrollHeight != lastScrollHeight))) { 
       lastScrollWidth = e.scrollWidth; 
       lastScrollHeight = e.scrollHeight; 
       e.style.fontSize = (fontSize--) + 'pt'; 
      } 
     } 
    </script> 

-Frinny