1

サーバーコントロールとしてラップされたサイズ変更可能なGridViewを作成しようとしています。私はAJAXコントロールキットのResizableControlExtenderを使用していますが、これは私が知る限り、それを必要とします

  • サイズを変更するコントロールは、パネル内に存在する必要があります
  • 初期パネルサイズは、初期ターゲットコントロールサイズと一致する必要があります。

グリッドを通常どおりパネルに配置するだけで、テスト.aspxページで問題なくこれを実行できます。ページを実行してソースを表示すると、パネルがグリッドを囲むdivとしてレンダリングされていることがわかります。

しかし、サーバーコントロールでラップすると、パネルの自動サイズ設定が行われません。代わりに、パネルのレンダリングされたdivには高さとwitdhの設定がないため、グリッドよりも少し小さくなります。

これは、エクステンダーの最小サイズを設定しておらず、エクステンダーがパネルサイズをゼロに設定しているためだと思います。グリッドがレンダリングされる前にグリッドのサイズを計算できないため、最小サイズを設定していません（cssに依存するため）。

したがって、エクステンダーを誤って使用しているか、グリッドの高さを計算できる必要があります（これは、JavaScriptでのみ可能だと思いますか？）

私はこれをcssの固定サイズでハッキングしましたが、サイズを変更するとラッピングが発生する場合、これはゴミであり、壊れます。

任意のアイデア/ヒント/などをいただければ幸いです。

4

1 に答える 1

0

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>

-フリニー

于 2009-07-20T15:44:28.967 に答える