CSS Modification

menashe

I have implemented child details https://datatables.net/blog/2019-01-11 two levels deep; all works as expected.

I have also implemented a similar behavior when I select anywhere on a row--(a different set of) subitems of the row is displayed.

However, I do not want the "details control" symbol (defined below, and seen in the image below)to toggle or change color!

columns: [
      {
          className: 'details-control',
          orderable: false,
          data: null,
          defaultContent: '',
          width: '10%'
      },

When I select, I want the subitem rows to open (as they do) with no change to the arrow!

I have found the css for this (in the dataTables...css files:

table.dataTable td.dt-control {
  text-align: center;
  cursor: pointer;
}
table.dataTable td.dt-control:before {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  content: "►";
}
table.dataTable tr.dt-hasChild td.dt-control:before {
  content: "▼";
}

But I am unsure what to do so that it does not affect a select but still works for a click on the row header.

Thanks!

kthorngren

However, I do not want the "details control" symbol (defined below, and seen in the image below)to toggle or change color!

When you say change color do you mean from green to red like what happens when clicking the details-control?

Sounds like you don't want to select the row when clicking details-control but do want to select the row when any other cell is clicked. Use the select.selector to control this. Something like this:

  select: {
    selector: 'td:not(:first-child)'
  },

Kevin

menashe

Kevin,

I am not seeing quite how to implement that.

I have:

       $('#items').on('select.dt', function(e, dt, type, indexes) {
            e.stopPropagation();

            let table = $('#items').DataTable();

            if (table.rows({
                    selected: true
                }).count() > 1) {
                $(".itemsEditButton").text('Edit Items')
                $(".itemsDeleteButton").text('Delete Items')
            } else {
                $(".itemsEditButton").text('Edit Item')
                $(".itemsDeleteButton").text('Delete Item')

                createsubItemsTableChildRow(dt);
            }
        })

What do I need to modify?

Thanks!

kthorngren

Its a Datatables config option not something placed within Javascript code. Here is an example:
https://live.datatables.net/loborahi/1/edit

Kevin

menashe

Hi Kevin,

I figured that out!

But that did nothing to affect the color of the selector (the arrow); it still turns red.

kthorngren

Its hard to say without seeing what you did. Please provide a link to a test case showing the problem you are having. You can update mine if you wish.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

menashe

Hi Kevin,

O!! M!! G!! It never occurred to me to post small snippets of my code when you asked for a sample!

Anyway, having never used the live.datatables feature, is my code automatically saved for you to see?

When I click on the first column, it displays the child details.

When I select the row (anywhere other than the first column), you'll notice that the arrow still changes. (For this sample, I am not actually generating any rows.)

I don't want that to happen!!

kthorngren

If you updated my example or created a new one the URL will change. Please post the new URL to your test case. It is automatically saved.

Kevin

menashe

https://live.datatables.net/loborahi/3/

kthorngren

If you inspect the row when it is selected you will see that the row().child().show() command adds the class dt-hasChild. This displays the down arrow. If you don't want the down arrow then remove the class like this:

$(row.node()).removeClass('dt-hasChild')

It uses row().node() to get the tr. Updated example:
https://live.datatables.net/loborahi/4/edit

Is this what you are looking for?

This might be confusing for the user. The child row is open but the indication is that its not. The user might click on the detail-control expecting the child detail row to be shown but it will close whatever is shown when the user selected the row.

Kevin

kthorngren

Thinking about what you could do is check in the detail-control event handler to see if the row is selected. If selected then skip the rest of the code in the event handler.

Also in the select event handler or createsubItemsTableChildRow() function check to see if the child is shown. If it is either close it first then show the child row when the row is selected.

Just some ideas.

Kevin

menashe

Kevin,

Thank you for both answers; I may not have time to look until Sunday.

To clarify one point, I am the user. I bought Editor for my personal use! It's a great product!