Using scheduler Resources in Custom Editor

6 posts, 0 answers
  1. Roderick Prince
    Roderick Prince avatar
    29 posts
    Member since:
    May 2004

    Posted 16 May 2014 Link to this post

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

    Posted 16 May 2014 in reply to Roderick Prince Link to this post

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

    Posted 22 May 2014 in reply to Roderick Prince Link to this post

    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>



  4. Robert
    Robert avatar
    10 posts
    Member since:
    Mar 2015

    Posted 17 Mar 2015 Link to this post

    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.
  5. Robert
    Robert avatar
    10 posts
    Member since:
    Mar 2015

    Posted 17 Mar 2015 in reply to Robert Link to this post

    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());
            }
  6. yaron
    yaron avatar
    3 posts
    Member since:
    Feb 2015

    Posted 28 Apr 2015 in reply to Robert Link to this post

    THANK YOU !! :)

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

Back to Top