Get the click on the first cell of a record row and open a tab with the value of the cell as a title and other row cells as content

[Stavros]

Hello guys.

I am using Angular UI Components (I will have a license from my company in the next days) and I have created a Grid with loan records.

So I have created a tabstrip component and inside it the first tab contains a kendo grid.

The first column is loan id.

I want to be able to click on the first cell of  every loan row and get the event so that I can open a new tab inside the tabstrip with tab title the value of the cell (the loan id) and ta content the rest of the loan row cells belonging to that loan id.

Any ideas on how to do that?

Thank you!

[Yanmario]

Hi Stravos,

The desired functionality can be achieved if few aways. Please check the following recommendations:

1. Using the Grid's cellClick event to retrieve the dataItem that was clicked and adding the information from the item to a new TabStrip item as demonstrated in the following demo:

https://stackblitz.com/edit/angular-uktxkf-qbhexb?file=app%2Fapp.component.ts

2. Using the kendoGridCellTemplate and adding a button with a click event to retrieve the cell information:

https://stackblitz.com/edit/angular-uktxkf-krecl6?file=app%2Fapp.component.ts (click on any name)

3. A separate Grid column with a kendoGridCellTemplate and button to add a new tab:

https://stackblitz.com/edit/angular-uktxkf?file=app%2Fapp.component.ts

The recommendations are based on a custom implementation between the Grid and TabStrip components and further adjustments might be required depending on the use case scenario.

I hope these recommendations help and steer you in the right direction.

Regards,
Yanmario
Progress Telerik

[Stavros]

I followed the first approach and it is working perfectly.

The only missing this in this approach is that you don't get the focus on the newly opened tab.

[Yanmario]

Hi Stavros,

I'm happy that one of the recommendations is working out for you. As for the focus, the selectTab method can be used to focus the newly added item to the TabStrip, as demonstrated in the following demo:

https://stackblitz.com/edit/angular-uktxkf-qubqsi?file=app%2Fapp.component.ts

 onCellClick(e: CellClickEvent) {
    let dataItemInformation = e.dataItem;
    this.items.push({
      disabled: false,
      tabName: `New ${dataItemInformation.ProductName} tab`,
      dataItemInfo: dataItemInformation,
    });
    let itemFocusIndex = this.items.length;
    setTimeout(() => this.ts.selectTab(itemFocusIndex));
  }

I hope this helps.

Regards,
Yanmario
Progress Telerik

 

 

[Stavros]

For some reason it is not working for me!

[Yanmario]

Hi Stavros,

A possible issue might be not using setTimeout when calling the selectTab method:

 setTimeout(() => this.ts.selectTab(itemFocusIndex));

However, without the component implementation(TypeScript and HTML markup), it is hard to troubleshoot why it doesn't work on your side. If the issue persists, could you please provide me with the component implementation or runnable example(feel free to use the one from the previous reply). That will help me troubleshoot the implementation and provide further feedback.

Regards,
Yanmario
Progress Telerik