We Keep Coding

(Updated) Trying to edit the behaviour of toggle function in tablesorter with a nested table

(This post has been updated for clarity and more of my findings.)
I'm currently using the tablesorter functions toggle and tablesorter-childRow to make a table that has a child row that can be hidden and expanded by clicking 'toggle' on the primary row like this example. However, the child row contains a nested table where the first row also contains a toggle function that can hide or expand all the remaining rows of that nested table. Here is my table in action.
Currently, the toggle functions all work fine in the sense that they are able to hide and expand the rows that I want to. However, if I click on the primary row's toggle function (the row with Category I), the function expands the entire nested table. I would like the toggle function on the primary role to only expand the first row of the nested table only (the row with Category II).
For my script, I used the default script found on the cssChildRow configuration here. What I tried to do is to give the rows that I want expanded its own html class (in the fiddle they are marked with <td class="show">). Then I edited the to script function to .find('.show') instead of the default .find('td'), but this did not work. Does anyone have a solution?
Thanks for everyone's help! 😊
<script>
$(function() {
$('.tablesorter-childRow td').hide();
$(".tablesorter")
.tablesorter({
cssChildRow: "tablesorter-childRow"
})
$('.tablesorter').delegate('.toggle', 'click', function() {
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('.show').toggle();
return false;
});
});
</script>

Hide or Collapse a single specific row in ag-grid using Javascript

After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js

setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)

How can I modify a list item after I created it with jQuery?

This is my todo list what I made.
(To make my code more readable I tried to comment. I hope it worked.)
If you try my demo, you can add li items with the "add" button. And the li items has 2 more buttons.
I want to create a modify button to users with can modifying their list items. I have no idea what I can to do for this with jQuery.
Second problem is that list buttons don't work perfectly well. Because if I use once a delete button it change the done button to delete an item. But if I dont use the delete button, the done button is working well.
I dont know why, maybe the same class name is the problem?
Here is my demo in JS Bin:https://jsbin.com/natiziqawa/edit?html,js,output
$(document).ready(function(){
$("#add").click(function(){
// Created list elements and their's buttons
var list_item =document.createElement("li");
var remove_button=document.createElement("button");
var done_button=document.createElement("button");
// append the buttons some string to caption buttons
$(remove_button).append("Delete");
$(done_button).append("Done");
// added class name the items to to distinguish them
$(list_item).addClass("item")
$(remove_button).addClass("delete");
$(done_button).addClass("done");
// filled the created items with the input values
var list_text =$("#input").val();
var time=$("#time").val();
// filled the list item with their's buttons and class names and input values
$(list_item).append(time," : ",list_text,done_button,remove_button);
// finally fill the ul with list items but first check out what is written in the input
if(input.value==""){
alert("Please enter an activity")
}
// If the input has some value can go
else{
$("ul").append(list_item);
// after clicked, clear the input field
$("#input").val("");
// list item's buttons
$(".done").click(function(){
$(list_item).click(function(){
$(this).css("color","white")
$(this).css("text-decoration","line-through")
});
});
$(".delete").click(function(){
$(list_item).click(function(){
$(this).remove()
});
});
}
});// main function close
}); // document ready close

The idea behind my solution is to use the contenteditable attribute for the added fields. To do this, you need to dynamically wrap the first two fields in an additional div, as shown here:
$(list_item).append('<div class="edit_item" contenteditable="true">'+time+'</div>'," : ",'<div class="edit_item" contenteditable="true">'+list_text+'</div>',done_button,remove_button);
You will need to replace this code with your existing one. For a better understanding, this code is located in the comment: "// filled the list item with their's buttons and class names and input values"
Also, you need to add this rule to the css to align the fields:
.edit_item {
display: inline-block;
}
And regarding the second question:
You had a targeting problem. You must refer to the current list_item using the closest() method.
For mark:
$(".done").click(function(){
$(this).closest(list_item).css("color","white")
$(this).closest(list_item).css("text-decoration","line-through");
});
For removing:
$(".delete").click(function(){
$(this).closest(list_item).remove();
});

How to add checkboxes with possibility to choose all in datatable jQuery

I work wit library datatables, and i want to add in table row check box for some actions, i add checkboxes to the table,and one check box in table header for choose all boxes.
Script:
$('#checkAll').click(function () {
$(':checkbox.checkbox-mark').prop('checked', this.checked);
});
In jsfiddle you can see more.
But problem is, i have pages, and in case if i tap on header checkbox, it's choose only all boxes in curent page, but i want in the all pages, how i can solve this?

like you discussed already you can use service/api to set selectAll values but if you want to it using front end then you can use DataTable().cells().nodes(); to get all the nodes and iterate through them and set the checkbox value to each node.
// update your checkAll logic like this
$('#checkAll').click(function() {
var allPagesData = $("#test1").DataTable().cells().nodes(); // this will give you all data in datatable.
$(allPagesData).find('input[type="checkbox"]').prop('checked', this.checked);
});
check out this fiddle

hide css class delete_icon with reference/using button value

template.html
<td style="width:150px;"><input type="button" name="delete" value="{{ report_person.report_person.id}}" class="delete_icon" />{{report_person.report_person.name }}
</td>
The above row is created dynamically using python/django.Its the person name and delete icon.
For every row created dynamically,the delete icon will appear.
<td class="ir-shade" colspan="4"><button id="{{report_person.report_person.id}}" type="button" class="add_treatment" class="button_style">Add treatment notes</button>
<div id="result-{{report_person.report_person.id}}" class="toggle"></div></td>
Add treatment notes is a toggle button,it show the treatment details on one toggle,at this state the name of button become Hide treatment notes.
I want to hide the delete_icon class for individual name when the treatment note is open f.Since i am using comman css class for delete_icon,using this $('.delete_icon').hide(); is hiding the delete icon for all rows created dynamically.Only unique thing is the value of that delete button,that means the delete_icon.Is any possibility is their to hide the css class icon with reference to value.So that the delete image will hide only for cases the treatment notes are in open condition.
Note:It is some django code are used for passing variable,looks different from html.

In jQuery, you can use this to find child elements. Assuming that this is all in one div, or span, or some sort of container. You could simply search downwards from that container and toggle off your delete button.
$(this).children("input.delete_icon").hide();
Going off of your supplied template, you would use children and also .prev() to navigate up your DOM, and then back down.
Your code will roughly be:
$(this).closest('tr').prev().children(":first").children('input.delete_icon').hide();
Let's walk through this:
$(this) is your currently 'clicked' table row, that includes your
add_treatment button.
.closest('tr') looks UP for the nearest
table row. It will find the table row that your button is placed
inside of
.prev() looks for the previous sibling of the selected
object. Since we are currently selecting the <tr> your button is in
(as per our .closest('tr')) it will look for the previous <tr>
which is above it, and holds your delete_icon button.
Now, we are on the <tr> of your button object, but we need to navigate downwards
.children(":first") will navigate to the first child of the current element. This would be your first <td> element.
We need to navigate down one more, so we select the button child by using .children('index.delete_icon')
You have now "selected" your .delete_icon button, and can .hide() it.

Try using the jQuery .find() function.
$('.add_treatment').on('click', function() {
var $this = $(this);
$this.find('input[class*='delete_icon']').prop('disabled', true);
// toggle notes
// hide delete icon (if you do not like the css below)
});
Adding css rules would help reduce the amount of javascript functions/actions needed.
tr td .delete_icon {
display:none;
}
tr:hover td .delete_icon {
display:block;
}
There are other ways to do this that are more efficient but we would need more html structure.

if the delete icon is in the following td (created dynamically) you need:
$('.add_treatment').click(function(){
// should point to the parent td, the next td, its children,
// and hide the first child which is the input button
$(this).parent().next().children('.delete_icon').hide();
});