DevExtreme DataGrid ColorBox - devexpress

Question

I am trying to make one of the cells in my datagrid display the "ColorBox" so users can choose a colour.
This is my model:
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; }
}
This is the code for the grid:
#(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);
})
)
For example, here is one of the columns I want to enable users to use the ColorBox for:
columns.AddFor(m => m.BackgroundColour);
It appears that this should be possible looking at some example code here. (Admittedly this code is marked as "2 years old"):
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);
});
It seems to be linked to the ColumnType property but when I look at the DevExtreme documentation the column object doesn't appear to have this property.
Can anyone shed any light?

Answer 1

I dont have a machine which runs devextreme right now but the following should be correct.
.OnEditorPreparing("your_js_function")
Put this after columns:
.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")
Now a bit of explaination. This js function that you bind to the columns will run for each editor. All columns have a different editor which you can overwrite using this js function.
<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
}
}
}
The official devexpress example is here in the customize editors part. As you will see in the link there are other ways to achieve your result as well. I suggest using a debugger so you can see what e contains.
Also a tip when googling for errors devexpress unfortunately runs on many different versions (VB, C#, Jquery) I think the fastest way would be to find what you are looking for from the documentation.