Wrapping GridView in a Panel linked to an AJAX Toolkit ResizableControlExtender

I am trying to create a resizable GridView wrapped up as a server control. I am using the ResizableControlExtender from the AJAX Control Kit, which as far as I know requires that

• the control that is to be resized must reside inside a panel
• the initial panel size must match the initial target control size.

I can do this happily in a test .aspx page with no issues by just putting my grid in the panel as normal. When I run the page and view the source, I can see that the panel is rendered as a div that surrounds the grid.

But, when I wrap it in a server control, the automatic sizing of the panel is not happening. Instead, the rendered div for the panel has no height and witdh settings and is therefore somehow smaller than the grid.

I think this is because I am not setting the minimum size of the extender and the extender is then setting the panel size to nothing. I am not setting the minimum size because I can't calculate the size of the grid before it is rendered (as it depends on the css).

So, I am either using the extender incorrectly or I need to be able to calculate the height of the grid (which I believe is only possible in javascript?)

I have hacked this with fixed sizes in the css but this is rubbish and breaks if resizing results in wrapping.

Any ideas/tips/etc would be greatly appreciated.

If GridView (rendered as a table) is within the div then the div cannot be smaller than the GridView. The problem is that the resize handle is being placed in the wrong spot by the JavaScript associated with the ResizeControlExtender. This happens if you haven't set the height and width css style for the panel.

The following code has been tested and works properly:

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

To get this to work all I did was add a style to the Panel containing the GridView. The style sets the initial height and width and the ResizeControlExtender is properly placed in the bottom left corner.

The JavaScript I used for resizing was taken directly out of the AjaxToolkit Example project:

<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