DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

在本文中，我們將總結DevExtreme v22.2中一些值得期待的新功能，這些功能適用于DevExtreme JavaScript (Angular, React, Vue, jQuery)和基于DevExtreme的ASP. NET MVC/Core控件。

DevExtreme v22.2正式版下載

DevExpress技術交流群7：674691612      歡迎一起進群討論

UI/UX自定義增強

表單 - 自定義標簽模板

目前我們的表單只能顯示文本標簽，然而一些用戶需要在編輯器標簽中顯示圖像或其他豐富的內容。為了滿足這一需求，在新版本中引入自定義標簽模板，這將利用許多DevExtreme組件中使用的技術——允許開發人員自定義應用程序UI的技術。為了幫助說明此功能的好處，下面的表單標簽使用圖標進行了增強。

<dx-form [formData]="employee">
<dxi-item dataField="name">
<div *dxTemplate="let data of 'label'">
<person-icon></person-icon> Name
</div>
...
</dxi-item>
</dx-form>

Accordion – 自定義標題模板的個別項目

DevExtreme Accordion允許開發者為所有項目標題指定一個共享的自定義模板，在某些情況下，您可能需要為每個項目使用不同的模板。在新版本中，開發者可以在項目級別上指定標題模板。例如在下面的例子中，第一項有一個副標題，當然您可以在Accordion中添加按鈕、圖像或任何自定義內容：

<dx-accordion>
<dxi-item>
<div *dxTemplate="let data of 'title'">
<h1>Super Mart of the West</h1>
<h2>Arkansas department</h2>
</div>
...
</dxi-item>
</dx-accordion>

編輯器 - 自定義驗證消息位置

 如果編輯器驗證失敗，則在編輯器下方顯示一條消息。用戶要求在這方面提供更大的靈活性，并允許控件在編輯器上方或左側/右側顯示驗證消息，官方將在下次主要更新中引入相應的' validationMessagePosition '配置選項。

<dx-text-box validationMessagePosition="left|right|top|bottom">
<dx-validator>
<dxi-validation-rule
type="number"
message="Value must be a number"
></dxi-validation-rule>
</dx-validator>
</dx-text-box>

日歷 - 顯示周數

另一個要求很高的UI增強是在Calendar組件中顯示周數，開發者可以通過組件配置中的新“showWeekNumbers”選項激活此功能。

<dx-calendar
[showWeekNumbers]="true"
[(value)]="currentValue"
></dx-calendar>

復選框 - 由終端用戶設置不確定值

DevExtreme CheckBox支持不確定狀態，它是通過將組件值設置為null或undefined來啟用的。一旦終端用戶單擊復選框，就不可能回到不確定狀態。一些用戶要求引入一種方法，將值重置回不確定的狀態，為了實現這一點，新版本引入一個附加的價值變更模式。在這種模式下，每次點擊都會旋轉三個組件狀態——選中、未選中和不確定。

<dx-check-box
[valueChangeMode]= "default|includeIndeterminate"
[(value)]="value"
></dx-check-box>

工具欄 - 多線路自適應模式

如果給定設備上沒有足夠的空間，工具欄可以自動隱藏下拉菜單中的項目，最終用戶可以打開此菜單來調用與隱藏項關聯的操作。在此模式下，通過換行到下一行，工具欄項仍然可見，因此最終用戶可以立即訪問所有可用的項目。

<dx-toolbar [multiline]="true">
</dx-toolbar>

數據透視網格導出到Excel - 導出字段面板標題

DevExtreme PivotGrid允許開發者將其內容導出到Microsoft Excel (v20.2+)，目前導出的數據只包括列/行維度值(類別)和交叉點的聚合值(數字)。為了幫助解決特定的用例，我們將更新導出引擎，以便您也可以包括維度(字段)名稱。

<dx-pivot-grid
[dataSource]="dataSource"
(onExporting)="onExporting($event)"
>
<dxo-export
[enabled]="true"
[exportFieldHeaders] ="true"
></dxo-export>
</dx-pivot-grid>

API增強

彈出 - 隱藏/顯示API增強

開發這可能已經在彈出窗口的onHiding/ ondisplays事件中使用了' cancel '標志來中止操作(基于特定的條件)，有些人要求異步計算條件。例如，當您必須等待最終用戶批準/拒絕請求時，對于這種情況，我們的一些組件支持' Promise '類型的' cancel '標志值，新版本以同樣的方式支持彈出窗口的onHiding/ ondisplays事件中的promise。

onHiding: (e) => {
e.cancel = showConfirmation("Are you sure?"); // returns a Promise
},

彈出窗口的show/hide方法返回一個Promise對象，該對象在操作完成后被解析。用戶要求在這方面有一些靈活性——特別是在事件處理程序通過' cancel '標志取消操作時拒絕Promise。

try {
await popup.hide();
// closed successfully
}
catch (e) {
// closing was cancelled
}

TagBox - 提交自定義項目的額外事件

DevExtreme TagBox允許終端用戶添加自定義項目，一旦用戶輸入自定義文本并按Enter，新創建的項就會提交給數據源。為了加速數據輸入過程，用戶要求在TagBox失去焦點時(當用戶按Tab鍵或單擊表單的提交/保存按鈕時)自動提交自定義項目，新版本擴展API來支持這些使用場景。

Slider & RangeSlider - 延遲' valueChanged '事件

當終端用戶開始拖動Slider的句柄時，組件立即引發valueChanged事件。因此在用戶釋放句柄之前會引發一系列事件，新版本引入一個額外的模式，只在用戶交互結束時觸發一次valueChanged事件。

<dx-slider valueChangeMode="instant|eventual">
</dx-slider>