Telerik UI for ASP. NET MVC擁有使用JavaScript和HTML5構建網站和移動應用所需的70+UI部件，來滿足開發者的各種需求，提供無語倫比的開發性能和用戶體驗。它主要是針對專業級的 ASP.NET開發，通過該產品的強大功能，開發者可以開發出功能豐富、適應標準廣泛的響應式應用程序。

在上文中（點擊這里回顧>>），我們講解了如何實現自定義網格過濾功能的第一步，本文將繼續講解如何配置過濾等。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

配置過濾

如果自定義篩選的第一步是添加可篩選元素，那么第二步是在模式部分中指定數據類型。

由于在模式部分中將LastDelivery屬性聲明為日期，Grid在LastDelivery列上提供了一個日歷控件，讓用戶選擇要篩選的數據。類似地，通過將InStock屬性聲明為布爾值，用戶可以在InStock列的頂部獲得兩個單選按鈕，用于篩選行。最后TotalQuantity被標記為一個數字，該列得到一個用于選擇數值的微調器。

由于模式設置，沒格列上選擇比較操作符的篩選菜單都配置為匹配列顯示的屬性的數據類型：

認情況下，網格在服務器上進行所有過濾。如果想確保你的用戶總是在查看最新的數據，或者如果想利用服務器上更快的處理速度，這是非常好的選擇。但在本示例中，是在初始獲取之后緩存數據，并且只有少量產品要顯示，所以不需要服務器端過濾的額外功能。

因此在本示例中，關閉服務器端過濾(除了初始數據獲取)并在用戶過濾網格行時消除對服務器的重復訪問是有意義的。這不僅會給用戶更好/更快的體驗，還會減少對服務器端資源的需求。要實現客戶端過濾，只需要將server-operation屬性添加到網格的數據源標記中，并將其設置為false：

<datasource type="DataSourceTagHelperType.Ajax" server-operation="false">

關注用戶需求

通常，用戶想要做的只是找到其列與特定值匹配的行(對于包含字符串值的列尤其如此)，如果是這樣的話，這個UI可能更有意義：

實現這個過濾UI只需要兩個步驟，首先需要更新網格上的可過濾元素，使用菜單(而不是行)過濾：

<filterable enabled="true" mode="menu">

其次，需要在希望提供這種簡化體驗的地方展開列元素，并為這些列提供它們自己的可過濾元素。在這些列的可過濾元素中，只需要將可過濾元素的multi屬性設置為true，就像這樣：

<column field="ProductName" title="Name" width="240">
<filterable multi="true"/>
</column>

現在，對于包含字符串數據的大多數列，您可能已經為用戶提供了他們想要的篩選體驗。這確實假設列具有合理數量的惟一值，因此選項列表本身不會過多。對布爾列進行這種更改也是一個很好的選擇，用戶最多只能在三個值(true, false，“is empty”)之間進行選擇，并且永遠不會有太多的選項列表。

處理日期和數字

然而對于日期和數字列，用戶可能需要更多選項——他們不僅希望通過精確匹配進行篩選，還希望對日期在某個特定日期之前或之后的行進行篩選，或者對大于或小于某個值的數字進行篩選。

您可以配置Grid來提供這種體驗，這可能更符合用戶的需求：

要做到這一點，只需要將網格的可過濾元素的額外屬性設置為false：

<filterable enabled="true" extra="false"/>

如果全局地這樣有點極端，那么您可以使用每個列的可過濾元素單獨配置列。例如，這個配置將單獨為LastDelivery列打開完整的默認過濾選項：

<column field="LastDelivery" format="{0:MMM-dd}" title="Last Delivery" width="150" >
<filterable enabled="true" extra="true"/>
</column>

不過，在集中過濾和完整過濾體驗之間有一個中間地帶：通過使用operators元素，您可以為用戶提供他們需要的比較操作符(還可以配置每個操作符顯示的文本)。

這個示例定義了LastDelivery date列有三個比較運算符——“delivery on”(等于)，“delivery before”(小于)和“delivery after”(大于)：

<column field="LastDelivery" format="{0:MMM-dd}" title="Last Delivery" width="150" >
<filterable extra="false" >
<operators>
<date eq="Deliveries on"
gt="Deliveries after"
lt="Deliveries before" />
</operators>
</filterable>
</column>

現在用戶得到了一組反映他們需求的過濾選項：

您還可以使用Grid的可過濾元素替代列可過濾元素來全局配置比較操作符，例如這將允許為所有日期列配置比較操作符，還可以使用operators元素中的相應元素為字符串、數字和枚舉配置比較操作符。然后，您可以使用列的可過濾元素在必要時覆蓋各個列上的這些設置。

配置選項列表

還有一個步驟可以為用戶提供更集中的體驗：您可以提供一個自定義的選項列表供用戶進行比較，例如在Total Quantity列中，用戶可能只對手頭數量(QoH)與特定閾值進行比較感興趣，典型的問題可能是這樣的：“QoH是大于/小于0、100還是200項?”

提供比較值列表的第一步是向列的可過濾元素添加filter-ui-handler屬性，此屬性需要指向頁面中的一個JavaScript函數，該函數將用值加載過濾器的選項列表。

在本示例中除了指定用戶需要的兩個比較操作符外，還引用了一個名為quantityOptions的函數，該函數將構建QoH閾值列表：

<column field="TotalQuantity" title="Quantity on Hand" width="150">
<filterable enabled="true" extra="false" filter-ui-handler="quantityOptions">
<operators>
<number gt="QoH greater than"
lt="Qoh less than" />
</operators>
</filterable>
</column>

下一步是編寫該函數，該函數需要接受一個參數(我將其稱為columnFilter)，并且已經向該參數添加了一個Kendo UI下拉列表。在該下拉列表的傳輸部分，設置了一個讀取操作，這次指向Razor Page中名為“Quantity”的處理程序方法。最后，使用下拉列表的optionLabel，已經指定了一個要在下拉列表中顯示的初始選擇：

function quantityOptions(columnFilter) {
columnFilter.kendoDropDownList({
dataSource: {
transport: {
read: "@Url.Page("/Index","Quantity")"
}
},
optionLabel: "-- Select Threshold --"
});
}

最后一步是在Razor Page的代碼隱藏文件中創建相應的方法。下拉列表只發出GET請求，所以需要設置一個名為“OnGet”+處理程序名稱(“OnGetQuantity”）的方法。在該方法中，只需要返回一個JSON格式的值列表來填充下拉列表，代碼看起來像這樣：

public JsonResult OnGetQuantity([DataSourceRequest] DataSourceRequest request)
{
List<int> qtys = new List<int> {0, 100, 200 };
return new JsonResult(qtys.Select(e => e).Distinct());
}

現在用戶得到了這個非常自定義化的(和集中的)UI，用于根據手頭的數量過濾產品：