Resources - I don't understand the mapping

[Aaron]

In the scheduler demo, how are the resources mapped from "Text, Value, Color" to "ownerId"?

resources: [
            {
                field: "ownerId",
                title: "Owner",
                dataSource: [
                    { text: "Alex", value: 1, color: "#f8a398" },
                    { text: "Bob", value: 2, color: "#51a0ed" },
                    { text: "Charlie", value: 3, color: "#56ca85" }
                ]
            }
        ]

Here is what I am trying to do, I have to transform my data and I don't understand how to maps this example data source to"ownerId"?

resources: [
                {
                    field: "ownerId",
                    title: "Owner",
                    dataSource:
                    {
                        type: "json",
                        transport:
                        {
                            read: {
                                url: "/api/_Users?filter=(IsUser%20eq%201)",
                                type: "GET"
                            }
                        },

                        schema:
                        {
                            parse: function(response)
                            {
                                var users = [];
                                var inner = response.results;
                                for (var i = 0; i < inner.length; i++)
                                {
                                    var user = {
                                        text: inner[i].Attributes.FirstName,
                                        value: inner[i].Attributes.Id,
                                        color: "#ff0000"
                                    }
                                }

                                users.push(user);

                                return users;
                            }
                        }
                    }

                }
            ]

[Rosen]

Hi Aaron,

As described in the documentation the resource field options is the name of the field in the event which points to concrete resource's value field.

$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview",
      roomId: 1 // the event is held in "Small meeting room" whose value is 1
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting",
      roomId: 2 // the event is held in "Big meeting room" whose value is 2
    }
  ],
  resources: [
    {
      field: "roomId",
      dataSource: [
        { text: "Small meeting room", value: 1 },
        { text: "Big meeting room", value: 2 }
      ]
    }
  ]
});

Regards,
Rosen
Telerik

[Roderick Prince]

Additional misunderstanding of sample code (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>

[Roderick Prince]

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>

[Rosen]

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.

Regards,
Rosen
Telerik

 

 

[Roderick Prince]

Pulled sub-conversation into a new thread: http://www.telerik.com/forums/using-scheduler-resources-in-custom-editor