angularjstypescriptkendo-uikendo-sortable

Sort Array with Kendo UI Sortable and Angular


I am using Kendo UI with Angular and Typescript. I know Kendo UI and Angular is a pain, but I have to do it like that...

The view works great, but when I want to access the array in the change-Event and reorder the array the variable doesn't exists. It seems that this is another scope. So in this demo the alert will pop up:

        // Change Event
        changed(e: kendo.ui.SortableEndEvent) {
          console.log(e);
          console.info(this.data);

          // For Demo
          if(this.data == undefined){
            alert("Can not access Data Array");
            return;
          }

            // swap
            var oldElement = this.data[e.oldIndex];
            this.data[e.oldIndex] = this.data[e.newIndex];
            this.data[e.newIndex] = oldElement;
        }

         data = [
          { value: "Val 1" },
          { value: "Val 2"},
          { value: "Value 3"},
          { value: "Value 4"}
        ];

Is there a workaround, so I can access the array?

I have a example here: http://codepen.io/anon/pen/ozbRJA?editors=1010


Solution

  • As Philipp commented, the change event is in another context. With this.$angular_scope.ctrl.data I can access the controller scope and the array. It's not very beautiful, but it works.