GridView를 AJAX Toolkit에 연결된 패널에 래핑 ResizableControlExtender

Question

서버 컨트롤로 래핑 된 크기 조정 가능한 GridView를 만들려고합니다. 나는 내가 아는 필요로하는 AJAX 컨트롤 키트에서 ResizableControlExtender을 사용하고

• 패널
• 초기 일치해야합니다 초기 패널 크기 안에 있어야합니다 크기를 조정할 수있는 컨트롤이 대상 컨트롤 크기.

정상적으로 패널에 그리드를 배치하여 문제없이 테스트 .aspx 페이지에서이 작업을 즐겁게 수행 할 수 있습니다. 페이지를 실행하고 소스를 볼 때 패널이 그리드를 둘러싸는 div로 렌더링된다는 것을 알 수 있습니다.

하지만 서버 컨트롤에서 래핑 할 때 패널의 자동 크기 조정이 발생하지 않습니다. 대신 패널의 렌더링 된 div에는 높이와 witdh 설정이 없으므로 그리드보다 작습니다.

저는 익스텐더의 최소 크기를 설정하지 않았기 때문에 익스텐더가 패널 크기를 아무 것도 설정하지 않았기 때문에 이것이라고 생각합니다. 그리드가 렌더링되기 전에 그리드의 크기를 계산할 수 없으므로 (CSS에 따라) 최소 크기를 설정하지 않습니다.

그래서, 나도 잘못 익스텐더를 사용하고 또는 내가 그리드의 높이를 계산 할 수 있어야합니다 (저는 믿습니다 자바 스크립트에서만 가능?) 내가 고정 크기의이 해킹 한

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는 왼쪽 하단 모서리에 올바르게 배치됩니다.

<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 나는 아약스 컨트롤 툴킷 한 가지를 발견하지 않았습니다