Answers

• pgorbas Posts: 13Questions: 3Answers: 0

  November 2017

  I am noticing that in the statement $('#data-table-pendingList').DataTable().columns.adjust(); "columns" is undefined, and in fact the api call to <dataTable<.columns() is reporting that columns() is not a function.

  https://datatables.net/reference/api/columns()
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  November 2017

  $('#data-table-pendingList').DataTable().columns.adjust();

  That should work. Could you link to a test case showing the issue please.

  Allan
• pgorbas Posts: 13Questions: 3Answers: 0

  November 2017

  Yes, I have tried that exact same statement
  $('#data-table-pending List').DataTable().columns.adjust();
  several times, both when the table gets created and also on the on Init call, but the columns refuse to expand.

  My on init call ( which gets run and completes before I call set the data into the table) :

  $('#data-table-pendingList').on('init.dt', function () {
     $('#data-table-pendingList').DataTable().columns.adjust();
  }
  

  BTW, the onInit call seems to have issues as well. That even is getting fired as soon as the page template is loaded and does not wait for the api call to get the data has completed and set the data.

  My method to get data and set it into dataTable :

  
      GetPendingOrdersList();
  
      function GetPendingOrdersList() {
          var url = API_URL + "stateRegistration/getPendingOrders";
          $http({
              method: 'POST',
              url: url,
              data: {
                  PersonId: JSON.parse(sessionStorage.getItem('UserProfile')).Id
              }
          })
              .then(function (res) {
                  $scope.OrderItems = res.data
              }, function (err) {
                  $.gritter.removeAll();
                  setTimeout(function () {
                      $.gritter.add({
                          title: 'Error: Could not retrieve Pending Orders',
                          text: err.data.message,
                          sticky: false,
                          time: '5000',
                          class_name: 'my-sticky-class'
                      });
                  }, 1000);
              });
      }
  
  

  The observed course of events is:
  1) function GetPendingOrdersList() starts, make API data call
  2) DataTables onInit callback starts and ends
  3) other work is done
  4) API call from step 1, GetPendingOrdersList() , returns data and it is set into the dataTable
  5) DataTables onInit callback starts and ends Again
  6) Page completes rendering but the DataTable hass all columns hidden and the (single) data item appears under the first column header ( only) with a "+" button which will expand to show all the columns of data.
  7) have to do a toggle full screen or resize viewport to get columns to expand.

  If you had bother to follow the link I posted to the issue on Stack Overflow, where I have the ability to upload and display screen shots, you would have had read I was already calling the statement
  $('#data-table-pending List').DataTable().columns.adjust();
  but it was failing.
• pgorbas Posts: 13Questions: 3Answers: 0

  November 2017

  Allen, you asked "Could you link to a test case showing the issue please."

  I have no idea how to set up a "Test case" ?
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  November 2017

  Details are provided here on how you can use free services to create a test case if you can't link to your page.

  If you had bother to follow the link I posted to the issue on Stack Overflow, where I have the ability to upload and display screen shots

  With respect, I did. As I noted it "should work". I don't know why it isn't, which is why I asked for a test case I could debug, so I could try to provide some help.

  Allan