將面板中的GridView鏈接到一個AJAX工具包ResizableControlExtender

我想創建一個可調整大小的GridView作爲服務器控件包裝起來。我使用從AJAX控件工具包，因爲據我所知需要ResizableControlExtender是將面板中的GridView鏈接到一個AJAX工具包ResizableControlExtender

是被調整必須駐留在面板
最初的面板尺寸必須在初始匹配的內部控制目標控制大小。

我可以在測試.aspx頁面中快樂地做到這一點，沒有問題，只需將我的網格正常放置在面板中即可。當我運行頁面並查看源代碼時，可以看到面板呈現爲圍繞網格的div。

但是，當我將它包裝在服務器控件中時，不會自動調整面板的大小。相反，面板的渲染div沒有高度和witdh設置，因此在某種程度上比網格小。

我認爲這是因爲我沒有設置擴展器的最小尺寸，然後擴展器將面板尺寸設置爲無。我沒有設置最小大小，因爲我無法在渲染之前計算網格的大小（因爲它取決於CSS）。

所以，我要麼使用擴展不當或我需要能夠計算網格的高度（我相信這是唯一可能在JavaScript？）

我曾與在固定大小的黑了這CSS，但這是垃圾，如果調整大小導致包裝打破。

任何想法/技巧/等將不勝感激。

來源

2009-07-20 J M

我還沒有發現一個東西在AJAX控件工具包，實際工作正常或心不是臭蟲纏身 – 2009-07-20 11:03:04

嗯 - 謝謝安德魯 - 雖然它不是一個答案，但要記住。根據你所說的，我現在正在研究創建我自己的擴展器版本:)。感謝您的迴應。 – 2009-07-20 12:09:19

如果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

來源

2009-07-20 15:44:28 Frinavale

將面板中的GridView鏈接到一個AJAX工具包ResizableControlExtender

回答

相關問題