CollapsiblePanelExtender 應用:控制 master/detail grid 分頁大小

問題

在同一頁面顯示 master/detail 資料表,利用 AJAX Control Toolkit 的 CollapsiblePanelExtender 來展開/隱藏 master 資料表的 GridView 時,希望能依 master GridView 展開/隱藏的狀態來控制 detail GridView 的分頁大小(PageSize)。例如,master GridView 展開時,detail GridView 每頁只顯示 5 筆資料,但若將 master GridView 隱藏起來,detail GridView 每頁就要顯示 15 筆資料。

解法

主要是利用 CollapsiblePanelExtender 的 ClientState 屬性來判斷目前的展開/收合狀態。如果是 "true",即代表其目前為收合狀態。

步驟
  1. 在頁面上各放一個 Panel 控制項,分別命名為 pnlMaster 和 pnlDetail。
  2. 從 Toolbox 拖拉兩個 GridView,分別放在 pnlMaster 和 pnlDetail 裡面,各命名為 grdMaster 與 grdDetail,並設定好資料繫結的相關屬性。
  3. 從 Toolbox 拖拉兩個 Button 至頁面頂端,各命名為 btnExpand 和 btnCollapse,分別用來當作展開和隱藏 master GridView 的按鈕。
  4. 利用 pnlMaster 的智慧標籤為它增加一個 CollapsiblePanelExtender 控制項,並將此控制項命名為  pnlMaster_CollapsiblePanelExtender。操作方法參考下圖:




  5. 設定 pnlMaster_CollapsiblePanelExtender 的下列屬性:

    TargetControlID="pnlMaster"
    ExpandControlID="btnExpand"
    CollapseControlID="btnCollapse"
    CollapsedSize="0"

  6. 在 Page.Load 事件中撰寫切換 detail GridView 分頁大小的處理邏輯:
[VB code]

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
    If Page.IsPostBack = False Then
        ViewState("IsCollapsed") = False
    Else
        Dim isCollapsed = False
        Boolean.TryParse(pnlMaster_CollapsiblePanelExtender.ClientState, isCollapsed)
        If isCollapsed <> ViewState("IsCollapsed") Then
            ViewState("IsCollapsed") = isCollapsed
            If isCollapsed Then
                grdDetail.PageSize = 15
                grdDetail.DataBind()
            Else
                grdDetail.PageSize = 5
                grdDetail.DataBind()
            End If
        End If
    End If
End Sub

執行結果

頁面載入時,預設是展開 master GridView:


Master GridView 隱藏時,detail GridView 每頁顯示 15 筆資料:


Note: 這裡是用 ViewState 來記住 CollapsiblePanelExtender 上一次的收合狀態,以研判狀態是否有變化,實際運用時不見得要用這種方法。此外,由於是在伺服器端處理,CollapsiblePanelExtender 的 SuppressPostback 屬性不可為 True,否則切換收合狀態時將不會觸發 postback。

沒有留言:

技術提供:Blogger.
回頂端⬆️