Limit scheduler resource List via javascript

5 posts, 1 answers
  1. Logan
    Logan avatar
    57 posts
    Member since:
    Apr 2013

    Posted 18 Apr 2018 Link to this post

    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

     

     

  2.
  3. Answer
    Dimitar
    Admin
    Dimitar avatar
    703 posts

    Posted 23 Apr 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Logan
    Logan avatar
    57 posts
    Member since:
    Apr 2013

    Posted 23 Apr 2018 in reply to Dimitar Link to this post

    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.        }

    [snipped

  7. Logan
    Logan avatar
    57 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2018 in reply to Logan Link to this post

    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.

  8.
  9. Dimitar
    Admin
    Dimitar avatar
    703 posts

    Posted 24 Apr 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top