Hi
i have two different controllers, one of them with gantt chart control, and the second one as toolbar with ie. DataPicker and Button which primary function is a commiting new parameters and refresh gantt view. I achieved flow between both controlers
<div ng-app="KendoDemo" ng-controller="MyCtrl">
<div style="posotion: absolute; top:100px; bottom:0px;text-align:left;display:inline-block;" ng-controller="Header">
<p>
<label for="start">Data od:</label><input id="start" style="width: 200px" value="10/10/2011" ng-model="From"/>
<label for="end">Data do:</label><input id="end" style="width: 200px" value="10/10/2012"/ ng-model="To">
<!--<kendo-button class="k-primary" title="Run snippet (Ctrl + Enter)"
data-role="button" ng-click="onClick1()">Szukaj</kendo-button>-->
<button class="k-primary" ng-click="handleClick();">Szukaj</button>
<b>Styl:</b>
</p>
</div>
<input type="hidden" ng-model="From"/>
<input type="hidden" ng-model="To"/>
<div kendo-gantt k-options="ganttOptions" ng-mouseover="enter($event)"></div>
<div kendo-tooltip="tooltip" k-content="'{{tooltipContent}}'"></div>
</div>
</div>
<script>
angular.module("KendoDemo", [ "kendo.directives" ]);
function Header($scope) {
$scope.$on('handleChild', function(event, args) {
$scope.From = args.from;
$scope.To = args.to;
});
$scope.handleClick = function() {
$scope.$emit('updateParent', {from: $scope.From, to: $scope.To});
};
}
function MyCtrl($scope) {
$scope.handleClick = function(from, to) {
$scope.$broadcast('handleChild', {From : from, To: to});
};
$scope.$on('updateParent', function(event, args) {
$scope.From = args.from;
$scope.To = args.to;
$apply();
var gantt = this;
thi.refresh();
});
var serviceRoot = "/api/";
var tasksDataSource = new kendo.data.GanttDataSource({
batch: false,
transport: {
read: {
url: serviceRoot + "/GetTasks",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttTasks/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttTasks/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttTasks/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
return { models: kendo.stringify(options.models || [options]) };
}
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
orderId: { from: "OrderID", type: "number", validation: { required: true } },
parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "Start", type: "date" },
end: { from: "End", type: "date" },
title: { from: "Title", defaultValue: "", type: "string" },
percentComplete: { from: "PercentComplete", type: "number" },
summary: { from: "Summary", type: "boolean" },
expanded: { from: "Expanded", type: "boolean", defaultValue: true }
}
}
}
});
var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
transport: {
read: {
url: serviceRoot + "/GetDependencies",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttDependencies/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttDependencies/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttDependencies/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "id",
fields: {
predecessorId: { from: "PredecessorID", type: "number" },
successorId: { from: "SuccessorID", type: "number" },
type: { from: "Type", type: "number" }
}
},
tooltip: {
visible: true,
format: "{0}%",
}
}
});
$scope.enter = function(event) {
var target = $(event.target);
if (target.is(".k-task") || target.closest(".k-task").length > 0 ) {
//alert('Stan realizacji: ' + target.text());
alert(this.From);
$scope.tooltipContent = 'Stan realizacji: ' + target.text();
$scope.tooltip.show(target);
} else {
$scope.tooltip.hide();
}
};
$scope.ganttOptions = {
dataSource: tasksDataSource,
dependencies: dependenciesDataSource,
views: [
"day",
"week",
{ type: "month", selected: true }
],
columns: [
{ field: "title", title: "Title", editable: false },
{ field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100, sortable: true, editable: true },
{ field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100, sortable: true, editable: true }
],
resize: function(e) {
// alert(":::");
// e.preventDefault();
},
height: 500,
showWorkHours: true,
showWorkDays: true,
dataBound: function() {
var gantt = this;
gantt.element.find(".k-task").each(function(e) {
var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));
// colorize task per business requirements
if (dataItem.percentComplete < .5) {
this.style.backgroundColor = "#f99";
} else {
this.style.backgroundColor = "#9f9";
}
});
}
};
}
MyCtrl.$inject = ['$scope'];
Header.$inject = ['$scope'];
</script>
and that's ok. I checked new parameters using ordinary alert() function inside of $scope.enter. But i have no idea how to rebind a view. i MVVM it shall looks like:
var viewModel = kendo.observable({
productsSource: new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
}, and bind
kendo.bind($("#form-container"), viewModel);
But in AnguleJS framework IMHO control is binding in background after its embedded in DOM model. I've been trying $apply and this.refresh() but with no success.
Any idea?
i have two different controllers, one of them with gantt chart control, and the second one as toolbar with ie. DataPicker and Button which primary function is a commiting new parameters and refresh gantt view. I achieved flow between both controlers
<div ng-app="KendoDemo" ng-controller="MyCtrl">
<div style="posotion: absolute; top:100px; bottom:0px;text-align:left;display:inline-block;" ng-controller="Header">
<p>
<label for="start">Data od:</label><input id="start" style="width: 200px" value="10/10/2011" ng-model="From"/>
<label for="end">Data do:</label><input id="end" style="width: 200px" value="10/10/2012"/ ng-model="To">
<!--<kendo-button class="k-primary" title="Run snippet (Ctrl + Enter)"
data-role="button" ng-click="onClick1()">Szukaj</kendo-button>-->
<button class="k-primary" ng-click="handleClick();">Szukaj</button>
<b>Styl:</b>
</p>
</div>
<input type="hidden" ng-model="From"/>
<input type="hidden" ng-model="To"/>
<div kendo-gantt k-options="ganttOptions" ng-mouseover="enter($event)"></div>
<div kendo-tooltip="tooltip" k-content="'{{tooltipContent}}'"></div>
</div>
</div>
<script>
angular.module("KendoDemo", [ "kendo.directives" ]);
function Header($scope) {
$scope.$on('handleChild', function(event, args) {
$scope.From = args.from;
$scope.To = args.to;
});
$scope.handleClick = function() {
$scope.$emit('updateParent', {from: $scope.From, to: $scope.To});
};
}
function MyCtrl($scope) {
$scope.handleClick = function(from, to) {
$scope.$broadcast('handleChild', {From : from, To: to});
};
$scope.$on('updateParent', function(event, args) {
$scope.From = args.from;
$scope.To = args.to;
$apply();
var gantt = this;
thi.refresh();
});
var serviceRoot = "/api/";
var tasksDataSource = new kendo.data.GanttDataSource({
batch: false,
transport: {
read: {
url: serviceRoot + "/GetTasks",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttTasks/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttTasks/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttTasks/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
return { models: kendo.stringify(options.models || [options]) };
}
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
orderId: { from: "OrderID", type: "number", validation: { required: true } },
parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "Start", type: "date" },
end: { from: "End", type: "date" },
title: { from: "Title", defaultValue: "", type: "string" },
percentComplete: { from: "PercentComplete", type: "number" },
summary: { from: "Summary", type: "boolean" },
expanded: { from: "Expanded", type: "boolean", defaultValue: true }
}
}
}
});
var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
transport: {
read: {
url: serviceRoot + "/GetDependencies",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttDependencies/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttDependencies/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttDependencies/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "id",
fields: {
predecessorId: { from: "PredecessorID", type: "number" },
successorId: { from: "SuccessorID", type: "number" },
type: { from: "Type", type: "number" }
}
},
tooltip: {
visible: true,
format: "{0}%",
}
}
});
$scope.enter = function(event) {
var target = $(event.target);
if (target.is(".k-task") || target.closest(".k-task").length > 0 ) {
//alert('Stan realizacji: ' + target.text());
alert(this.From);
$scope.tooltipContent = 'Stan realizacji: ' + target.text();
$scope.tooltip.show(target);
} else {
$scope.tooltip.hide();
}
};
$scope.ganttOptions = {
dataSource: tasksDataSource,
dependencies: dependenciesDataSource,
views: [
"day",
"week",
{ type: "month", selected: true }
],
columns: [
{ field: "title", title: "Title", editable: false },
{ field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100, sortable: true, editable: true },
{ field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100, sortable: true, editable: true }
],
resize: function(e) {
// alert(":::");
// e.preventDefault();
},
height: 500,
showWorkHours: true,
showWorkDays: true,
dataBound: function() {
var gantt = this;
gantt.element.find(".k-task").each(function(e) {
var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));
// colorize task per business requirements
if (dataItem.percentComplete < .5) {
this.style.backgroundColor = "#f99";
} else {
this.style.backgroundColor = "#9f9";
}
});
}
};
}
MyCtrl.$inject = ['$scope'];
Header.$inject = ['$scope'];
</script>
and that's ok. I checked new parameters using ordinary alert() function inside of $scope.enter. But i have no idea how to rebind a view. i MVVM it shall looks like:
var viewModel = kendo.observable({
productsSource: new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
}, and bind
kendo.bind($("#form-container"), viewModel);
But in AnguleJS framework IMHO control is binding in background after its embedded in DOM model. I've been trying $apply and this.refresh() but with no success.
Any idea?