This is a migrated thread and some comments may be shown as answers.

ColorPicker in Editor Template

6 Answers 805 Views

ColorPicker

This is a migrated thread and some comments may be shown as answers.

Daniel asked on 06 Jan 2014, 06:27 AM

Hello,

I have an editable grid which is set up to use PopUp edit mode. One of the columns (color) is a string that holds a hex value for a color. I have created an editor template to handle the edit and create functions. Here is how I define the grid:

@(Html.Kendo().Grid<DL.Data.PayCodes>()

.Name("grdPayCodes")

.Columns(columns =>

{

columns.Bound(p => p.pay_code).Width(120).Title("Code");

columns.Bound(p => p.color).Width(75).Title("Color").ClientTemplate("<div style='width: 100%; text-align: center;'><div style=

'width: 25px; height: 25px; background: #=color#; -moz-border-radius: 17px; -webkit-border-radius: 17px; border-radius: 17px; margin: auto; #= SetBorder(this, color)#'

></div></div>");

columns.Bound(p => p.description).Title("Description");

columns.Command(command => { command.Edit(); command.Custom("Delete").Click("DeletePayCodes_Click"); }).Width(180).HtmlAttributes(new { style = "text-align: center;" });

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PayCodesAddRecordTemplate"))

.Sortable()

.Scrollable()

.HtmlAttributes(new { style = "height:430px; margin-top: 7px;" })

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.pay_code))

.Create(update => update.Action("CreatePayCodes", "Settings"))

.Read(read => read.Action("GetPayCodesDSGrid", "Common"))

.Update(update => update.Action("UpdatePayCodes", "Settings"))

.Events(events => events.Error("grdPayCodes_ErrorHandler").RequestEnd("grdPayCodes_RequestEnd"))

)

.Events(ev => ev.DataBound("grdPayCodes_DataBound").Edit("grdPayCodes_Edit"))

)

and here is how I define my editor template

<table style="margin-left: 5%; width: 90%;">

<tr>

<td class="label-cell">

<label for="pay_code">Code</label>

</td>

<td>

<input id="pay_code" name="pit_name" class="data-cell" data-bind="value: pay_code">

</td>

</tr>

<tr>

<td class="label-cell">

<label for="color">Color</label>

</td>

<td>

@(Html.Kendo().ColorPicker()

.Name("color")

.Value("#ffffff")

)

</td>

</tr>

<tr>

<td class="label-cell">

<label for="description">Description</label>

</td>

<td>

<input id="description" name="description" class="data-cell" data-bind="value: description">

</td>

</tr>

</table>

Everything works well for the edit, however when I try to create a new record, I get an error: Cannot Parse Color: at kendo.all.min.js, line 17, column 6374

I understand that when creating a new record the color property of the model is an empty string, but I am initializing the color picker with a default value of #ffffff. Why am I still getting this error?

I am using version 2013.3.1119.340 with VS 2013. I am testing on IE 11, but I tried FF and I am still getting the same error.

Any help would be greatly appreciated.

Thank you.

6 Answers, 1 is accepted

Accepted

answered on 27 Apr 2014, 10:31 PM

IF you are using MVVM pattern. you can set the value to null as default value.

<input data-role="colorpicker"

data-bind="visible: isVisible,

enabled: isEnabled,

value: selectedColor,

events: { change: onChange }"

style="width: 180px"

>




var viewModel = kendo.observable({
    selectedColor: null,
    isVisible: true,
    isEnabled: true,
    onChange: function() {
        kendoConsole.log("event :: change (" + this.get("selectedColor") + ")");
    }
});
kendo.bind($("#example"), viewModel);