ASP.NET界面開發新功能挖掘——優化的甘特圖控件功能

時間 2020-11-23

標籤算法 express 性能優化服務器 app 編輯器 ide svg 工具佈局欄目 ASP 简体版

原文原文鏈接

[DevExpress ASP.NET] Web Forms Controls擁有針對Web表單（包括報表）的110+種UI控件，DevExpress ASP.NET MVC Extensions是服務器端MVC擴展或客戶端控件，由輕量級JavaScript小部件提供支持的70+個高性能DevExpress ASP.NET Core Controls，包含功能完善的報表平臺，DevExpress ASP.NET Web Forms Bootstrap Controls利用輕量級渲染、響應式佈局和現代性能優化技術，擴展網站的受衆範圍並提升搜索排名。express

DevExpress ASP.NET v20.2日前全新發布，新版本包含針對WebForms / MVC數據容器控件（GridView，TreeList和CardView）等相關功能的重要加強，歡迎下載最新版體驗！性能優化

常見功能加強

此版本包括對WebForms/MVC數據容器控件（GridViewTreeList和CardView）和WebForms/MVC數據編輯器庫與質量相關的重要加強，加強功能包括（但不限於）如下各項：服務器

批處理編輯模式下改進控件操做；技術軟對從新設計了UI "focus"機制，並改善在觸摸屏上呈現時的控件操做。
發佈新的客戶端API，並提升了控件的靈活性。
改進適應性和可訪問性。
修復控件中與服務器和客戶端數據驗證有關的多個問題。

Diagram

工具箱選項app

SettingsToolbox.ShapeIconsPerRow - 指定工具箱行中的形狀數量。
SettingsToolbox.ShowSearch - 顯示/隱藏Toolbox搜索框。
ToolboxWidthToHeightRatio - 指定工具箱形狀項目的長寬比。

ASPX編輯器

<SettingsToolbox Width="500px" ShapeIconsPerRow="5" ShowSearch="False" />ide

ASPXsvg

`<CustomShapes>
<dx:DiagramCustomShape CategoryName="MyShapes" Type="square" Title="Square"
BaseType="Rectangle" ToolboxWidthToHeightRatio ="1" DefaultHeight="1" DefaultWidth="1" />
</CustomShapes>`工具

工具箱形狀模板佈局

v20.2實現了CustomShapeCreateToolboxTemplate事件，此事件使您能夠在工具箱中爲自定義形狀建立模板。

ASPX

<ClientSideEvents CustomShapeCreateToolboxTemplate="CustomShapeCreateToolboxTemplate" />

JS(JAVASCRIPT)

`function CustomShapeCreateToolboxTemplate(s, e) {
var svgNS = "https://www.w3.org/2000/svg";
var svgEl = document.createElementNS(svgNS, "svg");
svgEl.setAttribute("class", "template");
e.container.appendChild(svgEl);

var textEl1 = document.createElementNS(svgNS, "text");
textEl1.setAttribute("class", "template-name");
textEl1.setAttribute("x", "50%");
textEl1.setAttribute("y", "40%");
textEl1.textContent = "New";

var textEl2 = document.createElementNS(svgNS, "text");
textEl2.setAttribute("class", "template-name");
textEl2.setAttribute("x", "50%");
textEl2.setAttribute("y", "70%");
textEl2.textContent = "Employee";

svgEl.appendChild(textEl1);
svgEl.appendChild(textEl2);
}`

自動調整形狀

在數據綁定模式下使用時，ASP.NET Diagram控件如今能夠自動調整形狀大小以適合形狀文本。

啓用新的KeepRatioOnAutoSize選項，以在調整大小操做後保留自定義形狀的縱橫比。

爲防止自動調整大小的操做，請將EnableAutoSize屬性設置爲false。

用戶限制

如下新選項使您能夠控制對形狀和鏈接器所作的更改。

Add Shape
Change Connection
Change Connector Points
Change Connector Text
Change Shape Text
Delete Connector
Delete Shape
Resize Shape

咱們爲自定義使用狀況建立了一個新的 RequestEditOperation事件，處理此事件根據須要限制用戶操做。

改進Connector路由

v20.2改進用於計算正交connector路由（以防止交叉形狀）的算法。

甘特圖

自定義任務工具提示

使用全新的TooltipShowing 事件，您能夠輕鬆地在任務工具提示中顯示自定義內容。

自定義Task Edit對話框

在顯示Task Edit對話框以前，將觸發新的TaskEditDialogShowing事件，處理此事件可將所需的字段隱藏或標記爲只讀。

上下文菜單自定義API

全新的ASP.NET Gantt API容許您建立並自定義上下文菜單，您能夠根據需求新增預約義菜單項或建立自定義項。新的API包括：

新的客戶端API

v20.2實現了20多個新的客戶端事件（DependencyDeleting，FocusedTaskChanging，FocusedTaskChanged，TaskMoving，ResourceInserting / Deleting / Updating等）以及超過15種新方法（InsertDependency，InsertTask等）。

加強API

CustomButtonCallback事件使您能夠處理對自定義命令按鈕（TreeList）的單擊。
HeaderFilterEditorInitialize 事件容許您自定義列的彈出式過濾器（GridView，CardView，VerticalGrid，TreeList）。
啓用EnableScrolling 選項在上下文菜單（GridView）中顯示垂直滾動條。
ASPxGridColumnDisplayTextEventArgs.Kind屬性獲取對網格數據應用的操做類型（GridView，CardView，VerticalGrid，TreeList）。