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

Issue with custom view and group header template

7 Answers 314 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nithin
Top achievements
Rank 1
Nithin asked on 06 Jul 2018, 09:01 AM

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

Sort by
0
Neli
Telerik team
answered on 10 Jul 2018, 07:26 AM
Hello Nithin,

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 
<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
Dimitar
Telerik team
answered on 13 Jul 2018, 10:11 AM
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:
<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
0
Neli
Telerik team
answered on 25 Jul 2018, 09:42 AM
Hello Nithin,

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>
And the respective script:
function getFullResourceByValue(value) {
 
       let scheduler = $("#scheduler").getKendoScheduler();
       let roomType = scheduler
       .resources[0]
       .dataSource
       .data()
       .filter(function(item) {
         return item.value === value
       });        
       return roomType[0]
}
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
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
0
Accepted
Neli
Telerik team
answered on 31 Jul 2018, 08:14 AM
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.
<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.
Tags
General Discussions
Asked by
Nithin
Top achievements
Rank 1
Answers by
Neli
Telerik team
Nithin
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or