Re-binding control using AngularJS framework

9 posts, 0 answers
  1. Piotr
    Piotr avatar
    14 posts
    Member since:
    Jul 2014

    Posted 09 Sep 2014 Link to this post

    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?

  2. Piotr
    Piotr avatar
    14 posts
    Member since:
    Jul 2014

    Posted 09 Sep 2014 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Piotr
    Piotr avatar
    14 posts
    Member since:
    Jul 2014

    Posted 09 Sep 2014 Link to this post

    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
  5. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 11 Sep 2014 Link to this post

    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!
     
  6. Piotr
    Piotr avatar
    14 posts
    Member since:
    Jul 2014

    Posted 11 Sep 2014 in reply to Bozhidar Link to this post

    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>
  7. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 11 Sep 2014 Link to this post

    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!
     
  8. Patrick
    Patrick avatar
    2 posts
    Member since:
    Mar 2015

    Posted 08 Apr 2015 in reply to Bozhidar Link to this post

    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.

     

  9. Patrick
    Patrick avatar
    2 posts
    Member since:
    Mar 2015

    Posted 08 Apr 2015 in reply to Patrick Link to this post

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

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

  10. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 10 Apr 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready