将 GridView 包装在链接到 AJAX 工具包 ResizingControlExtender 的面板中

Question

我正在尝试创建一个可调整大小的 GridView 包装为服务器控件。 我正在使用 AJAX 控件套件中的 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 的面板添加一个样式。 该样式设置初始高度和宽度，并且 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