Master/Detail Help #5745

5 Answer(s)

• 

  0

  ismcagdas created 6 years ago

  Support Team

  If you are talking about showing master/detail data on the UI, you can check;

  for ASP.NET Core & Angular: https://www.primefaces.org/primeng/#/table/rowgroup for ASP.NET Core & JQuery: https://datatables.net/blog/2016-03-25

  Save Cancel
• 

  0

  mdframe created 6 years ago

  I was looking for more on how the backend API and business rules are used and less of what Angular and the GUI would look like.

  Thanks,

  Matt

  Save Cancel
• 

  0

  slamj1 created 6 years ago

  Hi @mdframe, we use the tables rowexpansion feature on the frontend. There are a couple of tricky parts on the angular side. Below is a sample client-side abridged code with the key parts:

   <p-table #dataTable
                               (onLazyLoad)="getSupplementalMaintenanceList($event)"
                               [value]="primengTableHelper.records"
                               dataKey="supplementalMaintenanceList.id"  
                               rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                               [paginator]="false"
                               [lazy]="true"
                               [scrollable]="true"
                               ScrollWidth="100%"
                               [responsive]="primengTableHelper.isResponsive"
                               [resizableColumns]="primengTableHelper.resizableColumns">
                               .
                               .
                               .
                <ng-template pTemplate="body" let-record="$implicit" let-rowData let-expanded="expanded">
                              <tr>
                                  <td style="width: 3em">
                                      <div>
                                          <a href="#" [pRowToggler]="rowData">
                                              <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                                          </a>
                                      </div>
                                  </td>
                                  .
                                  .
                                  .
                  <ng-template pTemplate="rowexpansion" let-record let-rowData>
                              <div class="primeng-datatable-container">
                                  <td style="width: 3em"></td>
                                  <td colspan="6">
                                      <span>
                                          <supplementalMaintenanceListDetail></supplementalMaintenanceListDetail>
                                      </span>
                                  </td>
                              </div>
                          </ng-template>
       </p-table>    
       
  

  And the .ts file for the parent will have the child defined as a component:

          @ViewChild('supplementalMaintenanceListDetail') supplementalMaintenanceListDetail:              SupplementalMaintenanceListDetailComponent;
       
  

  The important parts are the dataKey="supplementalMaintenanceList.id" and the <ng-template pTemplate="rowexpansion" let-record let-rowData>. The dataKey will get passed to the child component when you expand the row.

  Notice the <supplementalMaintenanceListDetail></supplementalMaintenanceListDetail>? That is the child table bundled as an angular component. It receives the parent id.

  That's about all you have to do on the client side - fairly basic.

  As far as the server side, you don't need to do anything special are far as the basic CRUD operations are concerned. The parent will use it's service, while the child will use it's own. The child will of course need to have the parent ID filled in on it's entity member in order to perform the CRUD operations.

  Hope that helps. Sam.

  Save Cancel
• 

  0

  ismcagdas created 6 years ago

  Support Team

  You can check PhoneBook samples in https://github.com/aspnetzero/aspnet-zero-samples

  Save Cancel
• 

  0

  ismcagdas created 6 years ago

  Support Team

  @slamj1

  Please reopen or create another topic if you can't manage to do it.

  Save Cancel