Color picker in bound grid never sets the model property

[Karl]

I am trying to use the grid with a colorpicker to set a colorcode property on my model and even so the column is bound, I can never see the updated code when the model is sent to the controller.  I am using the standard in line editing function of the grid. (which manages to update teh model for simple properties.

CSHTML

@(Html.Kendo().Grid<Tetral.Services.Entities.AllocationPortfolioEntity>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ColourCode).Title("Colour").Width("84px").ClientTemplate("<span style='display: inline-block; width: 100%; height: 100%; background-color: #= ColourCode #'>&nbsp;</span>");
            columns.Command(m =>
            {
                m.Edit();
                m.Destroy();
            }).Width(260);    

        })
        .HtmlAttributes(new { style = "height:850px;width:100%" })
        .BindTo(@Model)
        .Scrollable(scr => scr.Enabled(true))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(m => m.Id(p => p.Id))
            .Create(update => update.Action("AllocationPortfolioInsert", "DataManagement"))
            .Update(update => update.Action("AllocationPortfolioUpdate", "DataManagement"))
            .Destroy(update => update.Action("AllocationPortfolioDelete", "DataManagement"))
        )   

 

TEMPLATE

@model string
@(Html.Kendo().ColorPickerFor(m => m)
    //.Palette(ColorPickerPalette.Basic)
    .Name("ColourPicker")
    .Events(e => e.Change("colourPickerChange"))
)

 

MODEL

    private string colourCode;
        [UIHint("ColourPicker")]
        public string ColourCode
        {
            get { return colourCode; }
            set { this.colourCode = newValue;}
        }

[Karl]

I found what the issue was.  Unless the name property of the colour picker control is called exactly the same as the model property, the binding will not work