Answers

• kthorngren Posts: 21,457Questions: 26Answers: 4,975

  March 2023 Answer ✓

  The problem is you are using colspan within the tbody which Datatables doesn't support. See the HTML docs for details. Likely you are getting an error in your browser's console due to your table structure.

  Datatables does support child rows but Datatables expects to be in control of inserting and removing the tr element to show the rows. See this example.

  One option might be to take the child row data and add it to the parent row and use columns.visible to hide those columns. These can then be displayed in the child similar to the example.

  Kevin
• nidzolino Posts: 9Questions: 2Answers: 1

  March 2023

  Thanks for the answer, now it's clear to me, unfortunately I control my code and events from behind the code, I also generate everything dynamically, even the tree itself, that means I would have to generate the script itself in the same way ... it all seems too complicated ... that's why I will give up on this solution.

  Can you help me find a solution that consists of the following:

  1. The table contains header data
  2. When I click on a row, with the help of the slider, the entire table moves to the left (animation) and then items related to that row appear in the table

  I'm just asking for information on how to search the forum or google with that function, I don't know where to start the search at all, and I've often seen that effect / function on applications...
• kthorngren Posts: 21,457Questions: 26Answers: 4,975

  March 2023 Answer ✓

  he table contains header data

  Not sure what you mean. Please provide more details of what you are looking for.

  When I click on a row, with the help of the slider, the entire table moves to the left (animation) and then items related to that row appear in the table

  Here is a blog showing how to use a slider with child rows.

  Kevin
• nidzolino Posts: 9Questions: 2Answers: 1

  March 2023 edited March 2023

  Yes, it's ok, I solved it with your help. Thanks again.
  One more thing left, how to capture the ID when I open the bootstrap form and pass it in webform behind? That is, how can I control the form opens event.
  I'll populate the DataTable in bootstrap items with that ID later

  $('#myDataTable tbody').on('dblclick', 'tr', function () {
      $("#id").val(table.row(this).data()[0]);
      $("#myModal").modal("show");
  });
  
• kthorngren Posts: 21,457Questions: 26Answers: 4,975

  March 2023 edited March 2023 Answer ✓

  how to capture the ID

  Capture the ID of what?

  See this example. It gets the row data and displays in an alert. Update the code to populate your form data. If you want help with this then please post a test case that shows what you have.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• nidzolino Posts: 9Questions: 2Answers: 1

  March 2023

  The problem lies in the fact that I am developing the application in asp.net. It's not pure HTML, as I wrote earlier, I generate html from code (dynamically).

  I will try to explain one more time.

  I am using asp.net (webform). As you already know, in the asp.net development environment there is:

  a) source (html)
  b) backend code that is developed in vb.net

  So, in b) I generate an HTML DataTable structure:

  vb.net behind

  ...
  
  html.Append("<table id=""myDataTable"" class""display"" style=""width: 100%;"">")
  
  html.Append("<thead>")
  html.Append("<tr>")
  
  For Each row As DataRow In dt.Rows
  
        For Each column As DataColumn In dt.Columns
            HtmlString.Append("<td>")
            HtmlString.Append(row(column.ColumnName))
            HtmlString.Append("</td>")
        Next
  
  Next
  
  myTable.Controls.Add(New Literal() With {.Text = html.ToString()})
  ...
  

  and send it here:

  <div id="myTable" runat="server"></div>

  example HTML structure:

  <table id="myDataTable" style="width: 100%" class="table">
      <thead>
          <tr>
              <th>ID</th>
              <th>Barcode</th>
              <th>Order</th>
              <th>Lock</th>
              <th>Status</th>
              <th>Date/Time</th>
              <th>Patient</th>
              <th>Operater</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>10006</td>
              <td>2100000100064</td>
              <td>22-RN-10006</td>
              <td>Lock</td>
              <td>Working</td>
              <td>15.11.2022 14:35:54</td>
              <td>Jame Irvas</td>
              <td>Anna Arcell</td>
          </tr>
      </tbody>
  </table>
  

  That's all right, everything works perfectly.

  When I click on a row, I use the following to open the boostrap form, please see:

  <script>
  
      $(document).ready(function ($) {
          $('#myDataTable').DataTable({
              "scrollX": true,
              "ordering": true,
              "searching": true,
              "select": true,
              "responsive": true,
          });
  
          var table = $('#myDataTable').DataTable();
  
          $('#myDataTable tbody').on('click', 'tr', function () {
              if ($(this).hasClass('selected')) {
                  $(this).removeClass('selected');
              } else {
                  table.$('tr.selected').removeClass('selected');
                  $(this).addClass('selected');
              }
          });
  
          $('#myDataTable tbody').on('dblclick', 'tr', function () {
              if ($(this).hasClass('selected'))  {
              } else {
                  $(this).addClass('selected');
              }
              $("#id").val(table.row(this).data()[0]);
              $("#myModal").modal("show");
          });
      });
  
  </script>
  

  The modal form I call in html looks like this:

  <div id="myModal" class="modal fade" data-backdrop="static">
      <div class="modal-dialog" style="width:90%;">
          <div class="modal-content">
              <div class="modal-header"></div>
              <div class="modal-body">
                   <table>
                      <tr>
                          <td>
                              <div class="input-group input-group-sm">
                                  <div class="input-group-prepend">
                                      <span class="input-group-text">ID</span>
                                  </div>
                                  <input type="datetime" id="ID" class="form-control" aria-label="Small" aria-describedby="ID">
                              </div>
                          </td>
                      </tr>
                  </table>
                  <div id="myTableItems" class="display" runat="server"> </div>
               </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save Changes</button>
              </div>
          </div>
      </div>
  </div>
  

  when the boostrap form opens, now I need to fill the DataTable with the data that I need to generate in the same way:

  <div id="myTableItems" class="display" runat="server"> </div>

  My question is the following:

  To fill in the table in bootstrap "myTableItems" I have to ask my SQL to show me the data of the selected row from the previous table "myTable". How can I send the ID of the selected row to b) or call a function located in b) passing it the selected ID
• allan Posts: 63,692Questions: 1Answers: 10,500 Site admin

  March 2023

  table.rows({selected: true}).ids(); // get the row ids
  
  // or
  table.rows({selected: true}).data(); // get the row data and pull out want you need from it
  

  Note that to use rows().ids() you either need to have a DT_RowId property in the data source for the table or use rowId to tell DataTables where to find the row id property.

  Allan
• nidzolino Posts: 9Questions: 2Answers: 1

  March 2023 edited March 2023

  Ok I understand, the problem is that I don't know how to pass that ID to my own code beihind.

  I need information about the event that I clicked on the row and I need to pass that id in the code behind.

  Maybe it's not a question for this forum but a forum for asp.net?
• kthorngren Posts: 21,457Questions: 26Answers: 4,975

  March 2023

  I'm not familiar with asp.net. Allan might be able to answer your question but it is outside the scope of this forum. While waiting to see if Allan can answer your question maybe use Stack Overflow to research options. This is one of many threads I found:
  https://stackoverflow.com/questions/31576047/how-to-pass-javascript-variable-to-server-side-asp-net

  Kevin
• nidzolino Posts: 9Questions: 2Answers: 1

  March 2023

  Yes, the solution is to pass it, but in addition to passing it, I also need a trigger, a function call that should populate the DataTable. It is the event when the modal form is opened.

  Thanks again for your help
• nidzolino Posts: 9Questions: 2Answers: 1

  March 2023 Answer ✓

  I've been developing the app in the wrong direction all along
  It is very difficult to generate HTML and then want to handle events behind the code. I'm not saying it's not possible, with AJAX, or PageMethods... but it's very confusing and hard to maintain.

  In the end, I did the following https://aspsnippets.com/Articles/Using-jQuery-DataTables-with-GridView-in-ASPNet.aspx

  so the DataTable can be integrated into the GridView control within asp.net, from where I can directly manage the events. All that remains is to test and check whether the functionality of the DataTable is ok, whether it is possible to influence the styles ... mainly I want to share with you what I discovered, maybe it will be useful to someone.

  This topic can be concluded as resolved, I will be free to ask what interests me in other topics