1. Feedback
  2. Angular
  3. 22370

Welcome to the Angular feedback portal. We’re happy you’re here! If you have feedback on how to improve the Angular, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Chart Disappears when Dragging Between Lists - Angular Mat Drag and Drop

Hello,

I've come across a bug with your charts.

Below you will see how I declared my charts

Empty


Empty


Below you will see how my charts are setup in the .html file

Empty


I have setup angular mat drag and drop. Due to this I have rows with 4 charts in each row as seen below.

Each row is set as a horizontal list.

Empty


However, after re-arranging the charts some of them randomly disappear and re-appear as seen below.

Empty

Empty




The charts only begin to disappear when moving the charts between drop lists, when moving the charts around in the same drop list there is no problem.

There is no error provided in console when this bug appears. If you guys have any solutions/ideas to solve this I would love to hear them.

Also, here is a gif of the problem occurring.problem.gif


Below is the code I use for my onDrop method.

onDrop(event: CdkDragDrop<string[]>){
    if(event.previousContainer === event.container){
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    }else{
      var i = 0;
      var i = this.checkIfItemIsInReports(event);
      if(i === 0){
        //if the object is comming from unselected reports
      if(this.reportData1.length === 4){
        if(this.reportData2.length === 4){
          if(this.reportData3.length === 4){
            if(this.reportData4.length === 4){
              console.log("Hello admin, you need to add a new array.");
            }else{
              //add to array 4
              console.log(4);
              this.reportData4.push(event.previousContainer.data[event.previousIndex]);
              this.dragAndDropService.changeReport4(this.reportData4);
            }
          }else{
            //add to array 3
            console.log(3);
            this.reportData3.push(event.previousContainer.data[event.previousIndex]);
            this.dragAndDropService.changeReport3(this.reportData3);
          }
        }else{
          //add to array 2
          console.log(2);
          this.reportData2.push(event.previousContainer.data[event.previousIndex]);
          this.dragAndDropService.changeReport2(this.reportData2);
        }
      }else{
        //add to array 1
        console.log(1);
        this.reportData1.push(event.previousContainer.data[event.previousIndex]);
        this.dragAndDropService.changeReport1(this.reportData1);
      }
      event.previousContainer.data.splice(event.previousIndex, 1);
      }else{
          console.log("CURR INDEX START - CURR: " + event.currentIndex + " PREV: " + event.previousIndex);
          if(event.currentIndex > event.previousIndex){
            console.log("After minus - CURR: " + event.currentIndex + " PREV: " + event.previousIndex);
            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
            if(event.currentIndex >= event.previousIndex){
              event.currentIndex = event.currentIndex + 1;
            }
            transferArrayItem(event.container.data, event.previousContainer.data, event.currentIndex, event.previousIndex);
          }else{
            if(event.currentIndex < event.previousIndex){
              
              transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
              event.currentIndex++;
              console.log("After addition - CURR: " + event.currentIndex + " PREV: " + event.previousIndex);
              transferArrayItem(event.container.data, event.previousContainer.data, event.currentIndex, event.previousIndex);
            }else{
              if(event.currentIndex === event.previousIndex){
                transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
                event.currentIndex++;
                console.log("AFTER Addition - Curr: " + event.currentIndex + " Prev: " + event.previousIndex);
                transferArrayItem(event.container.data, event.previousContainer.data, event.currentIndex, event.previousIndex);
              }
            }
          }
          
          console.log("CURR INDEXES END - CURR: " + event.currentIndex + " PREV: " + event.previousIndex);
      }
    }

    let userId = this.getCookie("AtlasNetLogin");
    this.cookieServ.delete(userId);
    this.combineAllReports();
    this.setCookie(userId, this.reportData);
  }

In my parent component, the main div uses cdkDropListGroup so that you do not have to connect the lists together, as seen below

Empty


Below displays how the (where the charts are displayed) is setup

Empty


I hope this in depth information will help you reproduce the problem.

Thank you for your time and help, it is greatly appreciated!