AjaxGridView--ExtComboBox使用

在WebGridView中，我們可以使用AjaxRefVal或WebRefVal來做到關聯選單的功能，為了能夠使AjaxGridView也具有類似的功能，我們特地為AjaxGridView提供了一個元件，叫做“ExtComboBox”，此元件可以用下拉選單的模式，將我們說需要的資料內容顯示出來。本節，我們使用bFormViewbOrders將產品編號欄位設計成 ExtComboBox的下拉選單並去關聯Products表的資料。下面就來看看具體怎樣使用此元件。

首先，在3-4的例子中，使用Wizard產生bFormViewbOrders頁面時，我們要求大家選擇ProductID為RefVal的元件形式，同時設定對應的RefValNo.。因此在網頁上已經有了wdsOrderDetailProductID這個DataSource。在3-4的Step 4中我們也已將CatchDataSet設定為True了。

我們再貼入一個ExtComboBox，此處的作用是爲了在AjaxGridView中能夠將ProductID欄位以下拉選單的方式來輸入。ExtComboBox的設定方式同WebDropDownList，設定如下圖，設定對應的DataSourceID與DisplayField及ValueField等基本設定。唯一的區別就是，需要將ExtComboBox的AutoRender屬性設為False，這個設定的用意是決定在Page Load(該打開網頁)時是否需要Render(翻譯呈現)出此ComboBox元件，當ExtComboBox是專門使用在AjaxGridView編輯當中的時候，我們將其設定為False，代表平常不會顯示這個ComboBox出來。

往下，我們就需要將ExtComboBox與AjaxGridView中的Column連接。我們在agvDetail的Columns中，找到productID這個Column，將該Editor屬性設定為ComboBox，同時設定EditControlId為上一步的extOrderDetailsProductID。請注意，Editor與EditControlId需要配套使用，且先選擇Editor決定使用的編輯欄位元件的類型後，再選擇實體對應的元件名稱。最後，需要點選確定後，在保存Page。

這樣，我們的設定就完成了。最後，讓我們一起去瀏覽一下效果吧。我們可以發現在點開下拉清單時，在列表中顯示出產品的名稱，但是當我們將滑鼠放置在某一個產品名稱上時，系統就會以ToolTips的形式顯示出它的實際的產品編號浮在上方。

AjaxFormView—ExtComboBox使用

在3-4的例子中，使用Wizard產生bFormViewbOrders頁面時，我們要求大家選擇CustomerID以及EmployeesID為RefVal的元件形式，同時設定對應的RefValNo.。因此在網頁上已經有了wdsOrdersCustomerID以及wdsOrdersEmployeesID兩個DataSource。在3-4的Step 4中我們也已將CatchDataSet設定為True了。這些操作都是為AjaxFormView的ExtComboBox的設計作準備的。接下來我們貼入一個ExtComboBox，通過CustomerID的欄位來完成ExtComboBox的教程。

貼入一個ExtComboBox，將其命名為extOrdersCustomerID。

接著設定ExtComboBox對應的DataSource，以及它的DisplayMember和ValueMember，設定如下圖：

由於這個元件需要在FormView中看到，但不需要在網頁上顯示，因此我們需要將這個ExtComboBox的AutoRender屬性設定為False。

最後，我們只需要在AjaxFormView的Fields屬性中找到CustomerID這個欄位。我們將Editor修改為ComboBox，然後將EditControlId選擇為extOrdersCustomerID。點選確認後，這樣就完成了ExtComboBox的簡單使用方法。

上面的設計的瀏覽效果如下圖：

GridView形式顯示下拉內容及快速查詢

許多用戶使用過RefVal後，已經習慣了使用GridView的形式顯示被選資料的模式。這種方式能夠使系統的使用者能夠看到更詳細的資料。但是在使用RefVal中用戶也遇到了一些使用上的局限，如：當顯示資料需要不停的翻頁查看；當用戶需要查詢時，需要切換到查詢畫面等。ExtComboBox爲了避免這些問題，也同樣的提供了GridView顯示的模式，同時擁有ComboBox快速過濾功能提高了資料查詢的速度。

找到上面例子中的ComboBox的Columns的屬性，這個屬性類似於RefVal的column屬性。我們選擇columns右側的按鈕，分別添加CustomerID和CompanyName這兩個欄位。同時，我們將他們的HeaderText設定為客戶編號和公司名稱。

這樣設定完成後，點擊確定按鈕，接下來我們一起來查看一下瀏覽的效果。

在前面的説明中，我們講到ExtComboBox提供了快速查詢的功能，這個功能是ExtComboBox本身自帶的功能，無須設定，我們只需要在ComboBox的輸入區域輸入字元，元件就會自動將資料過濾。

ColumnMatch功能

熟悉EEP的Web元件的程式師，一定知道在EEP的RefVal提供了叫做ColumnMatch的功能。用來將一些關聯選單打開視窗中的一些欄位元帶入到選回話面的其他欄位上。在ComboBox上同樣也提供了此功能，在下面的例子中我們會通過使用bFormViewbOrders為例，將Detail的ProductID的ComboBox打開的ProductName（產品名稱）帶入到選回畫面上。設定方式如下：

在3-4的實例中，我們已經將ProductName的欄位Left Join出來。由於ExtComboBox的實現是通過Client的js完成，因此很難做到像WebRefVal那樣，在瀏覽狀態下也能夠顯示出DisplayMember的值。因而我們需要通過LeftJoin將參考欄位顯示出來，而後在新增和修改時，通過ColumnMatch的方式將值帶出，用來顯示。

首先，我們找到extOrderDetailsProductID元件，找到ComboBox的ColumnMatch的屬性。我們選擇ColumnMatch右側的按鈕，添加DestField(選單帶回到欄位)ProductName和SrcField(選單供選擇帶回欄位) ProductName這兩個欄位。

最後，爲了查看方便，我們可以將agvDetail中的ProductName調整到靠前的顯示位置。

現在我們一起進入瀏覽狀態，新增一筆detail，選中產品名稱後，系統自動帶出產品名稱。

訊光科技系統股份有限公司