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文档时，列对象似乎没有此属性。

有人可以照亮吗？

Answer 1

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

 - ./data:/docker-entrypoint-initdb.d

将其放在列之后：

.OnEditorPreparing("your_js_function")

现在进行一些解释。您绑定到列的js函数将在每个编辑器中运行。所有列都有一个不同的编辑器，您可以使用此js函数将其覆盖。

.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")

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

不幸的是，当错误搜索devexpress时，它也可以在许多不同的版本（VB，C＃，Jquery）上运行，我认为最快的方法是从文档中查找所需内容。

DevExtreme DataGrid颜色框

1 个答案: