Cancel drag in jqxTree

[LiamParticipant]

Hello, how can I cancel drag and/or drop actions in jqxTree ?
I tried the following code, but it didn’t work :

app.component.ts

export class AppComponent {
  @ViewChild('myTree') tree: jqxTreeComponent;

  onDragEnd(event: any) {
    console.log('Drag end');
    return false;
  }
}

app.component.html

<jqxTree
  #myTree
  (onDragEnd)="onDragEnd($event)"
  [width]="300"
>
  <ul>
    <li id='home'>Home</li>
    <li>
      Solutions
      <ul>
        <li>Education</li>
        <li>Financial services</li>
        <li>
          Solutions
          <ul>
            <li>Consumer photo and video</li>
            <li>Mobile</li>
          </ul>
        </li>
        <li>All industries and solutions</li>
      </ul>
    </li>
    <li>
      Products
      <ul>
        <li>PC products</li>
        <li>Mobile products</li>
      </ul>
    </li>
    <li>
      Communities
      <ul>
        <li>Designers</li>
        <li>Developers</li>
        <li>
          By resource
          <ul>
            <li>Labs</li>
            <li>TV</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</jqxTree>

Thank you !

[StanislavParticipant]

Hello Liam,

What do you mean?
You want to disable items drag within the jqxTree or not be able to drag items outside the Tree?

You can take a look at this example: Link

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[LiamParticipant]

Hello, I want selectively disable items to drop within the jqxTree.
I saw that example. In that example you return false when you need to disable item drop :

$('#treeB').jqxTree({
	allowDrag: true, allowDrop: true, height: '300px', width: '220px',
	dragEnd: function (item, dropItem, args, dropPosition, tree) {
		if (item.label == "Forum")
			return false;
	}
});

I tried same in Angular, but it didn’t work :

export class AppComponent {
  @ViewChild('myTree') tree: jqxTreeComponent;

  onDragEnd(event: any) {
    console.log('Drag end');
    return false;
  }
}

<jqxTree
  #myTree
  (onDragEnd)="onDragEnd($event)"
  [width]="300"

How can I implement it in Angular in right way ?
Thank you !

[LiamParticipant]

Hello, I have found a solution.

export class AppComponent implements AfterViewInit {
  @ViewChild('myTree') tree: jqxTreeComponent;

  onDragEnd(item, dropItem, args, dropPosition, tree) {
    console.log(item);
    console.log(dropItem);
    return false;
  }

  ngAfterViewInit(): void {
    this.tree.createComponent({
      dragEnd: this.onDragEnd
    });
  }
}

<jqxTree
  #myTree
  [width]="300"
  [auto-create]="false"
>
...

Thank you !

[Author]

Posts