在链接到AJAX Toolkit ResizableControlExtender的Panel中包装GridView

Question

我正在尝试创建一个可调整大小的GridView作为服务器控件。我正在使用AJAX Control Kit中的ResizableControlExtender，据我所知，这需要它

• 要调整大小的控件必须位于面板内
• 初始面板大小必须与初始目标控件大小匹配。

我可以在测试.aspx页面中快乐地完成这项任务，只需将网格正常放入面板即可。当我运行页面并查看源代码时，我可以看到面板呈现为围绕网格的div。

但是，当我将其包装在服务器控件中时，面板的自动调整不会发生。相反，面板的渲染div没有高度和设置，因此比网格小。

我认为这是因为我没有设置扩展器的最小尺寸，而扩展器则将面板尺寸设置为空。我没有设置最小大小，因为我无法在渲染之前计算网格的大小（因为它取决于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的Panel添加一个样式。样式设置初始高度和宽度，ResizeControlExtender正确放置在左下角。

我用于调整大小的JavaScript直接取自AjaxToolkit Example项目：

<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