Replies

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  July 2018

  Sounds like you have a lot going on. There is not enough information to help. Please post a link to your page or a test case with the issue for help debugging.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• GlitchEclipse Posts: 14Questions: 2Answers: 0

  July 2018

  I can do that, but maybe I over complicated the question.

  I want the elements in my child row to inherit a value contained in the parent. The unique id. I’ll post soon.
• GlitchEclipse Posts: 14Questions: 2Answers: 0

  July 2018

  Unfortunately, none of those options play nice with a asp.net mvc project with several repositories. Let me just post fragments below. Yes, there is a lot going on. I know what I need, I'm just not sure how to get to the value.

  My table code is.

  var table;
      $(document).ready(function () {
          //create points datatable from database
          table = $("#MainTable").DataTable({
              stateSave: true,
              "iDisplayLength": 50,
          });
  
          //create logic for child row
          $('#MainTable tbody').on('click','td.details-control',  function () {
                  var tr = $(this).closest('tr');
                  var row = table.row(tr);
                  //console.log("This row was clicked");
  
                  id = row.data()[1];
   ```
  
  (id = row.data()[1] is the value I need in the child row. I can be posted the child row permanently on the click of the parent if needed.
  
  
                  ```
  //console.log("row id: " + id);             
                  
                  if (row.child.isShown()) {
                      // This row is already open - close it
                      //console.log("This open row was closed");
                      row.child.hide();
                      tr.removeClass('shown');
                  } else {
                      // Open this row (calls format function below)
                      //console.log("This row was opened");
                      var type = row.data()[4];
                      if (type === "Detail") {
                          row.child(myFormat(row.data(), id)).show();
                          tr.addClass('shown');
  

  When clicked I load a specific format called myFormat and load into my child row using a query function.

  function myFormat(d, id) {
  
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
      '<tr>' +    
  '<td>' +
  '<button type="submit" class="btn btn-outline-primary" onclick="myDetail(id)" id="detailBtn" >Detail</button>' +
  '</td>' +
  '</table>';
  }
  

  The above has more buttons, but I condensed to just one for simply the example.

  The Detail button in that format calls another function that performs an ajax request and loads my partial view which just displays an html

  <

  div> called #details. (working)

  //load detail partial view
      function myDetail() {       
          $('#details').show();       
          var url = '/DefaultLaunch/myDetail/' + id;
          $.ajax({
              url: url,
              data: "id=" + id,
              success: function (data) {
                  $('#details').load(url);
                  $('#details').html(data);               
              }
          });
      }
  

  What I need is the parent id value that I started with sitting on this button (or all elements in this child row) in the child row so that if a user clicks it and the parent row is already open I can use that id value without needing to click the parent row again.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  July 2018

  Looks like there are a couple issues. First you have this:
  onclick="myDetail(id)" id="detailBtn"

  And the function has this:
  function myDetail() {

  You didn't define the id parameter in your function:
  function myDetail( id ) {

  Looks like the value of id will be the button id (detailBtn) not the row id. I started an example but for some reason lost connectivity to http://live.datatables.net while putting it together. If it comes back you can experiment with it to see what you need.
  http://live.datatables.net/jaziqiya/1/edit

  I think that you want to do is change the button line to this:

  '<button type="submit" class="btn btn-outline-primary" onclick="myDetail(' + id + ')" id="detailBtn" >Detail</button>' +
  

  This way the row id is passed as the parameter. At least I think that should work just couldn't finish my example to see.

  Kevin
• GlitchEclipse Posts: 14Questions: 2Answers: 0

  July 2018

  That almost got me there. Thanks. But now the issue is depending on the order I open the rows it doesn't update the id correctly.

  If I open rows from top to bottom it replaces the top child row with the value only.
  

  If I open rows from bottom to top it will return correctly.
  

  I added a label so I could see how it was being assigned to the child row.
• GlitchEclipse Posts: 14Questions: 2Answers: 0

  July 2018

  I was able to figure it out. After reviewing the row.child methods in depth I was able to add this variable:

  var child = table.row(this).child;
  

  and return my custom format with

  (child(myFormat(row.data(), id).show()
  

  This sets the value I need property instead of using the below which did not.

  var row = table.row(tr);
  row.child(zoneFormat(row.data(), id)).show();
  

  Thanks for the help. I really appreciate it.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  July 2018

  Glad you got it. I was able to update my example:
  http://live.datatables.net/jaziqiya/2/edit

  Kevin