Additional Field in Template

3 posts, 0 answers
  1. Christian
    Christian avatar
    31 posts
    Member since:
    Jul 2014

    Posted 10 Nov 2014 Link to this post

    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
  2. Christian
    Christian avatar
    31 posts
    Member since:
    Jul 2014

    Posted 11 Nov 2014 in reply to Christian Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 12 Nov 2014 Link to this post

    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
     

    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.

     
Back to Top