Обтекание GridView на панели, связанной с набором инструментов AJAX ResizableControlExtender

Question

Я пытаюсь создать изменяемый размер GridView в качестве серверного элемента управления. Я использую ResizableControlExtender из AJAX Control Kit, который, насколько я знаю, требует

• элемент управления, размер которого нужно изменить должен находиться внутри панели
• начальный размер панели должен соответствовать начальному целевому элементу управления размер.

Я могу сделать это счастливо на тестовой странице .aspx без проблем, просто поместив мою сетку в панель как обычно. Когда я запускаю страницу и просматриваю источник, я вижу, что панель отображается как div, который окружает сетку.

Но, когда я обертываю его в элементе управления сервером, автоматическое изменение размера панели не происходит. Вместо этого визуализированный div для панели не имеет настроек высоты и ширины, поэтому он немного меньше сетки.

Я думаю, это потому, что я не устанавливаю минимальный размер экстендера, а экстендер устанавливает нулевой размер панели. Я не устанавливаю минимальный размер, потому что не могу рассчитать размер сетки до того, как она будет отрисована (поскольку это зависит от CSS).

Итак, я либо неправильно использую расширитель, либо мне нужно рассчитать высоту сетки (что, я считаю, возможно только в javascript?)

Я взломал это с фиксированными размерами в CSS, но это мусор и ломается, если изменение размера приводит к обертыванию.

Любые идеи / советы / и т. Д. Будет принята с благодарностью.

Answer 1

Если GridView (отображается как таблица) находится внутри div, то div не может быть меньше GridView. Проблема в том, что дескриптор изменения размера помещается в неправильное место с помощью JavaScript, связанного с ResizeControlExtender. Это происходит, если вы не установили стиль 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

Чтобы заставить это работать, все, что я сделал, это добавил стиль в Panel, содержащую 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