Here is a modified code snippet that showcases how to customize the Kendo Grid in Angular. This example was inspired by a previously generated grid with auto columns and has been tailored for specific needs - code by: Udhaya Kannan

app.component.ts
-----------------

import { Component } from "@angular/core";
import { sampleProducts } from "./products";
import { Product } from "./product.model";
import { distinct } from "@progress/kendo-data-query";

interface ColumnSetting {
  field: string;
  title: string;
  format?: string;
  type: "text" | "numeric" | "boolean" | "date";
}

interface GroupColumnSetting {
  title: string;
  supplierId: number;
}

@Component({
  selector: "my-app",
  template: `
    <kendo-grid
      [kendoGridBinding]="gridData"
      [filterable]="true"
      scrollable="none"
    >
      <kendo-grid-column
        field="ProgramCode"
        title="Main Program Code"
      ></kendo-grid-column>
      <kendo-grid-column-group
        [headerStyle]="{ 'text-align': 'center' }"
        *ngFor="let groupColumn of groupColumns"
        title="{{ groupColumn.title }}"
        [locked]="false"
      >
        <kendo-grid-column field="ProductID" title="Product-ID">
          <ng-template kendoGridCellTemplate let-dataItem>
            {{ getProductID(dataItem.ProductID, groupColumn.supplierId) }}
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="SupplierID" title="Supplier-ID">
          <ng-template kendoGridCellTemplate let-dataItem>
            {{ getSupplierID(dataItem.ProductID, groupColumn.supplierId) }}
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Product-Name">
          <ng-template kendoGridCellTemplate let-dataItem>
            {{ getProductName(dataItem.ProductID, groupColumn.supplierId) }}
          </ng-template>
        </kendo-grid-column>
      </kendo-grid-column-group>
    </kendo-grid>
  `
})
export class AppComponent {
  public gridData: any[] = distinct(sampleProducts, "ProgramCode");
  public arrayResult: Product[] = sampleProducts;

  public isAssociatedIds(
    supplierID: number,
    groupColumnSupplierID: number
  ): boolean {
    return supplierID == groupColumnSupplierID;
  }

  public getProductName(productID: number, supplierID: number): string {
    const localProduct = this.arrayResult.find(
      x => x.ProductID == productID && x.SupplierID == supplierID
    );

    return localProduct.ProductName;
  }

  public getProductID(productID: number, supplierID: number): number {
    const localProduct = this.arrayResult.find(
      x => x.ProductID == productID && x.SupplierID == supplierID
    );

    return localProduct.ProductID;
  }

  public getSupplierID(productID: number, supplierID: number): number {
    const localProduct = this.arrayResult.find(
      x => x.ProductID == productID && x.SupplierID == supplierID
    );

    return localProduct.SupplierID;
  }

  public groupColumns: GroupColumnSetting[] = [
    {
      title: "Supplier Test 1",
      supplierId: 1
    },
    {
      title: "Supplier Test 2",
      supplierId: 2
    }
  ];

  public columns: ColumnSetting[] = [
    {
      field: "ProductName",
      title: "Product Name",
      type: "text"
    },
    {
      field: "UnitPrice",
      format: "{0:c}",
      title: "Unit Price",
      type: "numeric"
    },
    {
      field: "FirstOrderedOn",
      format: "{0:d}",
      title: "First Ordered",
      type: "date"
    }
  ];
}

product.model.ts
----------------
export class Product 
 {
    ProductID: number;
    ProductName: string;
    SupplierID: number;
    ProgramCode: string;
    CategoryID: number;
    QuantityPerUnit: string;
    UnitPrice: number;
    UnitsInStock: number;
    UnitsOnOrder: number;
    ReorderLevel: number;
    Discontinued: boolean;
    Category: Category;
    FirstOrderedOn: Date;
  }

  export class Category {
    CategoryID: number;
    CategoryName: string;
    Description: string;
  }

products.ts
-----------

export const sampleProducts = [
  {
    ProductID: 1,
    ProductName: "Chai",
    SupplierID: 1,
    ProgramCode: "ABC",
    CategoryID: 1,
    QuantityPerUnit: "10 boxes x 20 bags",
    UnitPrice: 18,
    UnitsInStock: 39,
    UnitsOnOrder: 0,
    ReorderLevel: 10,
    Discontinued: false,
    Category: {
      CategoryID: 1,
      CategoryName: "Beverages",
      Description: "Soft drinks, coffees, teas, beers, and ales"
    },
    FirstOrderedOn: new Date(1996, 8, 20)
  },
// Additional product entries here...
]

app.module.ts
-------------
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { GridModule } from '@progress/kendo-angular-grid';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, GridModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }