Answers

• tangerine Posts: 3,365Questions: 39Answers: 395

  November 2019

  I think createdRow would be the solution. See here:
  https://datatables.net/forums/discussion/57153
• jamiedewitz Posts: 29Questions: 5Answers: 0

  November 2019

  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 Posts: 21,147Questions: 26Answers: 4,918

  November 2019 Answer ✓

  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 Posts: 29Questions: 5Answers: 0

  November 2019

  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 Posts: 29Questions: 5Answers: 0

  November 2019

  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 Posts: 21,147Questions: 26Answers: 4,918

  November 2019 edited November 2019 Answer ✓

  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 Posts: 29Questions: 5Answers: 0

  November 2019

  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 Posts: 29Questions: 5Answers: 0

  November 2019

  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 Posts: 15,237Questions: 1Answers: 2,598

  November 2019

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