DevExtreme DataGrid 颜色框答案

【问题标题】：DevExtreme DataGrid ColorBoxDevExtreme DataGrid 颜色框
【发布时间】：2019-03-05 22:54:54
【问题描述】：

我正在尝试让我的数据网格中的一个单元格显示“ColorBox”，以便用户可以选择一种颜色。

这是我的模型：

public class Colour : ModelWrapper
{
    public string Name { get; set; }
    public string BorderColour { get; set; }
    public string BackgroundColour { get; set; }
    public string HighlightColour { get; set; }
    public string HighlightBorder { get; set; }
    public string HighlightBackground { get; set; }
}

这是网格的代码：

@(Html.DevExtreme().DataGrid<Colour>()
    .ID("GridView")
    .ShowBorders(true)
    .DataSource(d => d.Mvc().Controller("Colours").LoadAction("Get").DeleteAction("HardDelete").UpdateAction("Put").InsertAction("Post").Key("Id"))
                            .Columns(columns =>
                            {
                                columns.AddFor(m => m.Active);
                                columns.AddFor(m => m.Name);
                                columns.AddFor(m => m.BorderColour);
                                columns.AddFor(m => m.BackgroundColour);
                                columns.AddFor(m => m.HighlightColour);
                                columns.AddFor(m => m.HighlightBorder);
                                columns.AddFor(m => m.HighlightBackground);})

                            .Paging(p => p.PageSize(AppConstants.GridControlPageSize))
                            .FilterRow(f => f.Visible(true))
                            .HeaderFilter(f => f.Visible(true))
                            .GroupPanel(p => p.Visible(true))
                            .Grouping(g => g.AutoExpandAll(false))
                            .RemoteOperations(true)
                            .ColumnChooser(c => c.Enabled(true))
                            .StateStoring(s => s
                    .Enabled(true)
                    .Type(StateStoringType.LocalStorage)
                    .StorageKey(storageName))
                            .Editing(editing =>
                            {
                                editing.Mode(GridEditMode.Form);
                                editing.AllowAdding(true);
                                editing.AllowDeleting(true);
                                editing.AllowUpdating(true);
                            })
)

例如，这是我想让用户使用 ColorBox 的列之一：

columns.AddFor(m => m.BackgroundColour);

看这里的一些示例代码似乎应该是可能的。（诚然，这段代码被标记为“2岁”）：

settings.Columns.Add(column =>
{
    column.FieldName = "Colour";
    column.Caption = "Colour";
    column.Width = 100;

    column.ColumnType = MVCxGridViewColumnType.ColorEdit;

    ColorEditProperties props = (ColorEditProperties)column.PropertiesEdit;
    props.ColumnCount = 8;
    props.EnableCustomColors = true;
    ColorEditItemCollection colours = new ColorEditItemCollection();
    colours.CreateDefaultItems(false);
    props.Items.Assign(colours);
});

它似乎与 ColumnType 属性相关联，但是当我查看 DevExtreme 文档时，列对象似乎没有此属性。

谁能解释一下？

【问题讨论】：

您确定您使用的是 devextreme 吗？ devextreme 应该只是 js，这看起来像 C# 剃须刀代码。也给你绑定的模型会有所帮助
@AntoniosKatopodis 感谢您花时间查看。我已经用其他信息更新了我的问题。任何帮助都会很棒！

标签： devexpress

【解决方案1】：

我现在没有运行 devextreme 的机器，但以下应该是正确的。

.OnEditorPreparing("your_js_function")

把它放在列之后：

.Columns(columns =>
                        {
                            columns.AddFor(m => m.Active);
                            columns.AddFor(m => m.Name);
                            columns.AddFor(m => m.BorderColour);
                            columns.AddFor(m => m.BackgroundColour);
                            columns.AddFor(m => m.HighlightColour);
                            columns.AddFor(m => m.HighlightBorder);
                            columns.AddFor(m => m.HighlightBackground);})
.OnEditorPreparing("your_js_function")

现在解释一下。您绑定到列的这个 js 函数将为每个编辑器运行。所有列都有一个不同的编辑器，你可以使用这个 js 函数覆盖它。

<script type="text/javascript">
function your_js_function(e) {
    if (e.dataField == "BackgroundColour") {
        e.editorName = "dxColorBox"; // Changes the editor's type
        e.editorOptions.onValueChanged = function (args) {
            // Implement your logic here

        }
    }
}

官方的 devexpress 示例是自定义编辑器部分中的here。正如您将在链接中看到的那样，还有其他方法可以实现您的结果。我建议使用调试器，以便您可以查看 e 包含的内容。

不幸的是，在谷歌上搜索错误时的提示 devexpress 在许多不同的版本（VB、C#、Jquery）上运行，我认为最快的方法是从文档中找到您要查找的内容。

【讨论】：