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: {
dataType: "jsonp"
},
create: {
dataType: "jsonp"
},
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
>