We Keep Coding

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! :)

I want to select all the records of current page only

I am using igx-grid. When I am clicking on select all using rowSelection, it selecting all the records present in grid, not of current page. I want to enable something by which when I click on select all of igx-grid checkbox, it should select only current page record, not all. Is there any way to do the same? Because I am trying it from last 3 days but not getting any solution. Thanks in Advance!!!

Select Rows programmatically :
<button (click)="this.grid.selectRows([1,2,5], true)">Select 1,2 and 5</button>
Deselect Rows programmatically :
<button (click)="this.grid.deselectRows([1,2,5])">Deselect 1,2 and 5</button>
Source : Official documentation of igx-grid (Row Selection)
Try using (onRowSelectionChange) Event

You can use this.grid.deselectRows([1,2,5]) as #Toxy said but as arguments you can use the property dataView of IgxGridComponent that is an array of only row data displayed in the grid.
onRowSelectionChange(event) {
this.grid.selectRows(this.grid.dataView.map(x => x.id), true);
this.currentSelection = this.grid.selectedRows;
}
This not have problem with filters because dataView change when filters are applied. Now in this.currentSelection there are only the page id data. Only little problem is that, graphical, the row data of other pages appears selected (despite they are not presente in this.grid.selectedRows); I resolved this issue using (pageChange)="onPageChange($event)" and when page changes this.grid.deselectAllRows(false); false argument let you to deselect all rows in the grid regardless of filters.

How do I access a row object of this grid?

I am trying to access an individual row from a grid in Kendo UI so that I can run operations on the selected entries in the row. However, my code is not correctly grabbing the row itself and I do not know how to resolve this.
I've tried binding the grid to an event that, when changed, will fire my method in order to grab whichever row was toggled.
const row = arg.sender.element.closest("tr")
const grid = $("#ECUs").getKendoGrid()
const dataItem = grid.dataItem(row)
Results:
I.fn.init [prevObject: I.fn.init(1)]
length: 0
prevObject: I.fn.init [div#ECUs.k-grid.k-widget.k-display-block]
__proto__: w
(Sorry, I apparently don't have enough reputation to post images)
Ideally, I would expect to get a tr object back in the first method, but I'm getting absolutely nothing instead. Does anybody know how to correct this to access the row?

If you have a click event on one of the columns, you can access the table row using some jquery.
function onClickListener(e) {
e.preventDefault();
var row = this.dataItem($(e.currentTarget).closest("tr"));
}

Option 1:
You can use the edit event of a grid to get the currently selected row model.
edit: function(e) { console.log(e.model); }
Here, e.model contains the row data and you can access the particular column value by e.model.columnName.
Option 2: You can get the row model data like below from the other functions.
https://stackoverflow.com/a/56478061/8733214

set CheckColumn as checked programmatically

I am using 'CheckColumn' in 'gridpanel' and also I am using a window which contain a chart. In the window, when I click on some values in the chart, I have to set the corresponding check box as checked in the grid. My question is how to set a check box as checked programmatically? I got the row id of the corresponding value that I need but I do not know how to use it to check it.
Thanks a lot!
// in the code below, i am searching for the specific row how contain my value
grids.getStore().each(function(rec){
var rowData = rec.data;
if (rowData['value']==value)
{
var record = grids.getStore().getAt(rec.index);
// what i can do now? // thanks
}
});

i found what i need , just: add
rec.set('myfield', true);
thanks

Get the cell value in jqgrid

How to get the particular jqgrid cell value using java script?For example the jqgrid having four columns like id,name,subject1,subject2.now I click the particular row and I need to get the id.how to achieve this?I use the onSelectRow in jqgrid I get the solution but I need to get the javascript?
I use the Jqgrid onSelectRow
onSelectRow: function(id){
var rowData = jQuery(this).getRowData(id);
var temp= rowData['name'];
alert(temp);
}

As #ClydeFlog showed in the example, try this:
var Id = jQuery('#gridName').jqGrid('getGridParam','selrow');
See the result below in the console:
Page example on the 'Get Selected Rows' button click.