Additional Field in Template

[Christian]

Hi there,

I want to add a ajax backed ComboBox item into the form template for selecting a company.
(I do not want to use the ressources functionality for that)

The form is working correctly, but the CompanyId ist not transferred in the server request for saving the event.
Am I blind? What am I missing here?

My Scheduler:

@(Html.Kendo().Scheduler<ScheduleViewModel>()
      .Name("Schedules")
      .AutoBind(false)
     .DateHeaderTemplate("<strong>#=kendo.toString(date, 'ddd., d. MMM.')#</strong>")
      .AllDayEventTemplateId("event-template")
      .EventTemplateId("event-template")
      .Mobile(MobileMode.Auto)
      .Date(DateTime.Today)
      .Editable(e => e.TemplateId("editor-template"))
      .Views(views => {
          views.DayView(i => i.ShowWorkHours(true));
          views.WorkWeekView(i => i.Selected(true).ShowWorkHours(true));
          views.WeekView(i => i.ShowWorkHours(true));
          views.MonthView();
          views.AgendaView();
      })
      .Events(events => events.DataBound("onDataBound"))
      .Timezone("Europe/Vienna")
      .ShowWorkHours(true)
      .Resources(res => {
          res.Add(i => i.ScheduleType)
              .Name("ScheduleType")
              .Title("Termintyp")
              .BindTo(new[] {
                  new {Name = "Intern", Id = 1, Color = "#43ac6a"},
                  new {Name = "Extern", Id = 2, Color = "#5bc0de"},
                  new {Name = "Abwesend", Id = 3, Color = "#ccc"}
              })
              .DataValueField("Id")
              .DataTextField("Name")
              .DataColorField("Color");

          res.Add(i => i.UserIDs)
              .Name("Users")
              .Title("Teilnehmer")
              .DataSource(dataSource => dataSource
                  .Read(read => read.Action("_Schedule", "Account")))
              .DataValueField("Id")
              .DataTextField("Name")
              .DataColorField("Color")
              .Multiple(true);

      }
      )
      .DataSource(dataSource => dataSource
          .Model(model => {
              model.Id(i => i.Id);
              model.Field(i => i.ScheduleType).DefaultValue(0);
              model.Field(i => i.CompanyId).Editable(true);
          })
          .Read(read => read.Action("_Index", "Schedule").Data("updateGrid"))
          .Create(create => create.Action("_Create", "Schedule"))
          .Update(update => update.Action("_Edit", "Schedule"))
          .Destroy(destroy => destroy.Action("_Delete", "Schedule"))
      ))

My template:

<script id="editor-template" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="title">Titel</label>
    </div>
    <div class="k-edit-field" data-container-for="title">
        <input name="title" class="k-input k-textbox" type="text" data-bind="value:title">
    </div>

    <div class="k-edit-label">
        <label for="companyid">Firma</label>
    </div>
    <div class="k-edit-field" data-container-for="companyid">
        @(Html.Kendo().ComboBox()
                  .Name("CompanyId")
                  .HtmlAttributes(new { data_bind = "value:CompanyId"})
                  .DataSource(source => source.Read("Autocomplete", "Company").ServerFiltering(true))
                  .DataTextField("name")
                  .DataValueField("id")
                  .Filter(FilterType.StartsWith)
                  .Placeholder("Firma wählen...")
                  .ToClientTemplate()
        )
    </div>

    <div class="k-edit-label">
        <label for="start">Beginn</label>
    </div>
    <div class="k-edit-field" data-container-for="start">
        <input name="start" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" />
        <input name="start" type="text" required data-type="date" data-role="datepicker" data-bind="value: start,visible: isAllDay" />
    </div>

    <div class="k-edit-label">
        <label for="end">Ende</label>
    </div>
    <div class="k-edit-field" data-container-for="end">
        <input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end ,invisible:isAllDay" />
        <input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end ,visible:isAllDay" />
    </div>

    <div class="k-edit-label">
        <label for="isAllDay">Ganztägig</label>
    </div>
    <div class="k-edit-field" data-container-for="isAllDay">
        <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
    </div>

    <div class="k-edit-label">
        <label for="description">Bechreibung</label>
    </div>
    <div class="k-edit-field" data-container-for="description">
        <textarea name="description" class="k-textbox" data-bind="value:description"></textarea>
    </div>



    <div class="k-edit-label">
        <label for="recurrenceRule">Wiederholen</label>
    </div>
    <div data-container-for="recurrenceRule" class="k-edit-field">
        <div data-bind="value:recurrenceRule" id="recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
    </div>


    <div id="resourcesContainer">
    </div>



    <script>
        jQuery(function() {
            var container = jQuery("\#resourcesContainer");
            var resources = jQuery("\#Schedules").data("kendoScheduler").resources;
            dbg = resources;
            for( var resource = 0; resource<resources.length; resource++) {
                jQuery(kendo.format('<div class="k-edit-label"><label for="{0}">{1}</label></div>', resources[resource].name, resources[resource].title))
                      .appendTo(container)

                var labcont = jQuery(kendo.format('<div class="k-edit-field"></div>'))
                      .appendTo(container)

                if(resources[resource].multiple)                 {
                    jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[resource].field))
                      .appendTo(labcont)
                      .kendoMultiSelect({
                          dataTextField: resources[resource].dataTextField,
                          dataValueField: resources[resource].dataValueField,
                          dataSource: resources[resource].dataSource,
                          valuePrimitive: resources[resource].valuePrimitive,
                          itemTemplate: kendo.format('<span class="glyphicon glyphicon-user" style="color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField),
                          tagTemplate: kendo.format('<span class="glyphicon glyphicon-user" style="color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                      });

                } else {
                    jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[resource].field))
                     .appendTo(labcont)
                     .kendoDropDownList({
                         dataTextField: resources[resource].dataTextField,
                         dataValueField: resources[resource].dataValueField,
                         dataSource: resources[resource].dataSource,
                         valuePrimitive: resources[resource].valuePrimitive,
                         optionLabel: "Unbestimmt",
                         template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                     });
                }
            }

        });
        messageTranslate();
        <\/script>

    </script>

many thanks,
Chris

[Christian]

I am not quite sure, what caused the problems but I have found a solution:

Instead of the MVC wrapper I use a MVVM bound input element:
        <input name="CompanyId" type="text" id="CompanyId" data-role="combobox" data-source="companyDataSource" data-text-field="name" data-value-field="id" data-bind="value:CompanyId" data-placeholder="Firma wählen..." data-value-primitive="true" />


kr, Chris

[Georgi Krustev]

Hello Chris,

I believe that the ComboBox MVC wrapper does not set the valuePrimitive option to true. Adding ValuePrimitive(true) should solve the problem:

@(Html.Kendo().ComboBox()
    .Name("CompanyId")
    .ValuePrimitive(true)
    .HtmlAttributes(new { data_bind = "value:CompanyId"})
    .DataSource(source => source.Read("Autocomplete", "Company").ServerFiltering(true))
    .DataTextField("name")
    .DataValueField("id")
    .Filter(FilterType.StartsWith)
    .Placeholder("Firma wählen...")
    .ToClientTemplate()
)

Regards,
Georgi Krustev
Telerik