使用ComboBox的MultiColumnComboBox扩展
在我们最新的2019 v1版本中，我们添加了MultiColumnComboBox控件，这是C1 ComboBox Control的扩展。那么，是什么让它与传统的ComboBox不同？此控件不仅限于在DropDown中呈现项目的平面列表，而是在DropDown中呈现Grid。因此，可以在DropDown中显示比标准ComboBox更多的信息。现在我们知道是它与众不同的地方，我们可以讨论可以它可以用于什么场景。假设我们正在为汽车经销商门户开发一个网站，我们希望为用户提供基于制造商（例如福特）选择汽车模型的功能，然后对模型，制造和新/使用做出具体选择。实现这样的功能需要使用一些ComboBox，如下图所示：https://gccontent.blob.core.windows.net/gccontent/blogs/componentone/20190705-using-multicolumncombobox-extension-for-combobox/image1.PNG我们甚至可能希望显示更多信息，如颜色，折扣和价格范围，提供更多信息以缩小搜索范围。一种方法是允许用户通过从各种选项中进行选择来进行数据过滤。这显然会导致向已经过载的页面添加更多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中可用，并且可以在需要的网页中使用以下代码添加：<style>
/* Change the Dropdown width*/
.wj-dropdown-panel {
max-width:893px;
}
</style>
@(Html.Custom().MultiColumnComboBox().Id("MultiColumnCmb")
.Bind(m=>m.Bind(Model).PageSize(10))
.SelectedValuePath("ID").DisplayMemberPath("Model")
.IsEditable(false)
)格式化控件的下拉列表让我们在当前例子中，对grid应用一些格式来突出显示网格中的一些值。例如，我们可能想要突出显示汽车模型的折扣何时大于或等于50％，我们可以实现“折扣价”在满足此条件时闪烁的功能。另一个例子是我们想要显示所有具有绿色背景的“新”类型的车型以突出显示它们。
我们可以使用GridItemFormater属性来格式化下拉列表中的项目。如果我们想自定义显示FlexGrid，例如设置列的格式，更改列位置等，我们可以处理OnClientIsDroppedDownChanged事件并在获取FlexGrid实例后进行更改。GridItemFormater接受带有两个参数的函数，FlexGrid和FormatItemEventArgs<style>
input { /* styles the Input element font */
font-family: Arial !important;
font-size: 14px !important;
}
.wj-cell { /* styles the FlexGrid cells’ font */
font-family: Arial !important;
font-size: 14px !important;
}
#MultiColumnCmb.wj-content {
border:1px solid #808080;
}
.wj-header{ /* Remove the boldness from FlexGrid’s heade */
font-weight:normal !important;
}
.wj-dropdown-panel {
max-width:893px;
}
.blinking{ /* class to blink the Text in cell */
animation:blinkingText 0.5s infinite;
font-weight:bold;
}
@@keyframes blinkingText{
0%{ color: #000; }
50%{ color: red; }
100%{ color: #000; }
}
</style>
<script>
function FormatGrid(s, e) {
if (e.panel.cellType == wijmo.grid.CellType.Cell) {
var color = "";
/* Styles the Discount column if value is 50% by blink text */
if (s.columns.binding == "Discount" && s.rows.dataItem.Discount >= 0.50) {
e.cell.innerHTML = "<div class='blinking'>" + wijmo.Globalize.format(s.rows.dataItem.Discount,"p2")+"</div>";
}
/* Add green background for New cars */
if (s.columns.binding == "Type" && s.rows.dataItem.Type=="New") {
e.cell.innerHTML = "<span style='background:green;color:white;padding:1px 6px;'>New</span>";
}
e.cell.style.color = color;
}
}
function DropDownChanged(s,e) {
if (s.isDroppedDown) {
/* Modify Columns properties to format FlexGrid */
var grid = wijmo.Control.getControl(s.dropDown.querySelector(".wj-flexgrid"))
grid.headersVisibility = 'Column';
grid.columns.getColumn("ID").visible = false;
grid.columns.getColumn("Make").format = "g";
var modelCol = grid.columns.getColumn("Model");
modelCol.width = "*";
if (modelCol.index == 2) {
grid.columns.moveElement(2, 1);
}
var discntColumn = grid.columns.getColumn("Discount");
discntColumn.width = 104;
discntColumn.format = "p2";
grid.columns.getColumn("Price").format = "c0";
}
}
</script>
@Html.C1().CollectionViewService().Id("CollectionVeiwService").Bind(Model)
<div style="margin-top:15px;">
<span >Select Car Model</span>
@(Html.Custom().MultiColumnComboBox().Id("MultiColumnCmb")
.ItemsSourceId("CollectionVeiwService")
.SelectedValuePath("Model").DisplayMemberPath("Model")
.PageSize(10)
.Placeholder("Select CarModel")
.OnClientIsDroppedDownChanged("DropDownChanged")
.GridItemFormater("FormatGrid")
)
</div>
现在已经完成，我们已准备好在我们的项目中使用Multi ComboBox。高级实现：使用MultiColumnComboBox作为FlexGrid的自定义编辑器
MultiColumnComboBox也可以在单元格内使用FlexGrid的自定义编辑器。这使得能够在FlexGrid中实现上述示例（如下面的GIF所示）。https://gccontent.blob.core.windows.net/gccontent/blogs/componentone/20190705-using-multicolumncombobox-extension-for-combobox/image4.gif让我们看看以下步骤：步骤1：将MultiColumnComboBox添加为自定义编辑器控件应放在脚本标记内，文本/模板作为类型。我们还需要设置ID属性以引用CellTemplate for FlexGrid。
使用CollectionViewService绑定数据以处理数据解析为json并避免在初始化编辑器时再次请求数据。@Html.C1().CollectionViewService().Id("collectionViewService1").Bind(ViewData["Sales"] as List<Sale>)
<script type="text/template" id="prdctEdtr">
@(Html.Custom().MultiColumnComboBox().Id("Multi")
.ItemsSourceId("collectionViewService1")
.IsEditable(false)
.SelectedValuePath("Product")
.DisplayMemberPath("Product").CssStyle("width","100%")
.TemplateBind("Text", "Product")
.ToTemplate()
)
</script>步骤2：将FlexGrid CellTemplate的EditTemplate ID属性设置为包含MultiColumn控件作为编辑器的脚本ID“prdctEdtr”。@(Html.C1().FlexGrid().Id("Grid").Bind(Model).AutoGenerateColumns(false).Columns(
c => {
c.Add().Binding("ID").Header("ID");
c.Add().Binding("Product").Header("Product").CellTemplate(ctb=>ctb.EditTemplateId("prdctEdtr"));
}
)
)
页:
[1]