Display nested Child Table records in Bootstrap Popup on Button Click

Issue

if we click subitems it can open one pop up window after entering values on pop up window we can close that window

after clicking of add function in the parent row the values can go to the above row in that

Order values are displayed in table format

I need to display order values on the pop-up window.

The below code is in AngularJs and this is exactly what I want but can someone convert the same result without angular when I submit data it will pass all data to the asp.net core controller.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('MyApp', [])
  app.controller('MyController', function($scope, $window) {
    $scope.Customers = [{
      Name: "John Hammond",
      Country: "United States",
      Orders: [{
          OrderId: 10248,
          Freight: 32.38,
          ShipCountry: 'France'
        },
        {
          OrderId: 10249,
          Freight: 12.43,
          ShipCountry: 'Japan'
        },
        {
          OrderId: 10250,
          Freight: 66.35,
          ShipCountry: 'Russia'
        }
      ]
    }];

    $scope.Orders = [];
    $scope.Add = function() {
      var customer = {};
      customer.Name = $scope.Name;
      customer.Country = $scope.Country;
      customer.Orders = $scope.Orders;
      $scope.Customers.push(customer);
      $scope.Orders = [];
      $scope.Name = "";
      $scope.Country = "";
    };
    $scope.add2 = function() {

      var items = {};
      items.OrderId = $scope.OrderId;
      items.Freight = $scope.Freight;
      items.ShipCountry = $scope.ShipCountry;
      $scope.Orders.push(items);
      $scope.OrderId = "";
      $scope.Freight = "";
      $scope.ShipCountry = "";
    }
    $scope.Remove = function(index) {
      var name = $scope.Customers[index].Name;
      if ($window.confirm("Do you want to delete: " + name)) {
        $scope.Customers.splice(index, 1);
      }
    }
    $scope.remove1 = function(index) {
      var name = $scope.Orders[index].OrderId;
      if ($window.confirm("Do you want to delete: " + name)) {
        $scope.Orders.splice(index, 1);
      }
    }
  });
</script>
<div ng-app="MyApp" ng-controller="MyController">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th>
        Name
      </th>
      <th>
        Country
      </th>
      <th>
        Orders
      </th>
      <th>
        &nbsp;
      </th>
    </tr>
    <tbody ng-repeat="m in Customers">
      <tr>
        <td>
          <input type="text" value="{{m.Name}}" />
        </td>
        <td>
          <input type="text" value="{{m.Country}}" />
        </td>
        <td value="{{m.subitems}}">
          <button type="button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
                        View Orders</button>
          <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" ng-click="clicked=false">
                                        ×</button>
                  <h4 class="modal-title">
                    Order Details</h4>
                </div>
                <div class="modal-body">
                  <table class="table table-condensed">
                    <thead>
                      <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                          OrderId
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          Freight
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          ShipCountry
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                        </th>
                      </tr>
                    </thead>
                    <tbody ng-repeat="o in m.Orders">
                      <tr>
                        <td>
                          {{o.OrderId}}
                        </td>
                        <td>
                          {{o.Freight}}
                        </td>
                        <td>
                          {{o.ShipCountry}}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" ng-click="clicked=false">
                                        Ok</button>
                </div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <input type="button" ng-click="Remove($index)" value="Remove" class="btn btn-danger" />
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <input type="text" ng-model="Name" />
        </td>
        <td>
          <input type="text" ng-model="Country" />
        </td>
        <td>
          <button type="button" class="btn btn-primary" ng-model="subitems" data-toggle="modal" data-target="#popup">
                        Add Orders</button>
        </td>
        <td>
          <input type="button" ng-click="Add()" class="btn btn-primary" value="Add" />
        </td>
      </tr>
    </tfoot>
  </table>
  <div class="modal fade" id="popup" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
                        ×</button>
          <h4 class="modal-title">
            Modal Header</h4>
        </div>
        <div class="modal-body">
          <div class="s2vk-container">
            <div class="row">
              <div class="col-md-8">
                <div class="panel panel-default">
                  <table class="table table-condensed">
                    <thead>
                      <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                          OrderId
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          Freight
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          ShipCountry
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData2" ng-repeat="subitem in Orders">
                        <td>
                          {{subitem.OrderId}}
                        </td>
                        <td>
                          {{subitem.Freight}}
                        </td>
                        <td>
                          {{subitem.ShipCountry}}
                        </td>
                        <td>
                          <button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly="readonly">
                                                        Delete</button>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <tr style="padding-left: 20px; padding-right: 20px;">
                        <td>
                          <input type="text" class="input-sm form-control" ng-model="OrderId" />
                        </td>
                        <td>
                          <input type="text" class="input-sm form-control" ng-model="Freight" />
                        </td>
                        <td>
                          <input type="text" class="input-sm form-control" ng-model="ShipCountry" />
                        </td>
                        <td>
                          <button type="button" class="btn btn-primary" ng-click="add2()">
                                                        Add</button>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Solution

I've tried to implement the same using jQuery. The html contains the markup of the html as well as the modal. The manipulations are being done in JavaScript.

Not the best code but it should give an idea.

When the user clicks on submit you can send either cart or cart.customers to the asp.net controller.

class Customer {
  constructor(name, country, orders) {
    this.Name = name;
    this.Country = country;
    this.Orders = orders;
  }

  addOrder(id, frieght, shiptCountry) {
    var order = {};
    order.OrderId = id;
    order.Freight = frieght;
    order.ShipCountry = shiptCountry;

    this.Orders.push(order);
  }

  removeOrder(index) {
    var name = this.Orders[index].OrderId;
    if (confirm("Do you want to delete: " + name)) {
      this.Orders.splice(index, 1);
    }
  }
}

var c = new Customer('John Hammond', 'United States', [{
    OrderId: 10248,
    Freight: 32.38,
    ShipCountry: 'France'
  },
  {
    OrderId: 10249,
    Freight: 12.43,
    ShipCountry: 'Japan'
  },
  {
    OrderId: 10250,
    Freight: 66.43,
    ShipCountry: 'Russia'
  }
]);

var cart = {
  customers: new Array(c),
  add: function(name, country, orders) {
    var customer = new Customer(name, country, orders);
    this.customers.push(customer);
  },
  remove: function(index) {
    var name = this.customers[index].Name;
    if (confirm("Do you want to delete: " + name)) {
      this.customers.splice(index, 1);
    }
  }
};

function updateContent() {
  $('#tableBody').html('');

  cart.customers.forEach(function(element, index) {


    $('#tableBody').append('<tr></tr>');
    $('#tableBody tr:last').append('<td><input type="text" value="' + element.Name + '" /></td>');
    $('#tableBody tr:last').append('<td><input type="text" value="' + element.Country + '" /></td>');
    $('#tableBody tr:last').append('<td><button type="button" class="btn btn-primary" data-index="' + index + '" data-toggle="modal" data-target="#popup">View Orders</button></td>');
    $('#tableBody tr:last').append('<input type="button" data-index="' + index + '" value="Remove" class="btn btn-danger btnRemoveCust" />');
  });

  $('.btnRemoveCust').click(function() {
    var index = $(this).data('index');
    cart.remove(index);
    updateContent();
  });

};

updateContent();
var currentOrders = [];

$('#btnAdd').click(function() {
  var name = $('#txtName').val();
  var country = $('#txtCountry').val();

  cart.add(name, country, currentOrders);
  $('#txtName').val('');
  $('#txtCountry').val('');
  currentOrders = [];

  updateContent();
});



$('#popup').on('show.bs.modal', function(event) {
  var source = $(event.relatedTarget);
  var index = source.data('index');
  var orders = [];
  if (index === -1) {
    //Customer is not yet created. Use currentOrder
    current = true;
    orders = currentOrders;
    $(this).find('tfoot').show();
  } else {
    current = false;
    orders = cart.customers[index].Orders;
    $(this).find('tfoot').hide();
  }

  updatePopUp($(this), orders, current);
});

function updatePopUp(modal, orders) {
  modal.find('tbody').html('');
  if (orders) {
    orders.forEach(function(element, index) {

      modal.find('tbody').append('<tr style="padding-left: 20px; padding-right: 20px;" ></tr>');
      modal.find('tbody tr:last').append('<td><input type="text" class="input-sm form-control" readonly value="' + element.OrderId + '" /></td>');
      modal.find('tbody tr:last').append('<td><input type="text" class="input-sm form-control" readonly value="' + element.Freight + '" /></td>');
      modal.find('tbody tr:last').append('<td><input type="text" class="input-sm form-control" readonly value="' + element.ShipCountry + '" /></td>');
      if (current) {
        modal.find('tbody tr:last').append('<td><input type="button" data-index="' + index + '" value="Remove" class="btn btn-danger btnRemoveOrder" /></td>');
      }

    });

    $('.btnRemoveOrder').click(function() {
      var index = $(this).data('index');
      currentOrders.splice(index, 1);
      updatePopUp($('#popup'), currentOrders, false);
    })
  }
}

$('#btnAddOrder').click(function() {

  var order = {
    OrderId: $('#txtId').val(),
    Freight: $('#txtFreight').val(),
    ShipCountry: $('#txtShipCountry').val()
  }

  currentOrders.push(order);
  $('#txtId').val('');
  $('#txtFreight').val('');
  $('#txtShipCountry').val('');

  updatePopUp($('#popup'), currentOrders, false);

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id='myApp'>
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th>
        Name
      </th>
      <th>
        Country
      </th>
      <th>
        Orders
      </th>
      <th>
        &nbsp;
      </th>
    </tr>
    <tbody id='tableBody'></tbody>
    <tfoot>
      <tr>
        <td>
          <input type="text" id='txtName' />
        </td>
        <td>
          <input type="text" id='txtCountry' />
        </td>
        <td>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-index="-1" data-target="#popup">
            Add Orders</button>
        </td>
        <td>
          <input type="button" id="btnAdd" class="btn btn-primary" value="Add" />
        </td>
      </tr>
    </tfoot>
  </table>

  <div class="modal fade" id="popup" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            ×</button>
          <h4 class="modal-title">
            Modal Header</h4>
        </div>
        <div class="modal-body">
          <div class="s2vk-container">
            <div class="row">
              <div class="col-md-8">
                <div class="panel panel-default">
                  <table class="table table-condensed">
                    <thead>
                      <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                          OrderId
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          Freight
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          ShipCountry
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                        </th>
                      </tr>
                    </thead>
                    <tbody id='#modalBody'>

                    </tbody>
                    <tfoot>
                      <tr style="padding-left: 20px; padding-right: 20px;">
                        <td>
                          <input type="text" id='txtId' class="input-sm form-control" ng-model="OrderId" />
                        </td>
                        <td>
                          <input type="text" id='txtFreight' class="input-sm form-control" ng-model="Freight" />
                        </td>
                        <td>
                          <input type="text" id='txtShipCountry' class="input-sm form-control" ng-model="ShipCountry" />
                        </td>
                        <td>
                          <button type="button" id='btnAddOrder' class="btn btn-primary">
                            Add</button>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            Close</button>
        </div>
      </div>
    </div>
  </div>

</div>

Answered By - Taleeb