How to set default tab in kendo tabstrip conditionally

 Hi, 

In this I will be demonstrating, how we can set the default tab in kendo-tabstrip conditionally.

Scenario :

We have a grid, which has several columns. The grid is read-only (means, we cannot edit on the grid). There is one hyperlink and two buttons (total 3) in every line-item. On click of those controls, we have to open a popup where we can update the static data. Now the kendo-popup has 3 tabs.(let's say tab1, tab2 and tab3) Now, the challenge is we have to set each tab default for each control (3 tabs for 3 controls).

Solution :

We used @HostListener to overcome this challenge. We used two boolean variables for this. Below is the code snippet

  @HostListener("click") opentab1() : void {

    this.isTab2 = false;

    this.isTab3 = false;

  }

  @HostListener("click") opentab2() : void {

    this.isTab2 = true;

    this.isTab3 = false;

  }

  @HostListener("click") opentab3() : void{

    this.isTab3 = false;

    this.isTab2 = false;

  }

And in the html, we bind this properties with [selected] property, code snippet below

<kendo-tabstrip-tab [selected]="!isTab3 && !isTab2" title="Details">

SO Link

Tags : #angular #frontenddevelopment #kendotabstrip #kendoui