Answers

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

  August 2023

  Likely you will need to use responsive.details.renderer to render the Responsive child display. This will allow you to use data-dt-row and data-dt-column to allow the APIs to find the parent row. See the last example in the responsive.details.renderer docs.

  Kevin
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  August 2023

  Just to add a little bit to Kevin's note - I think what is happening is that you are placing event handlers on the action buttons that are selecting the buttons when in the table row. However, when they are placed into the responsive view, the selectors aren't looking for the buttons there.

  Without code (or an example as requested in the forum rules) we can't say for certain, but most likely you need to extend your event listener to handle the buttons in the responsive view as well.

  Allan
• salmanelahi93 Posts: 4Questions: 1Answers: 0

  August 2023 edited August 2023

  $("#datatable-grid").DataTable({
          "responsive": true,
          "lengthChange": true,
          "autoWidth": true,
          "buttons": [
            {
              extend: 'excel',
              title: pageTitle,
              exportOptions: {
                columns: arrColsExport,
                stripHtml: true,
              }
            },
            {
              extend: 'print',
              title: pageTitle,
              exportOptions: {
                columns: arrColsExport,
                stripHtml: true,
              }
              //customize: function (win) {
              //  $(win.document.body).find('thead').css('background-color', 'grey');
              //}
            }],
          "paging": true,
          "searching": isSearchingAllow,
          "ordering": true,
          "info": true,
          columnDefs: [
            //{ targets: "action", orderable: false },
            {
              target: 5,
              visible: true,
              searchable: false
            }
          ]
        }).buttons().container().appendTo('#datatable-grid_wrapper .col-md-6:eq(0)');
      });
  

  I implemented the above code for rendering the datatable @allan.

  I also add the following value in responsive property but not succeeded @kthorngren.

  "responsive": {
            details: {
              renderer: $.fn.dataTable.Responsive.renderer.tableAll()
            }
          },
  

  Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  August 2023

  Thank you. However, I don't see anything there about the event handlers for your action buttons?

  Allan
• salmanelahi93 Posts: 4Questions: 1Answers: 0

  August 2023

  @allan I just used angular code for the action button i.e. angular's onclick attribute, and call angular's method for functionality.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  August 2023

  I suspect that because Responsive moves the elements in the document, and creates new elements for the responsive details view, that is the issue.

  Try using this for your Responsive options in the DataTable configuration:

      responsive: {
          details: {
              renderer: DataTable.Responsive.renderer.listHiddenNodes()
          }
      }
  

  That is an "experimental" (not very - it is widely used and should be solid) renderer that uses the original nodes and should allow your action buttons to work in this case.

  Allan
• salmanelahi93 Posts: 4Questions: 1Answers: 0

  August 2023

  

  @allan Action buttons are working fine after implementing your suggested change, but then everything is duplicating as circled in the screenshot.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  August 2023

  Can you link to a test case showing the issue so I can look into it please?

  I suspect it will be something to do with Angular. If you can tell Angular not to update the content of the table, do so.

  Allan