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

Re-binding control using AngularJS framework

8 Answers 442 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Piotr
Top achievements
Rank 1
Piotr asked on 09 Sep 2014, 01:12 PM
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>
   &nbsp;<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?

8 Answers, 1 is accepted

Sort by
0
Piotr
Top achievements
Rank 1
answered on 09 Sep 2014, 03:16 PM
Meanwhile a've found something like -k-rebind:

<div kendo-gantt  k-options="ganttOptions" k-rebind="From" ng-mouseover="enter($event)"></div>

but when i used to it i obtain a reccurency and loader persistent work on.
0
Piotr
Top achievements
Rank 1
answered on 09 Sep 2014, 03:42 PM
and the stack trace

TypeError: Cannot read property 'find' of null
at l.GanttList.d.extend.select (http://localhost:60352/Scripts/kendo.all.min.js:40:5326)
at l.GanttList.d.extend.clearSelection (http://localhost:60352/Scripts/kendo.all.min.js:40:5561)
at h.extend.clearSelection (http://localhost:60352/Scripts/kendo.all.min.js:41:18714)


Please help
0
Bozhidar
Telerik team
answered on 11 Sep 2014, 10:37 AM
Hello,

As you pointed out, you can use the k-rebind attribute to specify a property, and when this property changes the widget is dropped and recreated again. This is explained in detail in our online documentation, under the Updating Widgets when options change section:
http://docs.telerik.com/kendo-ui/AngularJS/introduction

I'm affraid I couldn't quite understand the following line however: "but when i used to it i obtain a reccurency and loader persistent work on."
Could you elaborate on the exact issue in more detail.

Regards,
Bozhidar
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Piotr
Top achievements
Rank 1
answered on 11 Sep 2014, 11:24 AM
Hi

An effect  rather than only details, You may see out here: http://dojo.telerik.com/EMIMi

When You change a From value (datepicker upon a gantt chart) and click search button then some kind of recurrent loop appear.

And as curiosity it's not depend of From value, cause the same effect i may achieve using for instance ganttOptions property:

<div kendo-gantt  k-options="ganttOptions" k-rebind="gattOptions"></div>
0
Bozhidar
Telerik team
answered on 11 Sep 2014, 12:18 PM
Hi,

Thank you for getting back to us.

I was able to investigate the issue further and found out that it was caused by a bug in the Gantt widget, involving improper disposing of events. We will fix the issue in our next internal build.

Regards,
Bozhidar
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Patrick
Top achievements
Rank 1
answered on 08 Apr 2015, 04:01 PM

Is this issue has been fixed yet?  I have an angular issue where when I edit a task on the first click, my edit form template is not bind. The Delete, Save or Cancel button aren't working. When I close the form using the X and then open it again, it works the second time.

I'm using angular and used a k-rebing.

<div kendo-gantt k-options="ganttOptions" k-ng-delay="ganttOptions" k-rebind="ganttOptions"></div>

 

For some reason, there is an issue with my template not binding at all.

 

0
Patrick
Top achievements
Rank 1
answered on 08 Apr 2015, 04:05 PM

For some reason, removing the k-rebind property fixed it.

<div kendo-gantt k-options="ganttOptions"></div>

0
Bozhidar
Telerik team
answered on 10 Apr 2015, 07:34 AM
Hello,

We don't recommend using k-rebind to bind to the whole set of widget options, as some unexpected issues arise. If you want to rebind to the whole configuration, we recommend using k-ng-rebind:
http://docs.telerik.com/kendo-ui/AngularJS/introduction#delaying-widget-initialization


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