This is a migrated thread and some comments may be shown as answers.

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

3 Answers 451 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 15 Jun 2015, 05:23 AM

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>

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 17 Jun 2015, 07:38 AM
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
  });
}

Let me know if I am missing something.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Robert
Top achievements
Rank 1
answered on 21 Jun 2015, 09:26 PM
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?
0
Georgi Krustev
Telerik team
answered on 24 Jun 2015, 07:39 AM
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: 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:
In general, there is no such step-by-step tutorial in our documentation, and we will consider adding it future.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Robert
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Robert
Top achievements
Rank 1
Share this question
or