Hinsura
3/2/2018 - 12:02 PM

DataTable - v2 (Nested)

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult GetPolicyInsuredCoverageList(int policyInsuredId)
{
  var policyInsuredCoverageDtoList = _policyAppService.GetPolicyInsuredCoverageListByInsuredId(policyInsuredId);
  var nestedList = PolicyInsuredCoverageViewModel.LoadFrom(policyInsuredCoverageDtoList);

  var gridReadyJson = new JArray();
  foreach (var item in nestedList)
  {
    var jsonChildObj = "";
    var counter = 0;

    if (item.Childs != null)
    {
      foreach (var child in item.Childs)
      {
        counter += 1;
        if (counter > 1) { jsonChildObj += ","; }
        jsonChildObj +=
        "{" +
          "\"data\": " +
          "{" +
            "\" \": \" \"," +
            "\"Teminat\": \"" + child.CoverageName + "\"," +
            "\"Net Prim\": \"" + MyHelpers.FormatToTurkishNumericString(child.NetPremium) + "\"," +
            "\"Prim\": \"" + MyHelpers.FormatToTurkishNumericString(child.Premium) + "\"," +
            "\"Komisyon\": \"" + MyHelpers.FormatToTurkishNumericString(child.Commission) + "\"," +
            "\"Vergi\": \"" + MyHelpers.FormatToTurkishNumericString(child.TaxAmount) + "\"," +
            "\"Brüt Prim\": \"" + MyHelpers.FormatToTurkishNumericString(child.GrossPremium) + "\"" +
          "}, " +
          "\"kids\": []" +
        "}";
      }
    }

    var jsonParentObj = "" +
    "{" +
      "\"data\": " +
      "{" +
        "\"Teminat\": \"" + item.CoverageName + "\"," +
        "\"Net Prim\": \"" + MyHelpers.FormatToTurkishNumericString(item.NetPremium) + "\"," +
        "\"Prim\": \"" + MyHelpers.FormatToTurkishNumericString(item.Premium) + "\"," +
        "\"Komisyon\": \"" + MyHelpers.FormatToTurkishNumericString(item.Commission) + "\"," +
        "\"Vergi\": \"" + MyHelpers.FormatToTurkishNumericString(item.TaxAmount) + "\"," +
        "\"Brüt Prim\": \"" + MyHelpers.FormatToTurkishNumericString(item.GrossPremium) + "\"" +
      "}, " +
      "\"kids\": [" + jsonChildObj + "]" +
    "}";

    var o = JObject.Parse(jsonParentObj);
    gridReadyJson.Add(o);
  }
  return Json(gridReadyJson);
}
@model int

@{
  @Html.AntiForgeryToken()
  
  ViewBag.Title = L("InsuredPremiumDetail");
  var controllerName = ViewContext.RouteData.Values["controller"].ToString();
  
  var pageData = Url.Action("GetPolicyInsuredCoverageList", @controllerName);
}

@section PageStyleInclude {
}

<style>
  .tableWrapper table.dataTable tr.rowHover:hover {
    background-color: rgb(243, 244, 246) !important;
  }
  .rightAlign {
      text-align: right;
  }
  tr.details {
    background-color: #eee !important;
  }
  tr.details table tr th:nth-of-type(1) {
    padding-left: 41px !important;
  }
  .empty-placeholder {
    height: 320px;
  }
  .expanderCol {
    width: 1px !important;
  }
</style>

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title">@ViewBag.Title</h4>
</div>
<div class="modal-body">
  <div id="nestedTable" class="table-container">
    <div class="empty-placeholder"></div>
  </div>
</div>

@section PageScriptInclude {
    
}

<script>
  var __RequestVerificationToken = function () { return $('input[name="__RequestVerificationToken"]').val(); }

  $(document).ready(function() {

    var gridData = {
      "__RequestVerificationToken": __RequestVerificationToken,
      policyInsuredId: @Model
    };

    var xhrParams = {
      requestMethod: "POST",
      url: "@pageData",
      dataType: "json",
      data: gridData,
      formToValidateObj: null,
      blockElem: ".page-container",
      iconOnly: false,
      message: "Yükleniyor...",
      unblockOnComplete: true
    };

    var xhrPromise = jqAjax(xhrParams);

    xhrPromise.done(function(xhr) {
      if (xhr.success && xhr.result) {
          //console.log(JSON.stringify(xhr.result));
        $(".empty-placeholder").hide();

        var tableSettings = {
          language: {
              url: "/Scripts/DataTables/Turkish.json"
          },
          ordering: true,
          info: false,
          searching: false,
          paging: false,
          pageLength: 7,
          lengthChange: false,
          //lengthMenu: [[10, 50, 100], [10, 50, 100]],//[[10, 50, 100, -1], [10, 50, 100, "Hepsi"]]
          order: [[2, "desc"]],/* 0-based indexing */
          columnDefs: [
            {
              targets: 0,
              orderable: false,
              className: "expanderCol"
            },
            {
              targets: 1,
              type: "html",
              render: function (data, type, full, meta) {
                if (isDetailTable(meta.settings)) {
                  return "<div style='padding-left: 31px'>" + data + "</div>";
                }
                return data;
              }
            },
            {
              targets: [2, 3, 4, 5, 6],
              className: "rightAlign"
            }
          ],

          //createdRow: function (row, data, dataIndex) {
          //    $(row).attr('id', data.id);/* needed for selecting the correct selectbox item in edit mode */
          //}

          initComplete: function(settings, json) {

            var dtApi = this.api();
            
            if (isDetailTable(settings)) {

              /* hide the expand icon column */
              dtApi.column(0).visible(false);

              /* change header title */
              $(dtApi.column(1).header()).text('Teminat Dağılımı');

            } else {

              /* change header title */
              $(dtApi.column(1).header()).text('Ana Teminatlar');

              /* dynamically add the total row to grid */
              var netPremium, premium, commission, tax, grossPremium = 0;
              var amountStr, amountFloat;
              dtApi.rows().every(function(rowIdx, tableLoop, rowLoop) {
                var data = this.data();
                $.each(data, function(ix, val) {
                  amountStr = val.replace(",", "|").replace(".", ",").replace("|", ".");
                  amountFloat = DOLLAR({ amount: amountStr, precision: 2, symbol: false }).format();
                  switch (ix) {
                    case 2:
                      netPremium = currency(netPremium).add(amountFloat);
                      break;
                    case 3:
                      premium = currency(premium).add(amountFloat);
                      break;
                    case 4:
                      commission = currency(commission).add(amountFloat);
                      break;
                    case 5:
                      tax = currency(tax).add(amountFloat);
                      break;
                    case 6:
                      grossPremium = currency(grossPremium).add(amountFloat);
                      break;
                  }
                });
              });

              var rowObj = {};
              rowObj[0] = " ";
              rowObj[1] = "<b>TOPLAM</b>";
              rowObj[2] = LIRA({ amount: netPremium, precision: 2, symbol: false }).format();
              rowObj[3] = LIRA({ amount: premium, precision: 2, symbol: false }).format();
              rowObj[4] = LIRA({ amount: commission, precision: 2, symbol: false }).format();
              rowObj[5] = LIRA({ amount: tax, precision: 2, symbol: false }).format();
              rowObj[6] = LIRA({ amount: grossPremium, precision: 2, symbol: false }).format();
              dtApi.row.add(rowObj).draw();

            }

          },

          drawCallback: function(settings) {
            //$("#tab_0_wrapper tr.rowHover").on("click", function () {
            //    setTimeout(function() {
            //        var $column = $("tr.details > td.details table> thead > tr > th:nth-child(2)");
            //        $column.click();
            //        if ($column.hasClass("sorting_asc")) { $column.click(); }
            //    }, 50);
            //});
          }
        };

        /* https://github.com/AndrejGajdos/nested-datatables */
        var nestedTable = new lib.NestedTables("nestedTable", xhr.result, tableSettings);
        nestedTable.initializeTableHierarchy();

        /* hack that sorts the nested table in descending order */
        //setTimeout(function() {
        //    $("#tab_0_wrapper tr.rowHover").on("click", function () {
        //        setTimeout(function() {
        //            $("tr.details > td.details table> thead > tr > th.sorting_asc").click();
        //        }, 50);
        //    });
        //}, 50);
      }
    });

  });

  var isDetailTable = function (settings) {
    return $(settings.oInstance["0"].parentElement.parentElement.parentElement).hasClass("details");
  }

</script>