master details with transaction inner graid is completed.

src/app/app.module.ts

 import { TransactionListComponent } from './transaction-list/transaction-list.component';
 import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
 import { RatingComponent } from './transaction-list/rating.component';
+import { TransDetailsComponent } from './trans-details/trans-details.component';
+import { TransTailsComponent } from './trans-details/trans-tails/trans-tails.component';
 
 
 
     BkpDividerTextComponent,
     TransactionComponent,
     TransactionListComponent,
-    RatingComponent
+    RatingComponent,
+    TransDetailsComponent,
+    TransTailsComponent
   ],
   imports: [
     BrowserModule,

src/app/trans-details/trans-details.component.html

+<div class='transaction-details'>
+    <trans-tails [item] = "item"> </trans-tails>
+    <hr> 
+    <p>Address: {{item.address}} </p>
+    <p>bdm: {{item.bdm}}</p>
+    <p>brokers: {{item.broker}}</p>
+    <p>budget: {{item.budget}}</p>
+    <p>clients: {{item.clients}}</p>
+    <p>country: {{item.country}}</p>
+    <p>full_name: {{item.full_name}}</p>
+    <p>gender: {{item.gender}}</p>
+    <p>id: {{item.id}}</p>
+    <p>img_id: {{item.img_id}}</p>
+    <p>is_online: {{item.is_online}</p>
+    <p>job_title: {{item.job_title}}</p>
+    <p>lender: {{item.lender}}</p>
+    <p>loan_limit: {{item.loan_limit}}</p>
+    <p>phone: {{item.phone}}</p>
+    <p>rating: {{item.rating}}</p>
+    <p>settlement_date: {{item.settlement_date | date: "yyyy-MM-dd"}}</p>
+    <p>status: {{item.status}}</p>
+    <p>submittsion_date: {{item.submittsion_date | date: "yyyy-MMM-dd"}}</p>
+    <p>target: {{item.target}}</p>
+
+
+</div>

src/app/trans-details/trans-details.component.scss

+div.transaction-details{
+    background-color: yellow;
+}

src/app/trans-details/trans-details.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransDetailsComponent } from './trans-details.component';
+
+describe('TransDetailsComponent', () => {
+  let component: TransDetailsComponent;
+  let fixture: ComponentFixture<TransDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TransDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TransDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/trans-details/trans-details.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import  {DatePipe} from '@angular/common';
+import {TransTailsComponent} from "./trans-tails/trans-tails.component";
+
+@Component({
+  selector: 'trans-details',
+  templateUrl: './trans-details.component.html',
+  styleUrls: ['./trans-details.component.scss']
+})
+export class TransDetailsComponent implements OnInit {
+
+  @Input() public item: Object; 
+
+  constructor() { }
+
+  ngOnInit(): void {
+    console.log(this.item);
+  }
+
+}

src/app/trans-details/trans-tails/trans-tails.component.html

+<kendo-grid 
+    [kendoGridBinding] = "tailsView"
+    [loading]="false" 
+    [pageSize]="5" 
+    [skip]="skip" 
+    [pageable]="true"
+    scrollable="none" 
+    [navigable]="true" 
+    kendoGridFocusable>
+    <kendo-grid-column field="clients" title="Product ID" width="120">
+    </kendo-grid-column>
+    <kendo-grid-column field="brokers" title="Product Name">
+    </kendo-grid-column>
+    <kendo-grid-column field="bdm" title="Unit Price" format="{0:c}">
+    </kendo-grid-column>
+</kendo-grid>

src/app/trans-details/trans-tails/trans-tails.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransTailsComponent } from './trans-tails.component';
+
+describe('TransTailsComponent', () => {
+  let component: TransTailsComponent;
+  let fixture: ComponentFixture<TransTailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TransTailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TransTailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/trans-details/trans-tails/trans-tails.component.ts

+import { Component, ViewChild, Input, OnInit } from '@angular/core';
+import  {DatePipe} from '@angular/common'
+import { Observable } from 'rxjs';
+import { GridDataResult, GridComponent, PageChangeEvent } from '@progress/kendo-angular-grid';
+
+//import { ProductsService } from './northwind.service';
+import { trasnactions } from '../../transaction-list/employees';
+import { transform } from '@progress/kendo-drawing/dist/npm/geometry';
+
+@Component({
+  selector: 'trans-tails',
+  templateUrl: './trans-tails.component.html',
+  styleUrls: ['./trans-tails.component.scss']
+})
+export class TransTailsComponent implements OnInit {
+
+    /**
+     * The category for which details are displayed
+     */
+    @Input() public item : Object;
+    public tailsView: any[];
+
+    //public view: Observable<GridDataResult>;
+    public skip = 0;
+
+    constructor() { }
+
+    public ngOnInit(): void {
+        //this.view = this.service;
+        this.tailsView = trasnactions;//.slice(this.skip, this.skip + 5);
+        /*load products for the given category*/
+        //this.service.queryForCategory(this.item, { skip: this.skip, take: 5 });
+    }
+
+    public pageChange({ skip, take }: PageChangeEvent): void {
+        this.skip = skip;
+        //this.service.queryForCategory(this.item, { skip, take });
+        this.tailsView = trasnactions.slice(skip, skip + take);
+    }
+
+}

src/app/transaction-list/transaction-list.component.html

 
 <div *kendoGridDetailTemplate="let dataItem">
     some details {{dataItem.id}}
+    <trans-details [item]="dataItem"></trans-details>
 </div>
 </kendo-grid>

src/app/transaction-list/transaction-list.component.ts

 import { Component, OnInit, ViewChild } from '@angular/core';
 import { DataBindingDirective } from '@progress/kendo-angular-grid';
 import { process } from '@progress/kendo-data-query';
-import { employees , trasnactions } from './employees';
+import { trasnactions } from './employees';
 import { images } from './images';
+import { TransDetailsComponent} from '../trans-details/trans-details.component'
 
 @Component({
   selector: 'app-transaction-list',
               logic: "or",
               filters: [
                   {
-                      field: 'full_name',
+                      field: 'clients',
                       operator: 'contains',
                       value: inputValue
                   },
                   {
-                      field: 'job_title',
+                      field: 'brokers',
                       operator: 'contains',
                       value: inputValue
                   },
                   {
-                      field: 'budget',
+                      field: 'bdm',
                       operator: 'contains',
                       value: inputValue
                   },
                   {
-                      field: 'phone',
+                      field: 'loan_limit',
                       operator: 'contains',
                       value: inputValue
                   },
+                  {
+                    field: 'lender',
+                    operator: 'contains',
+                    value: inputValue
+                  },
+                  {
+                    field: 'status',
+                    operator: 'contains',
+                    value: inputValue
+                  },
+                  {
+                    field: 'submission_date',
+                    operator: 'contains',
+                    value: inputValue
+                  },
+                  {
+                    field: 'settlement_date',
+                    operator: 'contains',
+                    value: inputValue
+                  },
+
                   {
                       field: 'address',
                       operator: 'contains',