Extra column with buttons in the Angular UI grid (every row button opens in a window component with a summary of the row fields with values)

[Stavros]

As the topic explains I want to create an extra column (without column header) with buttons that every one of them opens in a kendo ui window component that has all the fields of the same row as the button, with its values as content.

Is it possible?

I am using Kendo UI for Angular

[Yanmario]

Hi Stavros,

Indeed the desired requirement can be achieved with the use of kendoGridCellTemplate and the Window component service. The kendoGridCell template context is set to the current data item that can be passed through a (click) event on button press:

<kendo-grid-column>
        <ng-template kendoGridCellTemplate let-dataItem>
          <button class="k-button" (click)="onClick(dataItem)">ViewInfo</button>
        </ng-template>
</kendo-grid-column>

Then what is left is to call the WindowService -> open method and set the WindowSettings depending on the application requirement:

public onClick(data: any) {
    //Asynchronous source
    if (data.ProductName === undefined) {
      this.windowService.open({
        title: `${data.CategoryName}`,
        content: `${data.CategoryName}:  ${data.Description} , ID: ${
          data.CategoryID
        }`,
        width: 300,
        height: 125
      });
    }
    // Array and GridDataResult
    else {
      this.windowService.open({
        title: `${data.ProductName}`,
        content: `Product Name: ${data.ProductName}, Quantity: ${
          data.QuantityPerUnit
        } , Price: ${data.UnitPrice}`,
        width: 300,
        height: 125
      });
    }
  }

StackBlitz example demonstrating the above approach:

https://stackblitz.com/edit/grid-with-window-component-vycpre

Further adjustments might be required depending on the use case scenario.

I hope this helps and streets you in the right direction.

Regards,
Yanmario
Progress Telerik

[Stavros]

Cool but how do you insert html code inside this content property?

I tried it and it does not work.

I also can't use

content: template

because the home.component.ts where I want to use it has already an external template file called home.component.html.

[Yanmario]

Hi Stavros,

The Window component allows the rendering of component types in its content area, as demonstrated in the following article from our documentation:

https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window/service/#toc-content-component

I hope this helps.

Regards,
Yanmario
Progress Telerik