Replies

• petercdobbs Posts: 3Questions: 0Answers: 0

  December 2021

  Found the answer myself...

      rowGroup: {
          dataSrc: [ 'CategoryMasterName','CategoryName','Group1Name','Group2Name','Group3Name','Group4Name','Group5Name'],
          **emptyDataGroup: null**
      },
  
• petercdobbs Posts: 3Questions: 0Answers: 0

  December 2021

  If you are interested in my final solution (till i edit it again...)

  I simplified the JSON and moved the UI rendering to the initialization script.

  productCategorizationTable = $('#productCategorizationTable').DataTable({
      destroy : true,
      autoWidth : false,
      scrollCollapse : false,
      ordering: false,
      order: [[2, 'desc'],[1, 'asc'],[5, 'desc'],[4, 'asc'],[8, 'desc'],[7, 'asc'],[11, 'desc'],[10, 'asc'],[14, 'desc'],[13, 'asc'],[17, 'desc'],[16, 'asc'],[20, 'desc'],[19, 'asc']],
      rowGroup: {
  
          startRender: function ( rows, group, level ) {
              let thisId = '';
              let thisName = '';
              let thisClass = '';
              let thisIcon = '';
              let thisStatus = '';
              let statusIcon = '';
              //console.log(level);
              //console.log(group);
              //console.log(rows);
              if(level===0){
                  thisId = rows.data().pluck('CategoryMasterId');
                  thisName = rows.data().pluck('CategoryMasterName');
                  thisClass = 'dtCategoryMaster';
                  thisIcon = '<i class="icon-tree6 mr-2"></i>';
                  thisStatus = rows.data().pluck('CategoryMasterStatus');
              }
              if(level===1){
                  thisId = rows.data().pluck('CategoryId');
                  thisName = rows.data().pluck('CategoryName');
                  thisClass = 'dtCategory';
                  thisIcon = '<i class="icon-arrow-small-right mr-2"></i>';
                  thisStatus = rows.data().pluck('CategoryStatus');
              }
              if(level===2){
                  thisId = rows.data().pluck('Group1Id');
                  thisName = rows.data().pluck('Group1Name');
                  thisClass = 'dtGroup1 dtGroup';
                  thisStatus = rows.data().pluck('Group1Status');
              }
              if(level===3){
                  thisId = rows.data().pluck('Group2Id');
                  thisName = rows.data().pluck('Group2Name');
                  thisClass = 'dtGroup2 dtGroup';
                  thisStatus = rows.data().pluck('Group2Status');
              }
              if(level===4){
                  thisId = rows.data().pluck('Group3Id');
                  thisName = rows.data().pluck('Group3Name');
                  thisClass = 'dtGroup3 dtGroup';
                  thisStatus = rows.data().pluck('Group3Status');
              }
              if(level===5){
                  thisId = rows.data().pluck('Group4Id');
                  thisName = rows.data().pluck('Group4Name');
                  thisClass = 'dtGroup4 dtGroup';
                  thisStatus = rows.data().pluck('Group4Status');
              }
              if(level===6){
                  thisId = rows.data().pluck('Group5Id');
                  thisName = rows.data().pluck('Group5Name');
                  thisClass = 'dtGroup5 dtGroup';
                  thisStatus = rows.data().pluck('Group5Status');
              }
              if(thisStatus[0]==0){
                  statusIcon = '<span class="ml-2 badge badge-light badge-striped badge-striped-left border-left-info">inactive</span>'
              }
              if(!thisId[0]){
                  return null
              }
              else {
                  return $('<tr/>')
                  .append( '<td class="'+thisClass+'" data-id="'+thisId[0]+'">'+thisIcon+thisName[0]+statusIcon+'</td>' );
              }           
          },
          dataSrc: [ 'CategoryMasterName','CategoryName','Group1Name','Group2Name','Group3Name','Group4Name','Group5Name'],
          emptyDataGroup: null
      },
      stateSave: true,
      paging: false,
      deferRender: false,
      scroller: true,
      info: false,
      scrollY: 500,
      scrollX: true,
      columnDefs: [
          {
              targets: [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
              visible: false
          }
      ],
      language: {
          search: '<span>Filter:</span> _INPUT_',
          searchPlaceholder: 'Type to filter...'
      },
      ajax: {
          "url":  "?ts=" + Math.floor(Date.now() / 1000),
          "type": "POST",
          "data": {
              "action": "adminProduct:GetCategorizationDataTable",
              "datatype": "json"
          } 
      },
      columns: [
          { "data": "CategoryMasterId" },
          { "data": "CategoryMasterName" },
          { "data": "CategoryMasterStatus" },
          { "data": "CategoryId" },
          { "data": "CategoryName" },
          { "data": "CategoryStatus" },
          { "data": "Group1Id" },
          { "data": "Group1Name" },
          { "data": "Group1Status" },
          { "data": "Group2Id" },
          { "data": "Group2Name" },
          { "data": "Group2Status" },
          { "data": "Group3Id" },
          { "data": "Group3Name" },
          { "data": "Group3Status" },
          { "data": "Group4Id" },
          { "data": "Group4Name" },
          { "data": "Group4Status" },
          { "data": "Group5Id" },
          { "data": "Group5Name" },
          { "data": "Group5Status" }
      ]
  });
  
  productCategorizationTable.on( 'draw', function () {
          $('.dtGroup').on('click',function(){
              let myId = $(this).data('id');
              getCategorizationGroup(myId);
          })
          $('.dtCategory').on('click',function(){
              let myId = $(this).data('id');
              getCategorizationCategory(myId);
          })
          $('.dtCategoryMaster').on('click',function(){
              let myId = $(this).data('id');
              getCategorizationMaster(myId);
          })
  } );
  

  Here's a sample of my JSON returned from the AJAX call:

  {
  "data": [
  {
  "CategoryMasterId": "1",
  "CategoryMasterName": "Common",
  "CategoryMasterStatus": "1",
  "CategoryId": "5",
  "CategoryName": "IN PROGRESS",
  "CategoryStatus": "1",
  "Group1Id": "57212",
  "Group1Name": "Barcode Feed",
  "Group1Status": "1",
  "Group2Id": null,
  "Group2Name": null,
  "Group2Status": null,
  "Group3Id": null,
  "Group3Name": null,
  "Group3Status": null,
  "Group4Id": null,
  "Group4Name": null,
  "Group4Status": null,
  "Group5Id": null,
  "Group5Name": null,
  "Group5Status": null
  },
  {
  "CategoryMasterId": "1",
  "CategoryMasterName": "Common",
  "CategoryMasterStatus": "1",
  "CategoryId": "5",
  "CategoryName": "IN PROGRESS",
  "CategoryStatus": "1",
  "Group1Id": "57211",
  "Group1Name": "Barcode Feed - INACTIVE ONLY",
  "Group1Status": "1",
  "Group2Id": null,
  "Group2Name": null,
  "Group2Status": null,
  "Group3Id": null,
  "Group3Name": null,
  "Group3Status": null,
  "Group4Id": null,
  "Group4Name": null,
  "Group4Status": null,
  "Group5Id": null,
  "Group5Name": null,
  "Group5Status": null
  },
  {
  "CategoryMasterId": "1",
  "CategoryMasterName": "Common",
  "CategoryMasterStatus": "1",
  "CategoryId": "5",
  "CategoryName": "IN PROGRESS",
  "CategoryStatus": "1",
  "Group1Id": "45973",
  "Group1Name": "Needs Brand",
  "Group1Status": "1",
  "Group2Id": null,
  "Group2Name": null,
  "Group2Status": null,
  "Group3Id": null,
  "Group3Name": null,
  "Group3Status": null,
  "Group4Id": null,
  "Group4Name": null,
  "Group4Status": null,
  "Group5Id": null,
  "Group5Name": null,
  "Group5Status": null
  },
  {
  "CategoryMasterId": "1",
  "CategoryMasterName": "Common",
  "CategoryMasterStatus": "1",
  "CategoryId": "5",
  "CategoryName": "IN PROGRESS",
  "CategoryStatus": "1",
  "Group1Id": "45974",
  "Group1Name": "Needs Cross Sell",
  "Group1Status": "1",
  "Group2Id": null,
  "Group2Name": null,
  "Group2Status": null,
  "Group3Id": null,
  "Group3Name": null,
  "Group3Status": null,
  "Group4Id": null,
  "Group4Name": null,
  "Group4Status": null,
  "Group5Id": null,
  "Group5Name": null,
  "Group5Status": null
  }
  ]
  }

  The CSS:

  productCategorizationTable .dtrg-group{

  background-color: #FFFFFF;
  

  }

  .dtCategoryMaster{
  font-weight: bold;
  }

  .dtCategory{
  padding-left: 25px !important;
  }

  .dtGroup1{
  padding-left: 60px !important;
  }

  .dtGroup2{
  padding-left: 80px !important;
  }

  .dtGroup3{
  padding-left: 100px !important;
  }

  .dtGroup4{
  padding-left: 120px !important;
  }

  .dtGroup5{
  padding-left: 140px !important;
  }

  And here's what it looks like: