I'm trying to display distinct column through a returned Observable Kendo UI Angular Grid and RxJS?

Question

I have a PublicID with 3 columns (Owner1, Owner2, Owner3)

When the page renders on the website the Kendo Grid is duplicate PublicID but with each Owner in a separate row (PublicID 1, Owner1) (PublicID 1, Pwner 2)

What I'm trying to display is (PublicID 1, Owner1, Owner2) in a single row

Anyone know how to display the Owners in a single row?

I'm not sure if this is something on the Angular side using distinct to group the same values or if it's on the EntityFramework side in VS

This is in Angular using Kendo-UI DataQuery

public fetch(state: DataSourceRequestState, fetchData: string, simple: boolean = false, searchTerm: string = ''): Observable<GridDataResult> {
    this.loading = true;
    const searchType = simple ? '/realsimple' : '/real';
    const querySearch = simple ? '/' + encodeURI(searchTerm)  : '';
    const queryStr = `${toDataSourceRequestString(state)}`; // serialize the state
    const hasGroups = state.group && state.group.length;
    // console.log(state);
    // console.log(queryStr);
    // sends the data to the server
    return this.http.get(`${this.PROD_BASE_URL + fetchData + searchType + querySearch}?${queryStr}`, {headers: this.headers})
    .pipe(
          map(response => <GridDataResult> {
            data: response['data'],
            total: response['total'] }
            ),
          distinct(),
          tap(() => (this.loading = false)));
  }