Add Color Picker as a resource instead of a dropdownlist

[Edward]

How can I add a Color Picker to the event dialog using resources?  I even looked at a custom editor but recreating the stock event dialog seems like it will be complex just to add a Color Picker.

Is there a demo for this?

​

.Resources(resource =>
    {
        resource.Add(m => m.Color)     // Need this to be a color picker
            .Title("Color")
            .DataTextField("Name")
            .DataValueField("ColorID")

[Edward]

I found a MVC project on one of the forums: SchedulerCustomEditor.
When I incorporate the Editable template:

.Editable(editable => editable.TemplateName("TaskAssetEditorTemplate"))

and then run it I get

Uncaught Error: Invalid template:'<div class="k-edit-label">    <label for="Title">Title</label></div><div data-container-for="Title" class="k-edit-field">    <input class="k-textbox" data-bind="value:Title" id="Title" name="Title" type="text" value="" /></div><div class="k-edit-label">    <label for="Start">Start</label></div><div data-container-for="Start" class="k-edit-field">    <input data-bind="value:Start,invisible:IsAllDay" data-val="true" data-val-date="The field Start must be a date." data-val-required="The Start field is required." id="StartDateTime" name="Start" required="required" style="z-index: inherit;" type="datetime" value="1/1/0001 12:00 AM" /><script> jQuery(function(){jQuery("\#StartDateTime").kendoDateTimePicker({"format":"M/d/yyyy h:mm tt","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script>    <input data-bind="value:Start,visible:IsAllDay" id="StartDate" name="Start" required="required" style="z-index: inherit;" type="date" value="1/1/0001" /><script> jQuery(function(){jQuery("\#StartDate").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script>    <span data-for="Start" class="k-invalid-msg"></span></div><div class="k-edit-label">    <label for="End">End</label></div><div data-container-for="End" class="k-edit-field">    <input data-bind="value:End,invisible:IsAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" data-val="true" data-val-date="The field End must be a date." data-val-required="The End field is required." id="EndDateTime" name="End" required="required" style="z-index: inherit;" type="datetime" value="1/1/0001 12:00 AM" /><script> jQuery(function(){jQuery("\#EndDateTime").kendoDateTimePicker({"format":"M/d/yyyy h:mm tt","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script>    <input data-bind="value:End,visible:IsAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" id="EndDate" name="End" required="required" style="z-index: inherit;" type="date" value="1/1/0001" /><script> jQuery(function(){jQuery("\#EndDate").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script>    <span data-for="End" class="k-invalid-msg"></span></div><div class="k-edit-label">    <label for="IsAllDay">IsAllDay</label></div><div data-container-for="IsAllDay" class="k-edit-field">    <input data-bind="checked: IsAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" /></div><div class="k-edit-label">    <label for="RecurrenceRule">RecurrenceRule</label></div><div data-container-for="RecurrenceRule" class="k-edit-field">    <div data-bind="value:RecurrenceRule" id="RecurrenceRule" name="RecurrenceRule"></div><script> jQuery(function(){jQuery("\#RecurrenceRule").kendoRecurrenceEditor({});});</script></div><div class="k-edit-label">    <label for="Description">Description</label></div><div data-container-for="Description" class="k-edit-field">    <textarea class="k-textbox" cols="20" data-bind="value:Description" id="Description" name="Description" rows="2"></textarea></div><div data-container-for="Color" class="k-edit-field">    <div class="k-widget k-colorpalette" id="palette"></div><script> jQuery(function(){jQuery("\#palette").kendoColorPalette({"palette":["#f0d0c9","#e2a293","#d4735e","#65281a","#eddfda","#dcc0b6","#cba092","#7b4b3a","#fcecd5","#f9d9ab","#f6c781","#c87d0e","#e1dca5","#d0c974","#a29a36","#514d1b","#c6d9f0","#8db3e2","#548dd4","#17365d"],"columns":4,"tileSize":{"width":34,"height":19}});});</script></div>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<div class="k-edit-label">    <label for="Title">Title</label></div><div data-container-for="Title" class="k-edit-field">    <input class="k-textbox" data-bind="value:Title" id="Title" name="Title" type="text" value="" /></div><div class="k-edit-label">    <label for="Start">Start</label></div><div data-container-for="Start" class="k-edit-field">    <input data-bind="value:Start,invisible:IsAllDay" data-val="true" data-val-date="The field Start must be a date." data-val-required="The Start field is required." id="StartDateTime" name="Start" required="required" style="z-index: inherit;" type="datetime" value="1/1/0001 12:00 AM" /><script>\tjQuery(function(){jQuery("#StartDateTime").kendoDateTimePicker({"format":"M/d/yyyy h:mm tt","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script>    <input data-bind="value:Start,visible:IsAllDay" id="StartDate" name="Start" required="required" style="z-index: inherit;" type="date" value="1/1/0001" /><script>\tjQuery(function(){jQuery("#StartDate").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script>    <span data-for="Start" class="k-invalid-msg"></span></div><div class="k-edit-label">    <label for="End">End</label></div><div data-container-for="End" class="k-edit-field">    <input data-bind="value:End,invisible:IsAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" data-val="true" data-val-date="The field End must be a date." data-val-required="The End field is required." id="EndDateTime" name="End" required="required" style="z-index: inherit;" type="datetime" value="1/1/0001 12:00 AM" /><script>\tjQuery(function(){jQuery("#EndDateTime").kendoDateTimePicker({"format":"M/d/yyyy h:mm tt","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script>    <input data-bind="value:End,visible:IsAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" id="EndDate" name="End" required="required" style="z-index: inherit;" type="date" value="1/1/0001" /><script>\tjQuery(function(){jQuery("#EndDate").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script>    <span data-for="End" class="k-invalid-msg"></span></div><div class="k-edit-label">    <label for="IsAllDay">IsAllDay</label></div><div data-container-for="IsAllDay" class="k-edit-field">    <input data-bind="checked: IsAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" /></div><div class="k-edit-label">    <label for="RecurrenceRule">RecurrenceRule</label></div><div data-container-for="RecurrenceRule" class="k-edit-field">    <div data-bind="value:RecurrenceRule" id="RecurrenceRule" name="RecurrenceRule"></div><script>\tjQuery(function(){jQuery("#RecurrenceRule").kendoRecurrenceEditor({});});</script></div><div class="k-edit-label">    <label for="Description">Description</label></div><div data-container-for="Description" class="k-edit-field">    <textarea class="k-textbox" cols="20" data-bind="value:Description" id="Description" name="Description" rows="2"></textarea></div><div data-container-for="Color" class="k-edit-field">    <div class="k-widget k-colorpalette" id="palette"></div><script>\tjQuery(function(){jQuery("#palette").kendoColorPalette({"palette":["';f0d0c9",";o+='e2a293","';d4735e",";o+='65281a","';eddfda",";o+='dcc0b6","';cba092",";o+='7b4b3a","';fcecd5",";o+='f9d9ab","';f6c781",";o+='c87d0e","';e1dca5",";o+='d0c974","';a29a36",";o+='514d1b","';c6d9f0",";o+='8db3e2","';548dd4",";o+='17365d"],"columns":4,"tileSize":{"width":34,"height":19}});});</script></div>';}return o;'

Any suggestions?

[Edward]

I found a project in one of the forum post for custom editor: SchedulerCustomEditor.

I included the code from that project into mine but when I run it I get an Invalid Template in Chrome debugger.  I replied with the exact error but the forum said:

Our antispam service detected your content as possible spam. Your post will be reviewed by our support and published live within 24 hours. Please excuse us for the inconvenience.

Basically the error said Invalid Template and then listed the html markup.

[Edward]

I have the example working but without any additional controls than the basic ones.  Here is the  scheduler code when it works:

@(Html.Kendo().Scheduler<GIS.Services.Pulse.Types.Models.TaskAsset>()
    .Name("scheduler")
    .Date(Model.Date)
    .StartTime(Model.Date)
    .Height(800)
    .AllDayEventTemplate(
            "<div class='asset-task' style='color: black; background-color: #= Color #'>" +
                "<strong>#= title #</strong>" +
                "<p>" +
                    "<strong>Asset: </strong>#= AssetName #" +
                    "<br>" +
                    "<strong>Owner: </strong>#= OwnerName #" +
                "</p>" +
            "</div>"
    )
    .EventTemplate(
            "<div class='asset-task' style='color: black; background-color: #= Color #'>" +
                "<strong>#= title #</strong>" +
                "<p>" +
                    "<strong>Asset: </strong>#= AssetName #" +
                    "<br>" +
                    "<strong>Owner: </strong>#= OwnerName #" +
                "</p>" +
            "</div>"
    )
    .Views(views =>
    {
        views.DayView();
        views.WorkWeekView();
        views.WeekView();
        views.MonthView(monthView => monthView.Selected(true)).EventHeight(70);
        views.AgendaView();
    })
    .Editable(editable => editable.TemplateName("TaskAssetEditorTemplate"))
    .Timezone("Etc/UTC")
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.TaskID);
            m.Field(f => f.Title).DefaultValue("No title");
            m.Field(f => f.Color);
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Read("TaskAssetRead", "Scheduler")
        .Create("TaskAssetCreate", "Scheduler")
        .Destroy("TaskAssetDestroy", "Scheduler")
        .Update("TaskAssetUpdate", "Scheduler")
    )
    .Events(events => events.Edit("edit"))
)

Here is the Template:

@model GIS.Services.Pulse.Types.Models.TaskAsset
@{
    //required in order to render validation attributes
    ViewContext.FormContext = new FormContext();
}

@functions{
    public Dictionary<string, object> generateDatePickerAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {

        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

        datePickerAttributes["id"] = elementId;
        datePickerAttributes["name"] = fieldName;
        datePickerAttributes["data-bind"] = dataBindAttribute;
        datePickerAttributes["required"] = "required";
        datePickerAttributes["style"] = "z-index: inherit;";

        return datePickerAttributes;
    }
}

<div class="k-edit-label">
    @(Html.LabelFor(model => model.Title))
</div>
<div data-container-for="Title" class="k-edit-field">
    @(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:Title" }))
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.Start))
</div>
<div data-container-for="Start" class="k-edit-field">

    @(Html.Kendo().DateTimePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes(
        "StartDateTime",
        "Start",
        "value:Start,invisible:IsAllDay")))

    @(Html.Kendo().DatePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes(
        "StartDate",
        "Start",
        "value:Start,visible:IsAllDay")))


    <span data-for="Start" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.End))
</div>
<div data-container-for="End" class="k-edit-field">

    @(Html.Kendo().DateTimePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "EndDateTime",
            "End",
            "value:End,invisible:IsAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

    @(Html.Kendo().DatePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "EndDate",
            "End",
            "value:End,visible:IsAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))


    <span data-for="End" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.IsAllDay))
</div>
<div data-container-for="IsAllDay" class="k-edit-field">
    <input data-bind="checked: IsAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" />
</div>


<div class="k-edit-label">
    @(Html.LabelFor(model => model.RecurrenceRule))
</div>
<div data-container-for="RecurrenceRule" class="k-edit-field">
    @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
        .HtmlAttributes(new { data_bind = "value:RecurrenceRule" }))
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.Description))
</div>
<div data-container-for="Description" class="k-edit-field">
    @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:Description" }))
</div>

@{
    ViewContext.FormContext = null;
}

If I add the color picker code I get the invalid template:

<div data-container-for="Color" class="k-edit-field">
    @(Html.Kendo().ColorPalette()
        .Name("palette")
        .Columns(4)
        .TileSize(s => s.Width(34).Height(19))
        .Palette(new[] {
            "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
            "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
        })
     )
</div>

What am I missing?

[Edward]

I made some changes since reading some forum post.
I added HtmlAttributes.  I added the name = "Color" after testing it without it initially.  I looked at the mark up on some of the other controls in the error message and they all had name.  The ColorPalette didn't add it automatically so I added but with no avail.  I also tried changing the value name color to both 'color' and 'Color'.

<div data-container-for="color" class="k-edit-field">
    @(Html.Kendo().ColorPalette()
        .Name("Color")
        .HtmlAttributes(new { name = "Color", data_bind = "value:color" })
        .Columns(4)
        .TileSize(s => s.Width(34).Height(19))
        .Palette(new[] {
            "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
            "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
        })
     )
</div>

I also set the the defaultValue in the DataSource:

m.Field(f => f.Color).DefaultValue("#f0d0c9");

Can the color picker be used in this template?

[Edward]

I have to add a dropdownlist to the editor too so I've added:

<div class="k-edit-label">
    @(Html.LabelFor(model => model.AssetID))
</div>
<div data-container-for="AssetID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.AssetID)
        .HtmlAttributes(new { data_bind = "value:AssetID", style = "width: 400px" })
        .DataTextField("Name")
        .DataValueField("AssetID")
        .DataSource(ds => ds.Read("Assets", "Asset"))
    )
</div>

This works correctly.

Still need help on the color picker.

[Edward]

Here is the code for the color picker from Chrome's Console:

<div class="k-edit-label">    Color</div><div data-container-for="color" class="k-edit-field">    <div class="k-widget k-colorpalette" data-bind="value:Color" id="Color"></div><script>\tjQuery(function(){jQuery("#Color").kendoColorPalette({"palette":["';f0d0c9",";o+='e2a293","';d4735e",";o+='65281a","';eddfda",";o+='dcc0b6","';cba092",";o+='7b4b3a","';fcecd5",";o+='f9d9ab","';f6c781",";o+='c87d0e","';e1dca5",";o+='d0c974","';a29a36",";o+='514d1b","';c6d9f0",";o+='8db3e2","';548dd4",";o+='17365d"],"columns":4,"value":"';f0d0c9","tileSize":{"width":34,"height":19}});});</script></div>;o+=;}return o;

[Petur Subev]

Hello Matt,

The problem looks to be coming from the unescaped sharp symbols. Could you please try to either omit or to escape the sharp symbols ? The sharp symbols does not look to be needed when defining the palette.

so you can use directly "4f6128" instead of "#4f6128"

Here is the JavaScript equivalent which is working:

http://dojo.telerik.com/eJik

Let me know your findings.

Kind Regards,
Petur Subev
Telerik

 

 

[Edward]

Thanks for your reply.  
I don't get the invalid template error but I do get "Cannot parse color" error.  Can you use this SchedulerCustomeditor for demonstration to get the color picker binding/working?

Here's the template:

@model GIS.Services.Pulse.Types.Models.TaskAsset
@{
    //required in order to render validation attributes
    ViewContext.FormContext = new FormContext();
}

@functions{
    public Dictionary<string, object> generateDatePickerAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {

        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

        datePickerAttributes["id"] = elementId;
        datePickerAttributes["name"] = fieldName;
        datePickerAttributes["data-bind"] = dataBindAttribute;
        datePickerAttributes["required"] = "required";
        datePickerAttributes["style"] = "z-index: inherit;";

        return datePickerAttributes;
    }
}

<div class="k-edit-label">
    @(Html.LabelFor(model => model.Title))
</div>
<div data-container-for="Title" class="k-edit-field">
    @(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.Start))
</div>
<div data-container-for="Start" class="k-edit-field">

    @(Html.Kendo().DateTimePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes(
        "startDateTime",
        "start",
        "value:start,invisible:isAllDay")))

    @(Html.Kendo().DatePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes(
        "startDate",
        "start",
        "value:start,visible:isAllDay")))


    <span data-for="Start" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.End))
</div>
<div data-container-for="End" class="k-edit-field">

    @(Html.Kendo().DateTimePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDateTime",
            "end",
            "value:end,invisible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

    @(Html.Kendo().DatePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDate",
            "end",
            "value:end,visible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))


    <span data-for="End" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.IsAllDay))
</div>
<div data-container-for="isAllDay" class="k-edit-field">
    <input data-bind="checked: isAllDay" data-val="true" id="isAllDay" name="isAllDay" type="checkbox" />
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.RecurrenceRule))
</div>
<div data-container-for="RecurrenceRule" class="k-edit-field">
    @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
        .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.Description))
</div>
<div data-container-for="description" class="k-edit-field">
    @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
</div>

<div class="k-edit-label">
    Asset
</div>
<div data-container-for="AssetID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.AssetID)
        .HtmlAttributes(new { data_bind = "value:AssetID", style = "width: 400px" })
        .DataTextField("Name")
        .DataValueField("AssetID")
        .OptionLabel("Select")
        .ValuePrimitive(true)
        .DataSource(ds => ds.Read("Assets", "Asset"))
        .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Owner
</div>
<div data-container-for="OwnerID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.OwnerID)
          .HtmlAttributes(new { data_bind = "value:OwnerID", style = "width: 400px" })
          .DataTextField("DisplayName")
          .DataValueField("UserID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("Users", "Users"))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Work Type
</div>
<div data-container-for="WorkTypeID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.WorkTypeID)
          .HtmlAttributes(new { data_bind = "value:WorkTypeID", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("WorkTypeID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("WorkTypes", "MaintenanceSchedule"))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Duration Freq
</div>
<div data-container-for="DurationFreq" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.DurationFreq)
          .HtmlAttributes(new { data_bind = "value:DurationFreq", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("ID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("Frequency", "UnitOfMeasure"))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Duration UOM
</div>
<div data-container-for="DurationUomId" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.DurationUomId)
          .HtmlAttributes(new { data_bind = "value:DurationUomId", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("UnitOfMeasureID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("UnitOfMeasures", "UnitOfMeasure", new { type = 1 }))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Grace Period Freq
</div>
<div data-container-for="GraceFreq" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.GraceFreq)
          .HtmlAttributes(new { data_bind = "value:GraceFreq", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("ID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("Frequency", "UnitOfMeasure"))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Grace Period UOM
</div>
<div data-container-for="GraceUomId" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.GraceUomId)
          .HtmlAttributes(new { data_bind = "value:GraceUomId", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("UnitOfMeasureID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("UnitOfMeasures", "UnitOfMeasure", new { type = 1 }))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Color
</div>
<div data-container-for="Color" class="k-edit-field">
    @(Html.Kendo().ColorPalette()
        .Name("Color")
        .Value("f0d0c9")
        .HtmlAttributes(new { data_bind = "value:Color" })
        .Columns(4)
        .TileSize(s => s.Width(34).Height(19))
        .Palette(new string[] {
            "f0d0c9", "e2a293", "d4735e", "65281a",
            "eddfda", "dcc0b6", "cba092", "7b4b3a",
            "fcecd5", "f9d9ab", "f6c781", "c87d0e",
            "e1dca5", "d0c974", "a29a36", "514d1b",
            "c6d9f0", "8db3e2", "548dd4", "17365d"
        })
     )
</div>

@{
    ViewContext.FormContext = null;
}

Here's the scheduler:

@using System.Reflection.Emit
@using GIS.Authorization.Helper
@using Kendo.Mvc.UI
@model GIS.Portal.Pulse.Models.ScheduleViewModel

@{
    ViewBag.Title = "Pulse";
    Layout = "~/Views/Shared/_Layout_Schedule.cshtml";
    var user = Helper.GetUserId((FormsIdentity)User.Identity);
}
<script>
    $(function () {

        var scheduler = $("#scheduler").data("kendoScheduler");
    });

    function error_handler(args) {
        if (args.errors) {
            var message = "Errors:\n";
            $.each(args.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);

            //var scheduler = $("#scheduler").data("kendoScheduler");
            //scheduler.one("dataBinding", function (e) {
            //    //prevent saving if server error is thrown
            //    e.preventDefault();

            //    for (var error in args.errors) {
            //        showMessage(scheduler.editable.element, error, args.errors[error].errors);
            //    }
            //});
        }
    }

    function changeFilter(asset, owner) {
        var scheduler = $("#scheduler").data("kendoScheduler");

        if (asset == 0 &&
            owner == "00000000-0000-0000-0000-000000000000") {
            scheduler.dataSource.filter([]);
        }
        else if (asset != 0 &&
            owner != "00000000-0000-0000-0000-000000000000") {
            var filter = {
                logic: "and",
                filters: [
                    {
                        operator: "eq",
                        field: "AssetID",
                        value: asset
                    },
                    {
                        operator: "eq",
                        field: "OwnerID",
                        value: owner
                    }
                ]
            };
            scheduler.dataSource.filter(filter);
        }
        else if(asset != 0 ) {
            var assetFilter = {
                logic: "or",
                filters: [
                    {
                        operator: "eq",
                        field: "AssetID",
                        value: asset
                    }
                ]
            };
            scheduler.dataSource.filter(assetFilter);
        }
        else if (owner != "00000000-0000-0000-0000-000000000000") {
            var ownerFilter = {
                logic: "or",
                filters: [
                    {
                        operator: "eq",
                        field: "OwnerID",
                        value: owner
                    }
                ]
            };
            scheduler.dataSource.filter(ownerFilter);
        }
    }

    function assetChange() {
        var assetSelection = parseInt(this.value());
        var ownerSelection = $("#ownerDropDownList").data("kendoDropDownList");
        if (ownerSelection == null) {
            changeFilter(assetSelection, null);
        } else {
            changeFilter(assetSelection, ownerSelection.value());
        }
    }

    function userChange() {
        var ownerSelection = this.value().toString();
        var assetSelection = $("#assetDropDownList").data("kendoDropDownList");
        if (assetSelection == null) {
            changeFilter(0, ownerSelection);
        } else {
            changeFilter(parseInt(assetSelection.value()), ownerSelection);
        }
    }

    function scheduler_dataBound(e) {
        var scheduler = this;
        var view = scheduler.view();

        view.table.find("div[role=gridcell]").each(function() {
            if ($(this) != null) {
                var element = $(this);
                if (element != null) {
                    element.addClass("backgroundTransparent");
                }
            }
        });
    }

    //function showMessage(container, name, errors) {
    //    //add the validation message to the form
    //    var ele = container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]");
    //    ele.replaceWith(validationMessageTmpl({ field: name, message: errors[0] }));
    //}
</script>

@*<script type="text/kendo-template" id="message">
        <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
            <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div>
        </div>
    </script>*@

<div style="margin-left: 30px; margin-bottom: 20px; margin-top: 20px; display: inline-table;">
    Asset:
    @(Html.Kendo().DropDownList()
          .Name("assetDropDownList")
          .DataTextField("AssetName")
          .DataValueField("AssetID")
          .DataSource(ds => ds.Read("TaskAssets", "Asset"))
          .Events(events => events.Change("assetChange"))
     )
</div>

<div style="margin-left: 30px; margin-bottom: 20px; margin-top: 20px; display: inline-table;">
    Owner:
    @(Html.Kendo().DropDownList()
          .Name("ownerDropDownList")
          .DataTextField("DisplayName")
          .DataValueField("UserID")
          .DataSource(ds => ds.Read("TaskUsers", "Users"))
          .Events(events => events.Change("userChange"))
    )
</div>

@(Html.Kendo().Scheduler<GIS.Services.Pulse.Types.Models.TaskAsset>()
    .Name("scheduler")
    .Date(Model.Date)
    .StartTime(Model.Date)
    .Height(800)
    .AllDayEventTemplate(
        "<div class='asset-task' style='color: black; background-color: \\##= Color #' title='#= title # \nAsset: #= AssetName # \nOwner: #= OwnerName #'>" +
            "<strong>#= title #</strong>" +
            "<p>" +
                "<strong>Asset: </strong>#= AssetName #" +
                "<br>" +
                "<strong>Owner: </strong>#= OwnerName #" +
            "</p>" +
        "</div>"
    )
    .EventTemplate(
       "<div class='asset-task' style='color: black; background-color: \\##= Color #' title='#= title # \nAsset: #= AssetName # \nOwner: #= OwnerName #'>" +
            "<strong>#= title #</strong>" +
            "<p>" +
                "<strong>Asset: </strong>#= AssetName #" +
                "<br>" +
                "<strong>Owner: </strong>#= OwnerName #" +
            "</p>" +
        "</div>"
    )
    .Events(e => e.DataBound("scheduler_dataBound"))
    .Views(views =>
    {
        views.DayView();
        views.WorkWeekView();
        views.WeekView();
        views.MonthView(monthView => monthView.Selected(true)).EventHeight(70);
        views.AgendaView();
    })
    .Editable(editable => editable.TemplateName("TaskAssetEditorTemplate"))
    .Timezone("Etc/UTC")
        .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.TaskID);
                m.Field(f => f.Title).DefaultValue("No title");
                m.RecurrenceId(f => f.RecurrenceID);
            })
        .Read("TaskAssetRead", "Scheduler")
        .Create("TaskAssetCreate", "Scheduler")
        .Destroy("TaskAssetDestroy", "Scheduler")
        .Update("TaskAssetUpdate", "Scheduler")
    )
)

<style scoped>
    .backgroundTransparent {
        background-color: transparent;
        border-color: transparent;
    }

    .asset-task {
        -moz-border-radius: 20px;
         /*-moz-border-radius-topleft: 30px 15px;
         -moz-*/
        border-radius-bottomright: 30px 15px;
        border-radius: 20px;
         /*border-top-left-radius: 30px 15px;
         border-bottom-right-radius: 30px 15px;*/
     }

    .asset-task p {
        padding: 0 8px 5px;
        margin: 5px 0 0;
        color: black;
    }

    .asset-task strong {
        padding: 0 8px 5px;
        margin: 5px 0 0;
        color: black;
    }

    .asset-task h3 {
        padding: 0 8px 5px;
        font-size: 12px;
    }

    body, h1, h2, h3 {
        margin: 0px;
        color: black;
    }

    .configuration {
        padding-left: 5px;
        margin-bottom: 5px;
    }
</style>

and  the Model:

public class TaskAsset : ITaskSchedulerEvent, ISchedulerEvent
{
    /// <summary>The start.</summary>
    [DataMember]
    private DateTime m_start;

    /// <summary>The end.</summary>
    [DataMember]
    private DateTime m_end;

    /// <summary>Gets or sets the task id.</summary>
    [DataMember]
    public int TaskID { get; set; }

    /// <summary>Gets or sets the <see cref="Asset"/> id.</summary>
    [DataMember]
    [Required]
    public int AssetID { get; set; }

    /// <summary>Gets or sets the <see cref="Asset"/> name.</summary>
    [DataMember]
    public string AssetName { get; set; }

    /// <summary>Gets or sets the description.</summary>
    [DataMember]
    public string Description { get; set; }

    /// <summary>Gets or sets the owner id.</summary>
    [DataMember]
    [Required]
    public Guid? OwnerID { get; set; }

    /// <summary>Gets or sets the owner name.</summary>
    [DataMember]
    public string OwnerName { get; set; }

    /// <summary>Gets or sets the end.</summary>
    [DataMember]
    public DateTime End
        {
            get
            {
                return this.m_end;
            }
            set
            {
                this.m_end = value.ToUniversalTime();
            }
        }

    /// <summary>Gets or sets the end time zone.</summary>
    [DataMember]
    public string EndTimezone { get; set; }

    /// <summary>Gets or sets a value indicating whether is all day.</summary>
    [DataMember]
    public bool IsAllDay { get; set; }

    /// <summary>Gets or sets the recurrence exception.</summary>
    [DataMember]
    public string RecurrenceException { get; set; }

    /// <summary>Gets or sets the recurrence rule.</summary>
    [DataMember]
    public string RecurrenceRule { get; set; }

    /// <summary>Gets or sets the start.</summary>
    [DataMember]
    public DateTime Start
        {
            get
            {
                return this.m_start;
            }
            set
            {
                this.m_start = value.ToUniversalTime();
            }
        }

    /// <summary>Gets or sets the start time zone.</summary>
    [DataMember]
    public string StartTimezone { get; set; }

    /// <summary>Gets or sets the title.</summary>
    [DataMember]
    public string Title { get; set; }

    /// <summary>Gets or sets the recurrence id.</summary>
    [DataMember]
    public int? RecurrenceID { get; set; }

    /// <summary>Gets or sets the create date.</summary>
    [DataMember]
    public DateTime CreateDate { get; set; }

    /// <summary>Gets or sets the create user.</summary>
    [DataMember(IsRequired = false)]
    public Guid? CreateUser { get; set; }

    /// <summary>Gets or sets the <see cref="WorkType"/> id.</summary>
    [DataMember]
    [Required]
    public int WorkTypeID { get; set; }

    /// <summary>Gets or sets the duration <see cref="UnitOfMeasure"/> id.</summary>
    [DataMember]
    public int? DurationUomId { get; set; }

    /// <summary>Gets or sets the duration <see cref="UnitOfMeasure"/> name.</summary>
    [DataMember]
    public string DurationUomName { get; set; }

    /// <summary>Gets or sets the duration frequency.</summary>
    [DataMember]
    public int? DurationFreq { get; set; }

    /// <summary>Gets or sets the grace <see cref="UnitOfMeasure"/> id.</summary>
    [DataMember]
    public int? GraceUomId { get; set; }

    /// <summary>Gets or sets the grace <see cref="UnitOfMeasure"/> name.</summary>
    [DataMember]
    public string GraceUomName { get; set; }

    /// <summary>Gets or sets the grace frequency.</summary>
    [DataMember]
    public int? GraceFreq { get; set; }

    /// <summary>Gets or sets the color for the <see cref="Asset"/>.</summary>
    [DataMember]
    public string Color { get; set; }
}

[Petur Subev]

Hello Matt,

Please let's continue the conversation in the support ticket or here. It is not convenient to track two threads on the same subject. I am not sure I understand what you mean, could you please modify the demo and give concrete steps to follow to reproduce the problem. The last demo that I shared (it is in the other thread) contains the color picker - modify the project and give steps to follow to reproduce the issue.

Thank you for the cooperation.

Kind Regards,
Petur Subev
Telerik