Using scheduler Resources in Custom Editor

[Roderick Prince]

In SchedulerCustomerEditor sample related to resources and custom templates... Why do you include a resources section in the scheduler definition, but then not use those in the custom edit template?​ $(function () {
  $("#scheduler").kendoScheduler({
   date: new Date(2013, 5, 13, 0, 0, 0, 0),
   startTime: new Date(2013, 5, 13, 7, 0, 0, 0),
   height: 600,
   editable: {
    //set the template
    template: kendo.template($('#CustomEditorTemplate').html())
   },
   timezone: "Etc/UTC",
   resources: [
   {
    title: "Room",
    field: "RoomID",
    dataTextField: "Text",
    dataValueField: "Value",
    dataColorField: "Color",
   dataSource: [
    { Text: "Meeting Room 101", Value: 1, Color: "#6eb3fa" },
    { Text: "Meeting Room 201", Value: 2, Color: "#f58a8a" }
   ]
    },{
    title: "Attendees",
    field: "Attendees",
    multiple: true,
    dataTextField: "Text",
    dataValueField: "Value",
    dataColorField: "Color",
   dataSource: [
   { Text: "Alex", Value: 1, Color: "#f8a398" },
   { Text: "Bob", Value: 2, Color: "#51a0ed" },
   { Text: "Charlie", Value: 3, Color: "#56ca85" }
   ]
  }
 ],
...
 <script type="text/x-kendo-template" id="CustomEditorTemplate">
 ... other markup ...
  <div data-container-for="RoomID" class="k-edit-field">
   <input id="RoomID" name="RoomID" style="width: 200px" type="text"
    data-bind="value:RoomID"
    data-val="true"
    data-val-number="The field RoomID must be a number."
   data-source='[{"text":"Meeting Room 101","value":1},{"text":"Meeting Room 201","value":2}]'
    data-text-field="text"
    data-value-field="value"
    data-value-primitive="true"
    data-option-label="None"
    data-role="dropdownlist" />
  </div>


In the template, shouldn't the resources be referenced in a way that is similar to the following though in this case the resources[0] reference does not find the resource...

​<div data-container-for="sponsorid" class="k-edit-field">
    <input id="SponsorID" name="SponsorID" style="width: 200px" type="text"
           data-bind="value:SponsorID"
           data-val="true"
           data-val-number="The field SponsorID must be a number."
           data-source=resources[0].dataSource
           data-text-field=resources[0].dataTextField
           data-value-field=resources[0].dataValueField
           data-value-primitive="true"
           data-option-label="*No Sponsor"
           data-role="dropdownlist" />
< /div>

The above not finding resources[0] which is odd because it finds it from the following script:
< div class="k-edit-field" id="resourcesContainer" />
< script>
    jQuery(function() {
        var container = jQuery("#resourcesContainer");
        var resources = jQuery("#scheduler").data("kendoScheduler").resources;

        for( resource = 0; resource<resources.length; resource++)
        {
            if(resources[resource].multiple)
            {
                jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[resource].field))
                  .appendTo(container)
                  .kendoMultiSelect({
                      dataTextField: resources[resource].dataTextField,
                      dataValueField: resources[resource].dataValueField,
                      dataSource: resources[resource].dataSource,
                      valuePrimitive: resources[resource].valuePrimitive,
                      itemTemplate: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField),
                      tagTemplate: kendo.format('<span class="k-scheduler-mark" style="background-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(container)
                 .kendoDropDownList({
                     dataTextField: resources[resource].dataTextField,
                     dataValueField: resources[resource].dataValueField,
                     dataSource: resources[resource].dataSource,
                     valuePrimitive: resources[resource].valuePrimitive,
                     optionLabel: "None",
                     template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                 });
            }
        }
})
< /script>

[Roderick Prince]

Response from Telerik:

​Hello Roderick,

The declarative binding will not work as the resources variable will need to be a global variable in order to be resolved via the source attribute. The second code snippet works as the resources are within the same scope with the MultiSelect widget's initialization.

On a side note. As your question is not related to the topic's original question, I would ask you to consider opening a separate support request if additional questions arise. "EDIT - Pulled this thread and made it standalone per this request"

Regards,
Rosen
Telerik

[Roderick Prince]

The template engine is Teleriks - one would think the template parsing logic would have accounted for accessing resources from a template after all isn't that why they are there. Getting the overall impression that KendoUI is less than half-baked and I wish I would have looked elsewhere for a scheduler control.

To get around this deficiency I am doing the following

                <div class="k-edit-label">
                    Event Type:
                </div>
                <div class="k-edit-field" id="eventTypes" />


<script>
    function createResourceSelectOptions(container, resourceIdx) {
        var resources = jQuery("#scheduler").data("kendoScheduler").resources;

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

    jQuery(function () {
       var idxEventTypes = 0;
        var eventTypes = jQuery("#eventTypes");
        createResourceSelectOptions(eventTypes, idxEventTypes);
    });

    jQuery(function () {
        jQuery("#viewTabs").kendoTabStrip();
        jQuery("#editTabs").kendoTabStrip();
    });
</script>

[Robert]

Hi Rosen,

I would appreciate it if you could give some reference or example of how we can simply achieve populating and binding the resource in a custom editor to the datasource. I'm using Angular but keen to get an example of a simple way of achieving this.

Thanks,
Rob.

[Robert]

Found it :)

edit: function(e) {
          var ownerId = e.container.find("#ownerId").data("kendoDropDownList");
          var recurrenceEditor = e.container.find("[data-role=recurrenceeditor]").data("kendoRecurrenceEditor");
          
          recurrenceEditor.setOptions({
            start: e.event.start
          });
          
          //bind the widget to the resouces
          ownerId.dataSource.data(e.sender.resources[0].dataSource.data());
        }

[yaron]

THANK YOU !! :)

why r they hiding this code from us in the demo section