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

ColorPicker in Editor Template

6 Answers 590 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
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

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 07 Jan 2014, 10:06 AM
Hi Daniel,

I answered this question in the support thread. I hope my answer was helpful for you.

Have a great day!

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 07 Jan 2014, 02:52 PM
Thank you Dimiter. Your suggestion to specify the default value of the "color" column as model.Field(f => f.color).DefaultValue("#ffffff"); corrected the problem.

Thank you for your help.
0
Masaab
Top achievements
Rank 1
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);

0
Daniel
Top achievements
Rank 1
answered on 28 Apr 2014, 05:20 PM
Thank you Masaab.

I will give your suggestion a try.  I think your approach might be more efficient than the one I am using currently.

Thanks for your help.
0
prakash
Top achievements
Rank 1
answered on 23 Feb 2015, 10:15 AM
Can you help me understand what exactly you mean by model.Field(f => f.color).DefaultValue("#ffffff"); 
Where do you add this line ?

I am having the same issue and I couldn't really get this answer.
0
Dimiter Madjarov
Telerik team
answered on 23 Feb 2015, 11:04 AM

Hello Prakash,

The default value is set in the dataSource model configuration.
E.g.

.DataSource(dataSource => dataSource
  .Ajax()
  .PageSize(20)
  .Model(model =>
      {
          model.Id(p => p.ProductID);
          model.Field(p => p.ProductName).DefaultValue("default");
      })

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ColorPicker
Asked by
Daniel
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Daniel
Top achievements
Rank 1
Masaab
Top achievements
Rank 1
prakash
Top achievements
Rank 1
Share this question
or