在許多系統的資料呈現時，會希望藉由畫面中的某個欄位當作參數，去開啟另一個畫面或是報表，瀏覽該筆資料更細部的資訊作資料追蹤。
訊光將此功能包成元件的方式可與WebPage的DataGrid搭配使用。
Step1> 準備需要用到的程式
l 兩支Server程式：sOrders和sBasic，內容分別要有Orders和Customers的資料表。作為表單的瀏覽畫面資料來源和DrillDown元件所需要的資料來源。
l 兩支Webpage用DataGrid呈現資料的程式： wOrders(訂單資料)和wCustomers(客戶資料)。
l 一支Mobile的程式： MCustomers(Mobile客戶資料)。
l 一支Report的程式： CustomerRpt(客戶報表)。
Step1> 在wOrders(訂單資料)的設計畫面上，將DrillDown元件從左邊Component中拖入。
Step2> 設定DrillDown元件的屬性：RemoteName設為sBasic. cmdCustomers，DataMember選擇cmdCustomers。DrillStyle預設為WebForm，FormName可選擇wCustomers
註:
DrillStyle分為四種：WebForm,MobileForm,RDLC,Command。WebForm與MobileForm是以表單來呈現，RDLC是以Report的方式來呈現，Command則透過連接Server端上InfoCommand的資料，打開一個共用且動態的視窗來呈現。
Step3> 設定KeyFields屬性為CustomerID，作為DrillDown資料來源的鍵值欄位。
(如果資料來源有多個Key值則依序加入)
Step4> DataGrid右鍵Colume設定wOrders的欄位。CustomerID欄位設定DrillObjectID
屬性為DrillDown1，並設定DrillFields傳入的參數為CustomerID。
註:
DrillFields欄位是指目前DataGrid的資料表欄位, 如果沒設定就以此欄位傳入DrillDown的KeyFields中配對，如果有設定多個，可以依次與KeyFields進行配對。當KeyFields設定的欄位與DrillFields欄位不相等時，多出來的欄位自動省略不處理。
Step5> 設定完成後，Preview打開wOrders(訂單資料)可以看到CustomerID(客戶編號)欄位已經變成超連結。
Step6> 點擊超連結會打開wCutomers的網頁，並且篩選出指定的客戶編號。
Step7> 如果需要更改開啟模式，例如另開頁籤或新開視窗，可以調整DrillDown元件的OpenMode屬性為NewTab或NewWindow。(NewTab需要透過RUN登錄才可看到效果)
Step8> DrillDown元件DrillStyle屬性的其他三種模式：
若要以MobileForm做為呈現畫面時，更改DrillStyle屬性為MobileForm，並將FormName屬性選擇到Mobile網頁(MCustomers)。
Step9> 若要以RDLC做為呈現畫面時，更改DrillStyle屬性為RDLC，並將ReportName選擇RDLC報表(CustomerRpt)。
Step10> 若要以直接連接Server端InfoCommand上的資料做為呈現畫面時，更改DrillStyle屬性為Command，輸入FormCaption作為開啟Dialog的標題。並在DisplayField屬性加入欲顯示的欄位。
註：
l FormCaption屬性必須輸入，若空白開窗會沒有標題無法關閉。
l 如果希望打開Command的欄位可以繼續DrillDown下去的話，也可以設定其他的DrillDown在欄位的DrillObjectID和DrillField，用法皆相同。
l 若DrillDown的DrillStyle屬性設為Command，則OpenMode模式只能選擇Dialog。
Step11> JQDrillDown元件的BeforeDrillDown屬性:
追蹤前的事件時機點，可事先處理一些準備程序，也可以透過此程序改變DrillDown的Where語句。事件中含有一個參數，WebPage/Mobile時是傳入跟蹤的鍵值對應集合（JSON格式field/value集合）
EX:
<script>
function test(val)
{
val[0].value = "001";//可替換為您需要的值
alert(val[0].field + ',' + val[0].value);
}
</script>
