Limit scheduler resource List via javascript

[Logan]

I have a scheduler that is in a similar to https://demos.telerik.com/kendo-ui/scheduler/index but I need to limit the available Owner list on the edit/create dialog to the people that are selected at the top.  For instance you should not be able to set Alex as the owner if their calendar is how showing.

I have attached to the edit event on the scheduler and can interact with elements on the edit form, but $('#ownerId').data("kendoDropDownList") returns undefined so i am not sure how i can remove unselected people from the list.

 

TIA,

-Logan

 

 

[Dimitar]

Hello Logan,

To properly get a reference to the owners DropDownList inside the Scheduler's edit form, the event container field can be used as follows:

$("#scheduler").kendoScheduler({
  ...
  edit: function(e) {
    var editForm = e.container;
    var ownerSelectElement = editForm.find("[data-bind='value:ownerId']");

    if(ownerSelectElement.length > 0) {
      var ownerDDL = ownerSelectElement.getKendoDropDownList();
      console.log(ownerDDL);
    }
  }
});

Then, depending on the list of checked items you should be able to dynamically change the dataSource of the DropDownList through the setDataSource() method of the widget:

<script>
  var dataSource = new kendo.data.DataSource({
    data: [
      { text: "Alex", value: 1, color: "#f8a398" },
      { text: "Bob", value: 2, color: "#51a0ed" },
      { text: "Charlie", value: 3, color: "#56ca85" }
    ]
  });

  ownerDDL.setDataSource(dataSource);
</script>

Regards,
Dimitar
Progress Telerik

[Logan]

Thanks for responding.  I feel like I am close but am still getting something strange. https://imgur.com/a/lDOBjan

Thanks,

Logan

 

My Edit Code

01.function scheduler_edit(e) {
02.    var editForm = e.container;
03.    if (isNullish(e.container) == false) {
04.        editForm.find("[data-role='recurrenceeditor'], [for='recurrenceRule']").parent().remove();
05.        editForm.find("[name='isAllDay'], [for='isAllDay']").parent().remove();
06.
07.        attendeeEl = editForm.find("[data-bind='value:Attendees']");
08.        if (attendeeEl.length > 0) {
09.            var ddl = attendeeEl.getKendoDropDownList();
10.            var dataList = [];
11.            $("[name^='AttendeesToInclude[']:checked").each(function () {
12.                dataList.push({
13.                    text: $(this).data("text"),
14.                    value: $(this).data("val"),
15.                    color: $(this).data("color")
16.                });
17.            })
18.            var ds = new kendo.data.DataSource({ data: dataList });
19.            ddl.setDataSource(ds);
20.        }

[Logan]

I discovered my problem was the properties on my js object were lowercase, while they were defined as upper case when i set up the scheduler.  So text vs Text.

 

Everything works as expected now that the properties match.

[Dimitar]

Hello Logan,

On the following Dojo example you could find a Scheduler implementation, where the discussed approach is implemented. With it, the DropDownList in the editor template is being successfully populated based on the checked fields for the resources.

To achieve the desired result, I have made a few modifications:

1) Added the required data-x attributes to the checkboxes (as per the code sample provided):

<div id="people">
  <input checked type="checkbox" name="AttendeesToInclude" id="alex" aria-label="Alex" value="1" data-text="alex" data-val="1" data-color="#f8a398">
</div>

2) Modified the edit function accordingly:

edit: function(e) {
  var editForm = e.container;
  var ownerSelectElement = editForm.find("[data-bind='value:ownerId']");

  if(ownerSelectElement.length > 0) {
    var ownerDDL = ownerSelectElement.getKendoDropDownList();
    var dataList = [];

    $('#people input:checked').each(function() {
      dataList.push({
        text: $(this).data("text"),
        value: $(this).data("val"),
        color: $(this).data("color")
      });
    });

    var ds = new kendo.data.DataSource({data: dataList});
    ownerDDL.setDataSource(ds);
  }
}

Regards,
Dimitar
Progress Telerik