Angularjs: binding onChange events to dropdownlist elements in scheduler custom template

[Robert]

Hi all,

I've just started using Kendo UI in an AngularJS application, specifically the scheduler component, but I've run into issues trying to get dropdownlist elements to produce an onChange event when the selected item in the list is changed. I have 3 dropdownlists (Work, Category and Job) in a custom event editing template that I've created for a Scheduler. Each time a user selects a new option from the Work list, I need the options available in the Category and Job lists to be filtered based on the newly selected Work.

I've tried multiple ways of doing this and at one point I was able to get events being triggered and the lists filtering by changing some of the HTML for the dropdownlists but unfortunately doing this would then stop the selected options in the dropdowns from being bound to the currently selected event in the scheduler that I'm attempting to create/edit.

 Here's the code that I have at the moment, any help would be greatly appreciated :)

Controller:

angular.module('app.view1', ['ngMaterial','kendo.directives'])

    .controller('View1Ctrl', function($scope, $mdSidenav, dataFieldsService, authService) {

        $scope.openLeftMenu = function() {
            $mdSidenav('left').toggle();
        };

        $scope.allEmployees = [
            { text: "Alex", value: 1, color: "#f8a398" },
            { text: "Bob", value: 2, color: "#51a0ed" },
            { text: "Charlie", value: 3, color: "#56ca85" }
        ]

        $scope.allWorkFields = dataFieldsService.getWorkFields();
        //$scope.selectedWork = dataFieldsService.getDefaultWork();
        $scope.allCategoryFields = dataFieldsService.getCategoryFields();
        $scope.allJobFields = dataFieldsService.getJobFields();
        $scope.filteredCategoryFields = dataFieldsService.getFilteredCategoryFields(2748);
        $scope.filteredJobFields = dataFieldsService.getFilteredJobFields(2748);

        $scope.onWorkSelect = function(e){
            var i = this.dataItem(e.item);
            $scope.selectedWork = {text: i.text, value: i.value, color: i.color };
            $scope.filteredCategoryFields = dataFieldsService.getFilteredCategoryFields($scope.selectedWork.value);
            $scope.filteredJobFields = dataFieldsService.getFilteredJobFields($scope.selectedWork.value);
        }

        $scope.onEmployeeSelect = function(){

        }


        $scope.monthPickerConfig = {
            start  : "year",
            depth  : "month",
            format : "dd MMMM yyyy"
        };

        $scope.onDateSelected = function(e) {
            var datePicker = e.sender;
            console.log(datePicker.value());
        };

        $scope.onChange = function(e){
            console.log("CHNAGE");
        }

        $scope.schedulerOptions = {
            date: new Date(),
            height: "100%",
            views: [
                { type: "day",
                    dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'd/M')#</strong>")},
                { type: "week", selected: true,
                    dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'd/M')#</strong>")},
                "month",
                "agenda",
                "timeline"
            ],
            editable: {
                template: $("#customEditorTemplate").html()
            },
            dataBound: function(e) {
                console.log("dataBound");
            },
            timezone: "Etc/UTC",
            dataSource: {
                batch: true,
                transport: {
                    read: {
                        url: "urlToApi.json",
                        dataType: "json",
                        type: "GET",
                        beforeSend: function (req) {
                            req.setRequestHeader('Authorization', 'Basic ' + Base64.encode(
                                    authService.getUserKey() + ":" +
                                    authService.getToken()));
                        }
                    },
                    update: {
                        url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
                        dataType: "jsonp"
                    },
                    create: {
                        url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, type) {
                        if (type === 'read') {
                            return {
                                'from_date': '20150501',
                                'to_date': '20150531'
                            };
                        }
                    }
                },
                schema: {
                    model: {
                        id: "taskId",
                        fields: {
                            taskId: { from: "time_segment_key", type: "number" },
                            employee_key: { from: "employee_key", type: "number" },
                            employee: { from: "employee" },
                            title: { from: "work" },
                            start: { type: "date", from: "start_time" },
                            end: { type: "date", from: "end_time" },
                            startTimezone: { from: "StartTimezone" },
                            endTimezone: { from: "EndTimezone" },
                            description: { from: "description" },
                            work_key: { from: "work_key", validation: { required: true } },
                            //work_category_key: { from: "work_category_key" },
                            //work_category: { from: "work_category" },
                            //job_key: { from: "job_key" },
                            //job: { from: "job" },
                            time_duration: {from: "duration", type: "number" },
                            break_duration: {from: "break_duration", type: "number" },
                            approved: { from: "approved", type: "boolean" },
                            billed: { from: "billed", type: "boolean" },
                            paid: { from: "paid", type: "boolean" },
                            work: { from: "work_key" },
                            category: { from: "work_category_key" },
                            job: { from: "job_key "}
                        }
                    }
                }
            },
            resources: [
                {
                    field: "work",
                    title: "Work",
                    dataSource: $scope.allWorkFields
                },
                {
                    field: "category",
                    title: "Category",
                    dataSource: $scope.allCategoryFields
                },
                {
                    field: "job",
                    title: "Job",
                    dataSource: $scope.allJobFields
                }
            ],
            edit: function(e) {


                var workDropDown = e.container.find("#workDropDown").data("kendoDropDownList");
                var categoryDropDown = e.container.find("#categoryDropDown").data("kendoDropDownList");
                var jobDropDown = e.container.find("#jobDropDown").data("kendoDropDownList");

                workDropDown.dataSource.data(e.sender.resources[0].dataSource.data());
                categoryDropDown.dataSource.data(e.sender.resources[1].dataSource.data());
                jobDropDown.dataSource.data(e.sender.resources[2].dataSource.data());



                //console.log(e.event);


                ///* ACTION: ADD custom button */
                //var newButton = $('<a class="k-button" href="#">New button</a>');
                //
                ////wire its click event
                //newButton.click(function(e) { alert("Clicked"); });
                //
                ////add the button to the container
                //var buttonsContainer = container.find(".k-edit-buttons");
                //buttonsContainer.append(newButton);

                //var ownerId = e.container.find("#ownerId").data("kendoDropDownList");
                //ownerId.dataSource.data(e.sender.resources[0].dataSource.data());
            }
        };


    });

 

HTML:

<div layout="column" layout-fill>
    <md-tabs md-selected="selectedIndex" class="md-primary md-hue-3" flex>
        <md-tab label="Timesheet">
            <md-content id="scheduler" kendo-scheduler="sched" k-options="schedulerOptions" >
                <span k-event-template class='custom-event'>{{dataItem.title}}</span>
                <div k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>
            </md-content>
        </md-tab>
        <md-tab label="Time Summary">
            <section layout-margin>
                <md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2">
                    <md-content>
                        Hello World
                    </md-content>
                </md-sidenav>
                <md-content>
                    <md-button class="md-raised md-primary" ng-click="openLeftMenu()">
                        Open Left Menu
                    </md-button>
                </md-content>
            </section>
        </md-tab>
    </md-tabs>
</div>

<script id="customEditorTemplate" type="text/x-kendo-template">



    <div class="k-edit-label"><label>Employee</label></div>
    <div class="k-edit-field">
        <input kendo-drop-down-list k-select="onEmployeeSelect"
               k-data-source="allEmployees" k-data-text-field="'text'"/>
    </div>

    <div class="k-edit-label">
        <label for="work">Work</label>
    </div>
    <div data-container-for="work" class="k-edit-field">
        <select id="workDropDown" data-bind="value:work" data-role="dropdownlist"
                data-value-field="value" data-text-field="text">
        </select>
    </div>

    <!--<div class="k-edit-label">-->
        <!--<label>Work</label>-->
    <!--</div>-->
    <!--<div class="k-edit-field">-->
        <!--<input kendo-drop-down-list id="workDropDown" k-data-text-field="'text'">-->
    <!--</div>-->

    <div class="k-edit-label">
        <label for="category">Category</label>
    </div>
    <div data-container-for="category" class="k-edit-field">
        <select id="categoryDropDown" data-bind="value:category" data-role="dropdownlist"
                data-value-field="value" data-text-field="text">
        </select>
    </div>

    <div class="k-edit-label">
        <label for="job">Job</label>
    </div>
    <div data-container-for="job" class="k-edit-field">
        <select id="jobDropDown" data-bind="value:job" data-role="dropdownlist"
                data-value-field="value" data-text-field="text">
        </select>
    </div>

    <div class="k-edit-label">
        <label for="start">Start</label>
    </div>
    <div data-container-for="start" class="k-edit-field">
        <input type="text"
               data-role="datetimepicker"
               data-interval="15"
               data-type="date"
               data-bind="value:start,invisible:isAllDay"
               name="start"/>
        <input type="text"
               data-type="date"
               data-role="datepicker"
               data-bind="value:start,visible:isAllDay"
               name="start" />
        <span data-bind="text: startTimezone"></span>
        <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
    </div>

    <div class="k-edit-label"><label for="end">End</label></div>
    <div data-container-for="end" class="k-edit-field">
        <input type="text"
               data-type="date"
               data-role="datetimepicker"
               data-bind="value:end,invisible:isAllDay"
               name="end"
               data-datecompare-msg="End date should be greater than or equal to the start date" />
        <input type="text"
               data-type="date"
               data-role="datepicker"
               data-bind="value:end,visible:isAllDay"
               name="end"
               data-datecompare-msg="End date should be greater than or equal to the start date" />
        <span data-bind="text: endTimezone"></span>
        <span data-bind="text: startTimezone, invisible: endTimezone"></span>
        <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
    </div>

    <div class="k-edit-label"><label for="recurrenceRule">Repeat</label></div>
    <div data-container-for="recurrenceRule" class="k-edit-field">
        <div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
    </div>

    <div class="k-edit-label"><label for="description">Description</label></div>
    <div data-container-for="description" class="k-edit-field">
        <textarea name="description" class="k-textbox" data-bind="value:description"></textarea>
    </div>
</script>

[Georgi Krustev]

Hello Robert,

If I understand the case, you would like to wire the change event of the Work DDL and filter others dropdownlists (Category & Job) in the editor form. As you already have access to the widgets in the Scheduler edit function, you can wire the change event there:

edit: function(e) {
  var workDropDown = e.container.find("#workDropDown").data("kendoDropDownList");
  var categoryDropDown = e.container.find("#categoryDropDown").data("kendoDropDownList");
  var jobDropDown = e.container.find("#jobDropDown").data("kendoDropDownList");

  workDropDown.bind("change", function() {
    var value = workDropDown.value();

    //filter the other widgets using filter method
    //http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter
  });
}

Let me know if I am missing something.

Regards,
Georgi Krustev
Telerik

 

 

[Robert]

Thanks Georgi this fixed the problem :)
Out of curiosity, is there documentation for this somewhere as I couldn't seem to find anything on this particular usage?

I've also found that now each of the drop downs are defaulting to empty options when I open the editor, even if I'm editing an event that already has an option set in the drop downs. How do I go about fixing this?

[Georgi Krustev]

Hello Robert,

In general, the editing of the widget is done using Kendo MVVM framework and more specifically with the help of MVVM value binding:

• http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/value

If the binding is not defined, then the scheduler will not be able to attach the 2-way binding and thus set the dropdownlist value and update the model respectively.

If the developer decides to skip using the MVVM binding, then he/she will need to update the model manual, like this:

edit: function(e) {
  var workDropDown = e.container.find("#workDropDown").data("kendoDropDownList");
  var categoryDropDown = e.container.find("#categoryDropDown").data("kendoDropDownList");
  var jobDropDown = e.container.find("#jobDropDown").data("kendoDropDownList");

  var event = e.event;

  //set initial value;
  workDropDown.value(event.[field]);

  workDropDown.bind("change", function() {
    var value = workDropDown.value();

    //update model value on change
    event.set("[field]", value);
  });
}

When the developer wants to interact with several widgets inside the custom editor, then it is best to use their API:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist

In general, there is no such step-by-step tutorial in our documentation, and we will consider adding it future.

Regards,
Georgi Krustev
Telerik