1. 程式人生 > 實用技巧 >應用介面開發小技巧——在XAF檢視中顯示dxChart小部件

應用介面開發小技巧——在XAF檢視中顯示dxChart小部件

下載DevExpress v20.1完整版

DevExpress技術交流群2:775869749歡迎一起進群討論

場景:

有必要顯示一個帶有很多點的圖表控制元件,內建Charts module可一次在同一螢幕上繪製所有點,這對於終端使用者可能不方便。為了獲得更好的可用性,可以實現實時縮放和滾動功能。

DevExtreme庫中的dxChart小部件非常適合這種情況,本文將為大家演示如何在XAF應用程式中利用此小部件。

實現步驟:

1、註冊客戶端庫

XAF應用程式知識庫中How to: Use DevExtreme Widgets in an XAF Application相應部分提供了詳細資訊。

2、建立內容

在YourSolutionName.Web專案中,建立一個自定義ASP.NET User Control (*.ascx)並將ASPxPanel新增到其中,該面板將是DevExtreme小部件的容器,將客戶端指令碼儲存在一個單獨的檔案中非常方便。新增一個JavaScript檔案並在其中宣告createWidgets函式,使用Zooming and Scrolling中的方法來實現此功能。

window.DxSample = window.DxSample || {}; 
window.DxSample.OrdersChart = { 
createWidgets: function (panel) { 
var $mainElement = $(panel.GetMainElement()); 
$mainElement.dxChart({..}); 
} 
};

使用ASPxPanel元件的客戶端Init事件,呼叫傳遞第一個事件引數作為引數的createWidgets函式。

3、註冊JavaScript檔案

在UserControl(例如,YourSolutionName.Web / YourUserControlName.ascx.xx檔案)處理UserControl.Load事件並呼叫WebWindow.RegisterClientScriptInclude方法將您的JavaScript檔案包含到網頁中。

4、載入資料並將其傳遞給客戶端

請在UserControl類中實現IComplexControl介面,在IComplexControl.Setup方法中,從資料庫載入資料,將其轉換為純物件陣列(您可以為此目的在C#和VB.NET中使用匿名型別),並將其新增到JSProperties字典中。

5、將UserControl新增到應用程式模型中

描述

從版本16.2開始,應使用另一種方法禁用嵌入所需的客戶端庫。