DevExpress ASPxGridView基本用法

1、 綁定IList

ASPxGridView1.KeyFieldName = "ID";//指定主鍵。直接更新資料和子表綁定 需要用到

    ASPxGridView1.DataSource = list;//指定Grid的資料

ASPxGridView1.DataBind();   //執行綁定

 

選中GridView後，右鍵菜單選擇“Columns…”可以開啟列設定對話方塊，設定列的標題（Caption）、資料域（FieldName）等屬性。建立的列預設是GridViewDataTextColumn，新增或修改時以文字框編輯。選擇工具列的Change To變更列的類型，可以改變新增或修改時的編輯方式。

 

資料顯示相關的屬性

ASPxGridView1. SettingsBehavior.AllowFocusedRow=true 高亮選中的行ASPxGridView1.SettingsPager

PageSize 每頁顯示的資料量。若已經載入資料，修改後立即變更。

AllButton.Text “全部資料顯示”按鈕的文本

AllButton.Visible  是否顯示“全部資料顯示”按鈕

FirstPageBuotton/LastPageButton/NextPageButton/PrevPageButton/ 對應首頁、末頁、下頁、上頁，設定同上。

 

SEOFriendly 是否啟用搜尋引擎最佳化

Summary 指定分頁匯總資訊的格式

 

2、 綁定主從表（IList）

List的元素帶有List屬性（Category.Products），並且需要以Grid嵌套的方式顯示。

1、   選中GridView（gird1），右鍵菜單選擇“編輯模板”—“DetailRow”，頁面開啟詳細資料介面，向DetailRow添加一個新的ASPxGridView （grid2）顯示詳細資料，可以設定grid2的Columns相關屬性。Grid2.SettingsDetail.IsDetailGrid = true 指定grid2作為從表資料表格。

     2、   增加grid2 DataBinding事件    

Code
protected void grid2_DataBinding(object sender, EventArgs e)
    {
        DevExpress.Web.ASPxGridView.ASPxGridView grid = sender as DevExpress.Web.ASPxGridView.ASPxGridView;
        if ((grid != null) && (dict != null))
        {           
            int i = (int) grid.GetMasterRowKeyValue();/*取主表記錄的Key，主表grid必須設定KeyFieldName*/
            if (i >= 0)
            {              
                grid.DataSource = dict[i].Products;//通過Key定位元據，指定子表資料來源            
}
        }
}

 

 

3、   右鍵點擊DetailRow，選“結束模板編輯”。修改grid1.SettingsDetail的相關屬性

Bool AllowOnlyOneMasterRowExpanded 預設False，是否只允許主表一行展開。True後展開第二行明細記錄時，會關閉上次展開的明細記錄。

Bool ShowDetailButton 是否顯示明細按鈕，True顯示一個“+”在行首

Bool ShowDetailRow True顯示詳細資料

 

3、 匯出ASPxGridView的資料

添加一個ASPxGridViewExporter控制項到Page，將GridViewID設為需要匯出資料的Grid，調用以下方法實現匯出。

ASPxGridViewExporter1.WriteXlsToResponse

ASPxGridViewExporter1.WriteCvsToResponse

ASPxGridViewExporter1.WritePdfToResponse

ASPxGridViewExporter1.WriteRtfToResponse

 

4、 過濾資料

方式一、展開欄位標題旁邊的過濾清單過濾資料（類似Excel的過濾方式） grid.Settings.ShowHeaderFilterButton = true;過濾清單列出了該列出現的所有資料。還可以自訂過濾清單的內容，用法參閱：http://demos.devexpress.com/ASPxGridViewDemos/Filtering/HeaderFilter.aspx

方式二、在列頭顯示欄位過濾條件輸入框 grid.Settings.ShowFilterRow = true; 顯示條件判斷方式下拉式清單grid.Settings.ShowFilterRowMenu = true;

 

5、 使用者自訂欄顯示

Grid.SettingCustomizationWindow

Enabled 運行自訂欄顯示

PopupHorizontalAlign 列編輯窗水平對齊

PopupVerticalAlign 列編輯窗垂直對齊

 

     通過JavaScript開啟列編輯框。

 

Code
<script type="text/javascript">

<%-- 變更按鈕的標題 --%>
function UpdateCustomizationWindowValue() {
    var element = document.getElementById("btnCustWindow");
    if(element == null) return;
    element.value = (grid.IsCustomizationWindowVisible() ? "Hide" : "Show") + " Customization Window";
}
<%-- 顯示自訂欄編輯窗--%>
function ShowHideCustomizationWindow() {
    if(grid.IsCustomizationWindowVisible())
        grid.HideCustomizationWindow();
    else grid.ShowCustomizationWindow();        
    UpdateCustomizationWindowValue();
}
</script>
<input id="btnCustWindow" type="button" value="Show Customization Window" onclick="ShowHideCustomizationWindow();"/>

<dxwgv:ASPxGridView ID="gird"…………………….>
…………………………..
<ClientSideEvents CustomizationWindowCloseUp="function(s, e) { UpdateCustomizationWindowValue(); }" />
</dxwgv:ASPxGridView>

6、 Grid中編輯資料

只要指定ASPxGridView 的KeyFieldName，在Columns增加一列CommandColumn可以對資料進行增刪改操作。CommandColumn可設定為Link/Image/Button樣式。修改grid.SettingsEditing.Mode屬性，可以設定編輯資料的方式。編輯IList資料需要設定ObjectDataSouce，代碼參看http://www.devexpress.com/Support/Center/e/E38.aspx

Mode各值效果如