how to bind drop down in edit template of kendo scheduler? - kendo-ui

Question

I am working on kendo scheduler and I need to add some extra text box and dropdowns to the create and edit of scheduler. I know extra dropdown can be added by adding the resource to scheduler, but in case of adding extra text box we have to add edit template. but in custom template I am not able to add the dropdown list for user appointment type with color specification. I have added a simple drop-down but with no color specification. I have this so far:
here is my .cshtml view code
#model List<FW.Model.UserColor>
#using Kendo.Mvc.UI;
#using Fairwater.UI.Filters
#using FW.Common.Helper
#using Fairwater.UI.Helper
<h5>Scheduler</h5>
<div class="row">
<div class="col-md-12">
#(Html.Kendo().Scheduler<FW.Model.Appointments>()
.Name("scheduler1")
.Date(new DateTime(2015, 11, 11))
.Editable(e => e.TemplateId("editor").Create(true).Confirmation(true))
.Height(600)
.Width(1000)
.EndTime(new DateTime(2025,11,11,7,00,00))
.Views(views =>
{
// views.DayView();
// views.WeekView(weekView => weekView.Selected(true));
views.MonthView(monthviw=>monthviw.Selected(true));
})
.Timezone("Etc/UTC")
//.Resources(resource =>
// {
// resource.Add(m => m.BackgroundId)
// .Title("Background")
// .DataTextField("BackgroundName")
// .DataValueField("BackgroundId")
// .Name("Background")
// .DataColorField("Color")
// .DataSource(x => x.Read(rs => rs.Action("GetBackgroundTypes", "Schedule", new { area = "Crew" })));
// })
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.AppointmentId);
m.Field(f => f.Title).DefaultValue("No title");
// m.RecurrenceId(f => f.RecurrenceID);
m.Field(f => f.Title).DefaultValue("No title");
})
.Read("CrewSchedulerRead", "Schedule")
.Create("CreateAppointment", "Schedule")
.Destroy("Appointment_Destroy", "Schedule")
.Update("Appointment_Update", "Schedule")
.Events(x => x.Error("expError"))
)
)
</div>
</div>
<script id="editor" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="title">Subject</label>
</div>
<div class="k-edit-field" data-container-for="title">
<input type="text" class="k-input k-textbox" name="title" data-bind="value: title">
</div>
<div class="k-edit-label">
<label for="title">Location</label>
</div>
<div class="k-edit-field" data-container-for="Location">
<input type="text" class="k-input k-textbox" name="Location" data-bind="value: Location" style="width:100%;">
</div>
<div class="k-edit-label">
<label for="BackgroundId">Background</label>
</div>
<div data-container-for="BackgroundId" class="k-edit-field">
<select id="BackgroundId" data-bind="value:BackgroundId" data-template="" data-role="dropdownlist" data-value-field="value" data-text-field="text">
#foreach (var item in Model)
{
<option style="background-color:red" value="#item.BackgroundId">#item.BackgroundName</option>
}
</select>
</div>
<div class="k-edit-label">
<label for="recurrenceRule">Repeat</label>
</div>
<div class="k-edit-field" data-container-for="recurrenceRule">
<div data-bind="value: recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
</div>
</script>
I don't now am I on the right path or not, but I think I am close of it.
Thats what I have till now
That's what I want more, the color dorpdown. Any help or suggestion would be appreciated. Thanks in advance. If anything not clear about my question please let me know in comments, I will happy to explain. Please help.

Answer 1

you can add how many dropdowns or any other controls using resourses as
.Resources(resource =>
{
resource.Add(m => m.OwnerID)
.Title("Trainers")
.DataTextField("EMPNAME")
.DataValueField("EMPID")
.DataColorField("COLORCODE")
.BindTo(#ViewBag.trainers);
resource.Add(m => m.TypeID)
.Title("Type")
.Name("maintype")
.DataTextField("TYPENAME")
.DataValueField("TYPECODE")
.BindTo(#ViewBag.lsttypes);
})