使用ComboBox的MultiColumnComboBox扩展

在我们最新的2019 v1版本中，我们添加了MultiColumnComboBox控件，这是C1 ComboBox Control的扩展。那么，是什么让它与传统的ComboBox不同？此控件不仅限于在DropDown中呈现项目的平面列表，而是在DropDown中呈现Grid。因此，可以在DropDown中显示比标准ComboBox更多的信息。

现在我们知道是它与众不同的地方，我们可以讨论可以它可以用于什么场景。

假设我们正在为汽车经销商门户开发一个网站，我们希望为用户提供基于制造商（例如福特）选择汽车模型的功能，然后对模型，制造和新/使用做出具体选择。

实现这样的功能需要使用一些ComboBox，如下图所示：

我们甚至可能希望显示更多信息，如颜色，折扣和价格范围，提供更多信息以缩小搜索范围。一种方法是允许用户通过从各种选项中进行选择来进行数据过滤。这显然会导致向已经过载的页面添加更多ComboBox。

如果页面只有一个显示此信息的ComboBox，从而节省屏幕空间和达到用户所需操作，对最终用户来说会不会更容易？

使用ComponentOne MultiColumnComboBox，我们可以在一个单个ComboBox中轻松实现这一点。用户可以在TextBox中键入汽车制造商名称“Ford”，它将显示一个以品牌，型号，颜色，折扣，类型和价格范围为列的网格。这将提供有关“福特”的所有相关信息的快速和详细的一览，如下图所示。此外，它使页面的用户体验比以前更好。

接下来，我们将介绍：

• 设置项目以使用MultiColumnComboBox控件
• 添加MultiColumnComboBox作为输入
• 格式化控件的下拉列表
• 使用MultiColumnComboBox作为FlexGrid的自定义编辑器
  

设置项目以使用MultiColumnComboBox控件

• 使用C1 MVC Standard模板创建一个新的MVC项目。该模板自动处理注册资源，命名空间和许可。
• 从Extension samples bin文件夹中将C1.Web.Mvc.Extension.DLL的引用添加到项目中。（如果在解决方案中找不到C1.Web.Mvc.Extension.DLL，那么我们需要rebuild 解决方案以获得此程序集。）
• 在web.config文件的system.web.webPages.razor下添加以下名称空间。 <namespaces></namespaces><add namespace="C1.Web.Mvc.Extensions.Fluent" />
• 在_Layout.cshtml文件中，通过在head标记@ Html.RegisterMultiColumnComboBoxScripts（）中添加以下代码来注册资源
  
  

完成上述步骤后，我们就可以在项目中使用MultiColumnComboBox作为输入控件。

添加MultiColumnComboBox作为输入

在这里，我们将在项目中添加MultiColumnComboBox作为InputControl。该控件在“ 自定义 ”HTMLHelperExtension中可用，并且可以在需要的网页中使用以下代码添加：

1. <style>
   
2.     /* Change the Dropdown width*/
   
3.     .wj-dropdown-panel {
   
4.         max-width:893px;
   
5.     }
   
6. </style>
   
7. @(Html.Custom().MultiColumnComboBox().Id("MultiColumnCmb")
   
8.         .Bind(m=>m.Bind(Model).PageSize(10))
   
9.         .SelectedValuePath("ID").DisplayMemberPath("Model")
   
10.         .IsEditable(false)
    
11. )

复制代码

格式化控件的下拉列表

让我们在当前例子中，对grid应用一些格式来突出显示网格中的一些值。

例如，我们可能想要突出显示汽车模型的折扣何时大于或等于50％，我们可以实现“折扣价”在满足此条件时闪烁的功能。

另一个例子是我们想要显示所有具有绿色背景的“新”类型的车型以突出显示它们。

我们可以使用GridItemFormater属性来格式化下拉列表中的项目。如果我们想自定义显示FlexGrid，例如设置列的格式，更改列位置等，我们可以处理OnClientIsDroppedDownChanged事件并在获取FlexGrid实例后进行更改。

GridItemFormater接受带有两个参数的函数，FlexGrid和FormatItemEventArgs

1. <style>
   
2.     input { /* styles the Input element font */
   
3.         font-family: Arial !important;
   
4.         font-size: 14px !important;
   
5.     }
   
6.     .wj-cell { /* styles the FlexGrid cells’ font */
   
7.         font-family: Arial !important;
   
8.         font-size: 14px !important;
   
9.     }
   
10.     #MultiColumnCmb.wj-content {
    
11.         border:1px solid #808080;
    
12.     }
    
13.     .wj-header{ /* Remove the boldness from FlexGrid’s heade */
    
14.         font-weight:normal !important;
    
15.     }
    
16.     .wj-dropdown-panel {
    
17.         max-width:893px;
    
18.     }
    
19.     .blinking{ /* class to blink the Text in cell */
    
20.         animation:blinkingText 0.5s infinite;
    
21.         font-weight:bold;
    
22.     }
    
23.     @@keyframes blinkingText{
    
24.         0%{        color: #000;    }
    
25. 
    
26.         50%{    color: red;    }
    
27. 
    
28.         100%{    color: #000;    }
    
29.     }
    
30. </style>
    
31. <script>
    
32.     function FormatGrid(s, e) {
    
33.         if (e.panel.cellType == wijmo.grid.CellType.Cell) {
    
34.             var color = "";
    
35.              /* Styles the Discount column if value is 50% by blink text */
    
36.             if (s.columns[e.col].binding == "Discount" && s.rows[e.row].dataItem.Discount >= 0.50) {
    
37.                 e.cell.innerHTML = "<div class='blinking'>" + wijmo.Globalize.format(s.rows[e.row].dataItem.Discount,"p2")+"</div>";
    
38.             }
    
39.             /* Add green background for New cars */
    
40.             if (s.columns[e.col].binding == "Type" && s.rows[e.row].dataItem.Type=="New") {
    
41.                 e.cell.innerHTML = "<span style='background:green;color:white;padding:1px 6px;'>New</span>";
    
42.             }
    
43.             e.cell.style.color = color;
    
44.         }
    
45.     }
    
46.     function DropDownChanged(s,e) {
    
47.         if (s.isDroppedDown) {
    
48.             /* Modify Columns properties to format FlexGrid */
    
49.             var grid = wijmo.Control.getControl(s.dropDown.querySelector(".wj-flexgrid"))
    
50.             grid.headersVisibility = 'Column';
    
51.             grid.columns.getColumn("ID").visible = false;
    
52.             grid.columns.getColumn("Make").format = "g";
    
53.             var modelCol = grid.columns.getColumn("Model");
    
54.             modelCol.width = "*";
    
55.             if (modelCol.index == 2) {
    
56.                 grid.columns.moveElement(2, 1);   
    
57.             }
    
58.             var discntColumn = grid.columns.getColumn("Discount");
    
59.             discntColumn.width = 104;
    
60.             discntColumn.format = "p2";
    
61.             grid.columns.getColumn("Price").format = "c0";
    
62.         }
    
63.     }
    
64. </script>
    
65. @Html.C1().CollectionViewService().Id("CollectionVeiwService").Bind(Model)
    
66. <div style="margin-top:15px;">
    
67.     <span >Select Car Model</span>   
    
68.     @(Html.Custom().MultiColumnComboBox().Id("MultiColumnCmb")
    
69.                     .ItemsSourceId("CollectionVeiwService")
    
70.                     .SelectedValuePath("Model").DisplayMemberPath("Model")
    
71.                     .PageSize(10)
    
72.                     .Placeholder("Select Car  Model")
    
73.         .OnClientIsDroppedDownChanged("DropDownChanged")
    
74.         .GridItemFormater("FormatGrid")
    
75.     )
    
76. </div>

复制代码

现在已经完成，我们已准备好在我们的项目中使用Multi ComboBox。

高级实现：使用MultiColumnComboBox作为FlexGrid的自定义编辑器

MultiColumnComboBox也可以在单元格内使用FlexGrid的自定义编辑器。这使得能够在FlexGrid中实现上述示例（如下面的GIF所示）。

让我们看看以下步骤：

步骤1：将MultiColumnComboBox添加为自定义编辑器

控件应放在脚本标记内，文本/模板作为类型。我们还需要设置ID属性以引用CellTemplate for FlexGrid。

使用CollectionViewService绑定数据以处理数据解析为json并避免在初始化编辑器时再次请求数据。

1. @Html.C1().CollectionViewService().Id("collectionViewService1").Bind(ViewData["Sales"] as List<Sale>)
   
2. <script type="text/template" id="prdctEdtr">
   
3.     @(Html.Custom().MultiColumnComboBox().Id("Multi")
   
4.                 .ItemsSourceId("collectionViewService1")
   
5.                 .IsEditable(false)
   
6.                 .SelectedValuePath("Product")
   
7.                 .DisplayMemberPath("Product").CssStyle("width","100%")
   
8.                 .TemplateBind("Text", "Product")
   
9.                 .ToTemplate()
   
10.     )
    
11. </script>

复制代码

步骤2：将FlexGrid CellTemplate的EditTemplate ID属性设置为包含MultiColumn控件作为编辑器的脚本ID“prdctEdtr”。

1. @(Html.C1().FlexGrid().Id("Grid").Bind(Model).AutoGenerateColumns(false).Columns(
   
2.             c => {
   
3.                 c.Add().Binding("ID").Header("ID");
   
4.                 c.Add().Binding("Product").Header("Product").CellTemplate(ctb=>ctb.EditTemplateId("prdctEdtr"));
   
5.             }
   
6.     )
   
7. )

复制代码