Use js to filter DropDownList data

Use js to filter DropDownList data
Background:
Some time ago, when I was working on a project, I encountered a data filtering problem in a third-party control. However, the filtering provided by the third-party control cannot meet our needs well, then, you can find a solution to improve the data filtering required. By searching for information, you can finally filter the data of the DropDownList control through js and the attributes and methods of the third-party controls used, I have never written JavaScript before, but I am still unfamiliar with it. Fortunately, by looking for information, I finally completed the implementation of the function.
Specific implementation:
First, determine the columns to be filtered based on the requirements, and write the bound method name and the event to be triggered based on the actual situation. The Code is as follows:
1. <telerik: RadComboBox ID = "RadComboBox3" DataTextField = "Rate" DataValueField = "Rate" AppendDataBoundItems = "true"
2. SelectedValue = '<% # (GridItem) Container). OwnerTableView. GetColumn ("Rate"). CurrentFilterValue %>'
3. runat = "server" OnClientSelectedIndexChanged = "RateListIndexChanged" Width = "45px"
4. OnLoad = "InitRateList" DropDownWidth = "80">
5. <Items>
6. <telerik: RadComboBoxItem Text = "all"/>
7. </Items>
8. </telerik: RadComboBox>
Note that RadComboBox in this third-party control is equivalent to DropDownList in Asp control. Write the event SelectedValue to be triggered by RadComboBox and the method name RateListIndexChanged. The InitRateList is the background Method for initializing the RadComboBox control.
The following is the js implementation part. The Code is as follows:
 
1. <telerik: RadScriptBlock ID = "RadScriptBlock4" runat = "server">
2. <script type = "text/javascript">
3. function RateListIndexChanged (sender, args ){
4. var tableView = $ find ("<% # (GridItem) Container). OwnerTableView. ClientID %> ");
5. var filterVal = args. get_item (). get_value ();
6. if (filterVal = ""){
7. tableView. filter ("Rate", filterVal, "NoFilter ");
8 .}
9. else if (filterVal = 0.6 ){
10. tableView. filter ("Rate", 0.6, "GreaterThanOrEqualTo ");
11 .}
12. else 'if (filterVal = "0.35 0.6 "){
13. tableView. filter ("Rate", "0.35 0.6", "");
14 .}
15. else 'if (filterVal = "0.15 0.35 "){
16. tableView. filter ("Rate", "0.15 0.35", "");
17 .}
18. else if (filterVal = 0.15 ){
19. tableView. filter ("Rate", 0.15, "LessThan ");
20 .}
21 .}
22. </script>
23. </telerik: RadScriptBlock>
Here is the RadComboBox filtering function implemented by js. The filter method called by tableView is provided by RadComboBox internally. We will not discuss it here.
The code for initializing the RadComboBox method InitRateList mentioned above is as follows:
 
1. // initialize the interest rate list
2. public void InitRateList (object sender, EventArgs e)
3 .{
4. RadComboBox droplist = (RadComboBox) sender;
5. droplist. Items. Add (new RadComboBoxItem ("greater than 0.6", "0.6 "));
6. droplist. Items. Add (new RadComboBoxItem ("0.35-0.6", "0.35 0.6 "));
7. droplist. Items. Add (new RadComboBoxItem ("0.15-0.35", "0.15 0.35 "));
8. droplist. Items. Add (new RadComboBoxItem ("less than 0.15", "0.15 "));
9 .}
Everywhere, the entire function is implemented. However, in the end, the JavaScript method provided by third-party controls cannot be used to filter data in DropDownList, if you are interested, you can try to encapsulate the js method to screen the DropDownList data. Finally, paste the overall effect.
 
All data ranges that can be filtered are displayed,
 
Here is the filtered result. The filtering condition in the circle is 0.15-0.35 because the format control is not completely displayed here.
 
 

From HDDevTeam