DevExtreme DataGrid ColorBox

Question

我正在尝试让我的数据网格中的一个单元格显示"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文档时，column对象似乎没有这个属性。

有没有人能提供一点线索？

Answer 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)上，我认为最快的方法是从文档中找到你想要的东西。