Resources - I don't understand the mapping

6 posts, 0 answers
  1. Aaron
    Aaron avatar
    18 posts
    Member since:
    Nov 2012

    Posted 30 Jul 2013 Link to this post

    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;
                                }
                            }
                        }
                         
                    }
                ]
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 31 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Roderick Prince
    Roderick Prince avatar
    29 posts
    Member since:
    May 2004

    Posted 15 May 2014 in reply to Rosen Link to this post

    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>
  5. Roderick Prince
    Roderick Prince avatar
    29 posts
    Member since:
    May 2004

    Posted 15 May 2014 Link to this post

    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>


  6. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 16 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Roderick Prince
    Roderick Prince avatar
    29 posts
    Member since:
    May 2004

    Posted 16 May 2014 in reply to Rosen Link to this post

    Pulled sub-conversation into a new thread: http://www.telerik.com/forums/using-scheduler-resources-in-custom-editor
Back to Top
Kendo UI is VS 2017 Ready