Hi,
In my scheduler I have a custom view and a custom group header template these are written outside the angular controller. But in order to do somethings with the obtained data I need to write these inside angularjs controller, whenever I try to do so an error shows up in console saying there is no such view (if view is defined inside the controller) and scheduler is not shown when custom group header template (if group header is defined inside the controller).
Is there a way to bring both these inside angular controller?
Reference Example
7 Answers, 1 is accepted
0
Hello Nithin,
Thank you for sending a runnable sample.
I would suggest you to add the view definition to the $scope
Then, in the Scheduler configuration, you could set the type off the view, by using the $scope:
Here is the modified Dojo example.
Regards,
Neli
Progress Telerik
Thank you for sending a runnable sample.
I would suggest you to add the view definition to the $scope
angular.module(
"KendoDemos"
, [
"kendo.directives"
])
.controller(
"MyCtrl"
,
function
($scope,$http,$timeout){
$scope.TenDays = kendo.ui.TimelineMonthView.extend({
options: {
name:
"TenDays"
,
.............
});
Then, in the Scheduler configuration, you could set the type off the view, by using the $scope:
currentTimeMarker:
false
,
views: [
{
type: $scope.TenDays,
title:
"TenDays"
,
dateHeaderTemplate:
"<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/M')#</span>"
,
selected:
true
}
],
Here is the modified Dojo example.
Regards,
Neli
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.
0
Nithin
Top achievements
Rank 1
answered on 11 Jul 2018, 10:38 AM
Hi Neli,
Thanks, view is fine now but there is still issue with group-header-template on how we can make it angularjs. Currently I tried giving
Thanks, view is fine now but there is still issue with group-header-template on how we can make it angularjs. Currently I tried giving
<
div
id
=
"groupHeaderTemplate"
ng-include
=
"'views/headerTemplate.html'"
ng-repeat
=
"x in room"
>
<
span
class
=
"custom-row"
>
<
span
class
=
"custom-cell cell-room"
> {{x.text}}</
span
>
<
span
class
=
"custom-cell cell-name"
>{{x.roomtype}}</
span
>
</
span
>
</
div
>
$scope.getFullResourceByValue=
function
(value) {
$scope.room=value;
//obtains value from init() and passes here and scheduler is updated method is called
$scope.updateResources($scope.room);
}
but nothing is happening. I have also implemented resource pagination in the scheduler
My Example
0
Hello Nithin,
On the following Dojo example you can find a modified version of the provided example, where I have applied a fix to accommodate the desired behavior (Compiling the group header template with AngularJS).
The initial issue is related to the fact that during $scope.init(), the Scheduler options are being built. During this time, the group header template is retrieved with the html() method, but has not been evaluated(compiled) yet by AngularJS and leads to the observed behavior.
To achieve the desired result, I have added a simple timeout to the updateResources() method, so that it gets queued in the event queue. In addition to this, I have moved the template inside the specified ng-controller markup, so that the $scope is properly applied:
Regards,
Dimitar
Progress Telerik
On the following Dojo example you can find a modified version of the provided example, where I have applied a fix to accommodate the desired behavior (Compiling the group header template with AngularJS).
The initial issue is related to the fact that during $scope.init(), the Scheduler options are being built. During this time, the group header template is retrieved with the html() method, but has not been evaluated(compiled) yet by AngularJS and leads to the observed behavior.
To achieve the desired result, I have added a simple timeout to the updateResources() method, so that it gets queued in the event queue. In addition to this, I have moved the template inside the specified ng-controller markup, so that the $scope is properly applied:
<div ng-controller=
"MyCtrl"
ng-init=
"init()"
>
<div id=
"groupHeaderTemplate"
style=
"display: none;"
>
<span class=
"custom-row"
>
<div ng-
if
=
"false"
>asdasasdasdasd</div>
<div ng-repeat=
"x in products"
>
<div>{{x.name}}</div>
</div>
</span>
</div>
</div>
<script>
$scope.init=
function
(){
objJson=angular.copy($scope.resourceList);
$timeout(
function
() {
$scope.updateResources($scope.resourceList.slice(0,2))
}, 0);
}
</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.
0
Nithin
Top achievements
Rank 1
answered on 23 Jul 2018, 10:21 AM
Hi Dimitar,
Thanks for providing example but the way which you have showed to list out the resources causes the entire resource list to bind in each cell of the groupHeader. I did fiddle with the example u have provided to me can you suggest a way we can show one resource per cell.
Reference Example
Thanks for providing example but the way which you have showed to list out the resources causes the entire resource list to bind in each cell of the groupHeader. I did fiddle with the example u have provided to me can you suggest a way we can show one resource per cell.
Reference Example
0
Hello Nithin,
I have modified the groupHeaderTemplate, so currently for each group the text and roomType are displayed.
And the respective script:
As custom resource fields are not passed to the template I used the approach described in the following Forum thread, where such issue is discussed.
Here is the modified Dojo example.
I hope you will find it helpful.
Regards,
Neli
Progress Telerik
I have modified the groupHeaderTemplate, so currently for each group the text and roomType are displayed.
<
div
id
=
"groupHeaderTemplate"
style
=
"display: none;"
>
<
span
class
=
"custom-row"
>
<
div
ng-if
=
"false"
></
div
>
<
div
>
<
div
>#: data.text #</
div
>#=getFullResourceByValue(value).roomType#
</
div
>
</
span
>
</
div
>
function
getFullResourceByValue(value) {
let scheduler = $(
"#scheduler"
).getKendoScheduler();
let roomType = scheduler
.resources[0]
.dataSource
.data()
.filter(
function
(item) {
return
item.value === value
});
return
roomType[0]
}
Here is the modified Dojo example.
I hope you will find it helpful.
Regards,
Neli
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.
0
Nithin
Top achievements
Rank 1
answered on 27 Jul 2018, 10:09 AM
Hi
Thanks for the update but I'm expecting to do some actions with ng-click inside the group header template and also some update functionalities. But when tried to provide a ng-click it wasn't working. Is there any other way. I have modified the dojo you have provided please check
Reference Example
Thanks for the update but I'm expecting to do some actions with ng-click inside the group header template and also some update functionalities. But when tried to provide a ng-click it wasn't working. Is there any other way. I have modified the dojo you have provided please check
Reference Example
0
Accepted
Hello Ntihin,
I would suggest you to bind the click event when the Scheduler is loaded. For example you could add a custom class to the respective element in the template.
You could subscribe to the dataBound event of the widget. In the event handler you could find all the elements with the 'custom' class and bind a click event. To ensure that the elements are loaded by the time you are trying to bind a click event, you could use setTimeout function.
Here is the modified sample. When you click on the room text an alert appears. I have added some red border to the <div> element just to make the 'clickable' area more visible.
Regards,
Neli
Progress Telerik
I would suggest you to bind the click event when the Scheduler is loaded. For example you could add a custom class to the respective element in the template.
<
div
class
=
"custom"
style
=
"border:2px solid red; padding: 5px"
>#: data.text # </
div
>
You could subscribe to the dataBound event of the widget. In the event handler you could find all the elements with the 'custom' class and bind a click event. To ensure that the elements are loaded by the time you are trying to bind a click event, you could use setTimeout function.
setTimeout(
function
(){
var
btns = $(
'.custom'
)
btns.bind(
'click'
, $scope.btnfunc)
})
Here is the modified sample. When you click on the room text an alert appears. I have added some red border to the <div> element just to make the 'clickable' area more visible.
Regards,
Neli
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.