How to conditionally remove plus icon and responsive click event

jamiedewitz

Hello,

First of all, here is my test case: http://live.datatables.net/yomuboko/1/edit?html,js,output

I am having some trouble figuring out how to remove the details-control class on any row where Person is equal to false, my full dataTable has 1239 rows, and there are 20 values that come back as False. I was thinking that I needed to use the createdRow option in dataTables, but now I'm wondering if I need to use rows().every() to find the value of the PersonHiddenField, then remove the class from there.

I've also tried using some jquery outside of the dataTable function to find the value and remove the class, but td comes back as undefined.

        $("#directoryDataTable tr").each(function () {
            //get hidden field value
            var person = $(this).find("#PersonHiddenField").val();

            
            if (person != 'undefined' && person != null && person == "False") {
                var td = $(this).find("td:first");
                console.log(td);
                td.removeClass('details-control');
            }
        });

If anyone can help point me in the right direction, I would really appreciate it.

Additional discussion in comments here: https://datatables.net/forums/discussion/comment/161644/#Comment_161644

tangerine

I think createdRow would be the solution. See here:
https://datatables.net/forums/discussion/57153

jamiedewitz

I have createdRow used in my test case, but I can't get it to bring back the value of the second row Person checkbox, which is False. That's the real issue here.

I just need something to grab that value and hide the plus sign in that row when the value comes back as False. So, createdRow is like a loop for the dataTable that will find the value for each row, then remove the class?

kthorngren

I think I figured out what to do. Here is the updated example from the other thread:
http://live.datatables.net/xituguyu/2/edit

I inspected the table and found what Datatables uses to add the Responsive button. Added a CSS to empty the content if the no-btn class is added:

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td.no-btn:first-child:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th.no-btn:first-child:before 
{
  content: none;
}

Changed your createdRow function to get the data from the 15th column (data[14]) then used jQuery to get the value of the 4th input in that column, for example:

<input id="PersonHiddenField" name="item.Person" type="hidden" value="False">

It adds the class no-btn if the person hidden field is False:

                createdRow: function (row, data, index) {
                    console.log(data[14]);
                    var personHidden = $(data[14]).eq(4).val();
                  
                    console.log(personHidden);
                  
                    if (personHidden === 'False') { /* value of item.Person checkbox */
                      console.log('person is hidden')
                        var td = $(row).find("td:first");
                        //td.removeClass('details-control');
                        
                        // Add class to remove Responsive btn
                        td.addClass('no-btn');
                    }
                },

Finally I use this event handler to stop propagation to the Responsive event handler if the td tag has the class no-btn

  $('.no-btn').on('click', function ( event ) {
    console.log('Preventing Responsive click event')
    event.stopPropagation();
  });

There are console.log statements so you can see what is happening.

Not sure if this is the best way but it seems to work. Maybe @allan or @colin can comment if there is a better way.

Kevin

jamiedewitz

Thanks, Kevin. Unfortunately, this solution does not work for me, which is odd because it seems to work in the example.

This is what I see in the console.... (I added what I was trying to log to the statements, for readability for myself.)

data[14] = <input disabled="disabled" id="Person-0" name="item.Person" title="Person" type="checkbox" value="true"><input name="item.Person" type="hidden" value="false">
                                <input id="item_Person" name="item.Person" type="hidden" value="False">

personHidden = undefined

jamiedewitz

You know what, I just played with the numbers a little and found that $(data[14]).eq(3).val(); is what I needed, which makes sense because that value is actually the 3rd in the input since the count starts at 0.

I also added td.no-btn{cursor:unset;} to my site.css to prevent the finger from showing up over the white space in the first column where the plus sign used to be.

Thank you so much for helping me find a way to get this done!!!!! This is just what I was looking for. I hope they are paying you well!

kthorngren

It looks like data[14] has 3 inputs but your example had 4. Try changing var personHidden = $(data[14]).eq(4).val(); to var personHidden = $(data[14]).eq(3).val();. I would look for a better way to find the input element you are interested in. This way if the number changes the code can still find it.

Kevin

jamiedewitz

Yes, you are right about changing the 4 to a 3. I commented about 5 minutes after my last post and gave the solution, but my post is still pending approval. So hopefully they approve that soon, so we can see it and anyone else with questions can find the answer.

jamiedewitz

Actually, I played around with the numbers a bit and found out that $(data[14]).eq(3).val(); works to get the False value of the hidden field. Which makes sense since the count starts at 0.

I also added td.no-btn{cursor:unset;} to my site.css file to prevent the finger/hand thingy from showing up on top of the blank space where the plus sign used to be, so it doesn't look like it's clickable.

Thanks so much for your solution! This is the last piece I needed to get my dataTable complete!!!! YAY!!!!

colin

Sorry, the spam filter was overly zealous, the comment should be here now.