Answers

• allan Posts: 63,364Questions: 1Answers: 10,449 Site admin

  April 2015

  You are replacing the old table with a new completely different one, yes? In which case destroying the old table probably is the correct thing to do.

  Allan
• RefractedPaladin Posts: 7Questions: 2Answers: 1

  April 2015

  No, it's the same one. I am simply refreshing the data source based of the new row clicked in the 1st table. What I have sort of works but it creates duplicate "Sort Arrows" in the 2nd grids columns every time a new row is clicked in the 1st grid.
• RefractedPaladin Posts: 7Questions: 2Answers: 1

  April 2015

  I have reworked it to the below. The issue now is the dataSrc Where would I set it now? If I put it in the initialization I get an incorrect JSon exception on Load. If I put it in the OnClick(), like below, I don't get anything in my child grid at all.

  <script>
      $( document ).ready( function ()
      {
          var navID = '<%=CustomerNo %>';
  
          $( '#PriceListGrid' ).DataTable( {
              "ajax": {
                  "url": "api/NAVPriceList" + "/" + navID,
                  "dataSrc": ""
              },
              "columns": [
                  {
                      "data": "ID"
                  },
                  {
                      "data": "Description"
                  },
                  {
                      "data": "CustomerNo"
                  },
                  {
                      "data": "CustomerName"
                  },
                  {
                      "data": "Status"
                  },
                  {
                      "data": "CreatedBy"
                  },
                  {
                      "data": "ApprovedBy"
                  }
              ]
          } );
  
          $( '#PriceLineGrid' ).DataTable( {
              "columns": [
                  {
                      "data": "ID"
                  },
                  {
                      "data": "PriceListId"
                  },
                  {
                      "data": "Description"
                  },
                  {
                      "data": "LastCost"
                  },
                  {
                      "data": "SubGroup"
                  },
                  {
                      "data": "MfgName"
                  },
                  {
                      "data": "Comment"
                  }
              ]
          } );
  
          $( '#PriceListGrid tbody' ).on( 'click', 'tr', function ()
          {
              var id = $( 'td', this ).eq( 0 ).text();
              var table = $( '#PriceLineGrid' ).DataTable();
  
              table.ajax.dataSrc( "" );
              table.ajax.url( "api/NAVPriceLine" + '/' + id ).load();
  
          } );
      } )
  </script>
  
• allan Posts: 63,364Questions: 1Answers: 10,449 Site admin

  April 2015

  I am simply refreshing the data source based of the new row clicked in the 1st table.

  My statement was based on the fact that the data source for the columns is changing. However, if you just want to change the data in the table then ajax.url().load() is the correct way to do it.

  If that isn't working please link to the page so we can debug and help.

  Allan
• RefractedPaladin Posts: 7Questions: 2Answers: 1

  April 2015 Answer ✓

  My solution was to move the dataSrc and url options back into the initialization and add a method to my API that returns an empty Json Object.