Need an example for sortable integration for tabstrip​

[Mario]

I found an example for jQuery only: https://demos.telerik.com/kendo-ui/sortable/integration-tabstrip

But I need it for Angular "^5.2.9"

My attempt work technically, the tabs move and are re-orderable, but the drag handle is not the Tab item itself, it is a separate [object Object] text.

<kendo-sortable
    [data]="tabItems"
    itemClass="tab-item"
    activeItemClass="active">
</kendo-sortable>

<kendo-tabstrip
  [keepTabContent]="true"
  (tabSelect)="onTabSelect($event)">

  <kendo-tabstrip-tab
    *ngFor="let item of tabItems; let i=index"
    [selected]="i === index"
    class="tab-item">

    <ng-template kendoTabTitle>
        <span> {{item.title}}</span>
        <span class="k-icon k-i-close" (click)="closeTab(i)"></span>
    </ng-template>

    <ng-template kendoTabContent>
      <app-tab-content
      [componentName]="item.componentName"
      [instanceName]="item.instanceName"
      ></app-tab-content>
    </ng-template>

  </kendo-tabstrip-tab>

</kendo-tabstrip>

 

 

[Svet]

Hi Mario,

Indeed, the requested functionality is not supported out of the box in Kendo Ui for Angular. However, we can achieve it by integrating Kendo Ui for jQuery in an Angular project by following the instructions in the following article:

https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

I am also sending a sample project demonstrating the implementation of the demonstrated jQuery feature in an Angular project.

I am not sure when is the [object Object] text encountered. But usually this occurs when we are trying to display a JSON object as text. A possible solution is to display some property of the object within an ngTemplate. Check the following sample plunker demonstrating this approach:

https://plnkr.co/edit/pSDAO8dpcKIeetzCitGZ?p=preview

The essential part is the following:

<kendo-sortable
          [data]="tabItems"
          itemClass="tab-item"
          activeItemClass="active">
          <ng-template let-item="item">
            {{item.title}}
          </ng-template>
      </kendo-sortable>

I would also like to add that the Sortable component is currently being re-written and there will be a new one provided in the future.

I hope this helps. Please let me know in case further assistance is required.

Regards,
Svetlin
Progress Telerik