We Keep Coding

Getting previous/next row node in a sorted grid

I have a grid with a default sorted on a column and I'm having problems getting the next/previous rows by adding or substracting from the currently selected row ID.
Here's the column with the default sort
{
headerName: "Created",
field: "createdOn",
cellRenderer: (params) => {
return WebModule.Utils.dateFormat(params.value);
},
sort: "desc",
width: 125
},
And here's my logic to get previous/next row
class ResultModal {
constructor(params) {
this.params = params
let rowIndex = params.rowIndex;
this.previousRow = params.api.getRowNode(rowIndex - 1);
this.nextRow = params.api.getRowNode(rowIndex + 1);
this.result = params.data;
}
}
I pass the whole ag-grid params object to a modal so I can navigate the grid records from buttons in the modal.
The issue is that if I run the above logic with the 2nd row selected, params.rowIndex is 1, I get nextRow with (1+1) but the actual rowIndex of nextRow will be something like 2245 (I have lots of data in the grid).
So I end up selecting a row burried deep down in the grid instead of the actual 3rd row displayed.
Do I need to use something else than getRowNode when the grid is sorted/filtered ?

I ended up using api.getDisplayedRowAtIndex()
let node = params.api.getSelectedNodes()[0];
let rowIndex = node.rowIndex;
this.previousRow = params.api.getDisplayedRowAtIndex(rowIndex - 1);
this.nextRow = params.api.getDisplayedRowAtIndex(rowIndex + 1);
This really gets the previous and next row regardless of the sort/filter options.

One possible solution might be to use
gridOptions.api.forEachNodeAfterFilterAndSort
which iterates over the rows as they are displayed. Note that the callback passes the RowNode itself and the row-index in the grid.
function forEachNodeAfterFilterAndSort(
callback: (rowNode: RowNode, index: number) => void
): void;
https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-rowNodes

W2UI grids : how to get the concerned cell value in render function?

I need to use cell renderers with a W2UI grid; I do like that :
Renderer function :
// Renderer function
let dateRenderer = function(record, index, columnIndex) {
return `${record.date_start}`;
};
Columns definition :
// ...
// Renderer function call in columns definition
{ field: 'date_start', caption: 'Start date', render: dateRenderer },
// ...
It works well, but the problem is that I have a lot of different date columns in my grid and I need to create a different renderer function for each (for exemple whith record.date_start, record.date_end, record.date_shipping, etc...) when all dates in the grid are formated the same way.
Is it possible to get the value of concerned cell in renderer function and no entire record object ?

You can use following function to get the value of the related cell.
this.getCellValue(index, col_index);
// index - index of the record
// col_index - index of the column from the columns list
Have a look at this fiddle to understand it clearly.

AngularJS forEach set object properties in ng-repeat found set

I have an ng-repeat displaying items from json, based on what the user enters into a field it can be filtered.
<tr ng-repeat="i in filteredItems = (iso3166 | filter: {alpha_2: isoQuery})">
this all works as expected.
Each item in the group ("iso3166") has 3 boolean values, "restricted", "unrestricted", and "unclassified", for each of the columns "license", "prohibited", and "size".
The user can set one of these values in each column in each row to true or false:
This works fine.
What I need to add is an "ALL" row at the top that will set every item in the filtered set to whichever button was clicked in each column.
In other words, if the user clicks the ALL rows "restricted" button in the "license" column, every row's "license" "restricted" value should be toggled to true or false. I'm not sure of the syntax to set the value.
Now I have the ng-click as
ng-click="setAll('col1','licensed')"
and the function as
$scope.setAll = function (column, value) {
angular.forEach($scope.filteredItems, function (value, key) {
??
});
};
How do I assign the correct value to each row in the loop?

At the moment your inner function shadows the value variable. Rename the local variable to something else in order to change it.
$scope.setAll = function (column, value) {
angular.forEach($scope.filteredItems, function (item, key) {
item[column] = value;
});
};

SlickGrid javascript get current row data

I would like to remove a row when I press the Delete key. But I can't get any data from the source below:
var selectedrows = grid.getSelectedRows();
grid.onKeyDown.subscribe(function(event) {
var item = data[selectedrows.cell];
if (event.keyCode == 46) {
alert(item.hostname);
}
});

First, the getSelectedRows() function returns an Array of the selected column numbers. The way you are trying will return undefined, since that Array doesn't contain any property called cells.
Open this official SlickGrid example demo and try the following:
Select the first row in grid.
Try issuing the following command in your JS debugger console:
grid.getSelectedRows()
Will return you an Array with the selected row number as:
Array [ 0 ]
The returned Array'sfirst element is the row number that you have just selected.
Now that we know the selected row number issue this:
data[grid.getSelectedRows()[0]]
Will return you the selected Object as:
Object { name: "Make a list", complete: true }
If you want to reach a property of the returned Object you could do it as:
var selectedRow = data[grid.getSelectedRows()[0]];
console.log(selectedRow.name);
Will return the property name's value as:
Make a list
Hope this clears up your confusion.

Getting a row from a data attribute in datatables.js

I am struggling trying to find the right method to do this. Basically, I have an array of id values that correspond to which rows have been selected in my table. To construct this list, I use the following code. this.options.ajaxId is the key that accesses my Id value in the data object passed to the table.
this.getRowData(target)[this.options.ajaxId]
where my getRowData function is:
getRowData: function (HTMLrow) {
return this.dataTable.row(HTMLrow).data();
},
This works great, but then I am stumped on my next step which is re-selecting the correct rows when the table is re-drawn via paging, sorting, or searching. My plan was to cycle through the ID's and find which table row corresponded to that ID value, but I cannot find a function to input a key value search pair and return the html row. Something like the following is what I was thinking,
this.dataTable.findRow( key, value );
// then my usage would be the following:
var that = this;
_.each(this.selectedList, function (id) {
var row = that.dataTable.findRow( that.options.ajaxId, id );
// code to select the row
});
I haven't written it yet, but I know I can cycle through each of the rows, get the data for that row, and check it against what I am looking for, but in cases where the user is viewing 100 rows and has only one selection I would like to avoid that.
Any insight?
Thanks

SOLUTION #1
You can use the following code to locate and highlight rows based on row IDs if row ID is stored in one of the fields.
// Index of column containing IDs
var colIdIndex = 0;
// List of row IDs
var rowIds = ['2', '4', '6'];
// Find indexes of rows which have IDs in the desired column
var rowIndexes = table.rows().eq(0).filter( function (rowIdx) {
return ($.inArray(table.cell( rowIdx, colIdIndex ).data(), rowIds) !== -1)
? true
: false;
});
// Select rows based on array of found row indexes
table.rows(rowIndexes)
.nodes()
.to$()
.addClass('selected');
See filter() API method for more details.
Please note that this method will work for client-side processing mode only.
DEMO
See this jsFiddle for code and demonstration.
SOLUTION #2
Alternative approach that would work both in client-side and server-side processing modes would be to use createdRow callback.
For example:
// Index of column containing IDs
var colIdIndex = 0;
// List of row IDs
var rowIds = ['2', '4', '6'];
var table = $('#example').DataTable({
createdRow: function( row, data, dataIndex ) {
if ( $.inArray(data[colIdIndex], rowIds) !== -1) {
$(row).addClass('selected');
}
}
});
DEMO
See this jsFiddle for code and demonstration.