Kendo Grid Colour picking

If you want to display a Kendo colour picker within a Kendo grid then it is straight forward enough.
This is based on using the Kendo UI with the MVC extensions.
Example data model that is to be shown in the grid could be something like

public class MyGridViewModel {  
    public int Id { get; set; }
    public string Name { get; set; }
    public string BgColour { get; set; }
    public string FgColour { get; set; }
}

Where the colours will be in the format #000000

The grid can be like

@(Html.Kendo().Grid<MyGridViewModel>()
    .Name("kgridA")
    .Columns(columns => {
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
        columns.Bound(p => p.Id).Hidden();
         columns.Bound(p => p.Name);
        columns.Bound(p => p.FgColour).Width(120).EditorTemplateName("GridColourPicker").ClientTemplate("<div style='background-color: #: FgColour#;padding:10px;'>&nbsp;</div>");
        columns.Bound(p => p.BgColour).Width(120).EditorTemplateName("GridColourPicker").ClientTemplate("<div style='background-color: #: BgColour#;padding:10px;'>&nbsp;</div>");
        columns.Template(p => p.FgColour).Title("Sample").Width(120).ClientTemplate("<div style='background-color: #: BgColour#; color: #: FgColour#;padding:10px;'><b>#: Name#</b></div>");
    })
    .ToolBar(toolbar => toolbar.Create().Text("Add New thing"))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => {
            model.Id(p => p.Id);
            model.Field(p => p.FgColour).DefaultValue("#000000");
            model.Field(p => p.BgColour).DefaultValue("#ffffff");
        })
            .Create(update => update.Action("Create", "controller"))
                .Read(read => read.Action("Read", "controller"))
                .Update(update => update.Action("Update", "controller"))
                .Destroy(update => update.Action("Destroy", "controller"))
    )
)

In this grid I have
Created columns for the background and foreground colours.
A client Template is used to fill the cell to the colour. If you want to see the colour text eg #224466 then you could use the attributes instead like

columns.Bound(p => p.FgColour).HtmlAttributes(new { style = "background-color:#:FgColour#;" });  

To allow the user to see the colours at work, a third non editable column was added to show the colours being used on the Name text field.

For the edit mode an editor template needs to exist.
Specified with .EditorTemplateName("GridColourPicker")
For some reason Telerik don't give one or have one in their examples but it is simple enough.
Add to the View\Shared\EditorTemplates directory a file called GridColourPicker.cshtml
Its contents are

@model string
@(
Html.Kendo().ColorPickerFor(m => m)  
)

Make sure you add a default in the grid for the two colours as shown. Failure to do so will cause some javascript errors and break the CREATE ability.


Above referring to version
Telerik Kendo UI Professional Q1 2015
Telerik UI for ASP.NET MVC Q1 2015


comments powered by Disqus