I've a table set up with Tabulator with unknown data ( pulled from a file) so i can't make a column definitions setup for it except for general setup that works with any kind of data.
now I'm in situation that i need to add certain code for each row under column code which is included with the existing table.
i looked for away to add code something like SX0001 on the first row and just add 1 each row so the second row would be look like SX0002
I've checked this link http://tabulator.info/docs/4.1/update#alter-replace i saw some functions that works on rows but not columns .
solution i'm trying to achieve:-
the link includes under updateData function that i need to have index with default value (Id)
giving that I'm not sure what type of date it might have or be included with the table i've added a new column using this code
table.addColumn({title:"id", field: "id" , formatter:"rownum",width:40, align:"center"} , true)
now I don't know how to get the Length of the Column to loop through each one of the column and run function like this
var no = 1000;
var str = "SX";
var x = str + no ;
table.updateData([{id:1, code:x}]);
var no = no +1;
is there's anyway to do this ?
You can retrieve the data stored in the table using the getData function.
var data = table.getData();
This will return an array containing the data objects for each row in the table.
Then to get your lenght just do data.length
If you want to count the table data the getDataCount exactly for this, which returns a count of rows in the table:
var count = table.getDataCount();
But actually your current approach will result in the table being redrawn a load of times as you update the row data.
Mutators
Instead you should look at using a Mutator, these allow you to alter data as it enters the table, so in this case you could do something like this:
//global variable to keep track of row id
var rowCount = 0;
//custom mutator
var idMutator = function(value, data, type, params, component){
//increment rowCount and assign as column value
return rowCount++;
}
//in your column definition set this mutator
{title:"ID", field:"id", mutatorData:idMutator}
By using this approach the value is set as the data is loaded into the table, nothing needs to be redrawn and the whole proceess is much more efficient
Related
I am using tabulator version 4.4.3
I have a use-case where I need to calculate cell values for each row depending data from different cell on different rows row.getPrevRow() with row.getNextRow()
As follows:
function distanceMutator(value, data, type, params, component) {
var row = component.getRow();
var prevRow = row.getPrevRow();
var nextRow = row.getNextRow();
// Do not apply for first and last rows
if (prevRow && nextRow) {
var nextdis = nextRow.getData().distance;
var prevdis = prevRow.getData().distance;
// Do the math
// ... yada yada
return result;
}
This does work if I am using type=== "edit", when component is a cell but not when initial data is set with setData(); where component is ColumnComponent.
My question is:
Is there a convenient way to access current rows (and its previous and next rows as well) from ColumnComponent ?
It is not advisable to try an navigate through row components inside a mutator
The mutator is called on the data as the row component is being built, one row at a time, so there are not an row components to navigate to when the table is being initiated.
At that point it may be easier to find the index of the row data object in the original array using findIndex on the array and then increment it to find the next rows data
I'm very new to JavaScript, and have only recently started fiddling with coding.
I had found a question that is similar to what I'm asking, so I've tried to modify the suggestions to fit my needs, but am drawing a blank pulling together other resources to understand the solution.
That question and answer is here: range.getValues() With specific Date in Specific Cell
I hope to ask my question by adding it to that thread, but I'm unable to make a comment - only an Answer, as I have zero votes.
I want to know how I can use the range.setValues() function, but specify only rows of cells that fit a certain criteria (e.g. cell in column B = 1).
Mostly I understand the answer, I think - push the full list of data into another array, then use a for loop to identify which rows to "keep".
However, I don't understand a good chunk of the solution, specifically this portion:
data.forEach(function(row) {
var colHvalue = row[7];
var colKvalue = row[10];
if( /* your desired test */) {
// Add the name of the sheet as the row's 1st column value.
row.unshift(sheetName);
// Keep this row
kept.push(row);
}
});
where I'm confused:
What's function(row) refer to? It seems to me that "row" is not a defined variable, and is also not a method.
What are the objects being specified in the line var colHvalue = row[7];? And same for the second row.
How does the pushing and unshifting work?
Hope for some answers, thanks!
Edit:
So I still don't understand the detailed logic of the Answer to that other question, and wrote something else based off that:
function importtest() {
var sheetX = SpreadsheetApp.openById("XXX-XXX-XXX"); // workbook containing orginal data
var tabX = sheetX.getSheetByName("EXPORTER"); // tab containing original data
var rangeX = tabX.getRange(6,2,sheetX.getLastRow(),sheetX.getLastColumn()).getValues(); //range of full original data
var kept = [] ;
var data = rangeX ; //storing full data in "data"
// define function "latestrows", which fills up the "kept" array with selected rows
function latestrows() {
var datesent = data[i][2] ; // indicating dynamic cell position (using variable i) that determines if should be kept or not
var datarow = data[i] ; // specify the entire row of data
// loop statement; starting with i=0 (or row 1), and increasing until the last row of "data"
for ( i = 0; i < data.length ; i++) {
if (datesent == 1) { // if cell in the col indicating if it should be kept, is "1"
kept.push(datarow); //move the chosen rows of data into "kept"
}
}
}
var sheetX3 = SpreadsheetApp.openById("XXX-XX-XX"); // workbook import destination
var tabX3 = sheetX3.getSheetByName("IMPORTED"); // import destination tab
var rangeX3 = tabX3.getRange(7,3,kept.length,kept[0].length) // imported array range
rangeX3.setValues(kept); // set values
}
I get the error message TypeError: Cannot read property "length" from undefined. (line 31, file "Code"), which together with testing other modifications indicates to me that kept is empty. What am I missing?
AgGrid expects node(s) to be passed in to lot of it's data functions. How do you get a node by index? Look at the snip below:
api.forEachNode(function(node){
api.refreshRows([node]);
})
I can pass the node parameter to refreshRows() function since I'm getting it through forEachNode().
How do you get a node by index without iterating through forEachNode() ?
This might be a bit late for this question, but anyway for people who are searching for this in the future :
Apart from the answers given, you can also get the row node by using the following ways,
// Getting the row node by the row index
cont rowNode1 = api.getDisplayedRowAtIndex(rowIndex);
In some cases, the above approach is not suitable because the rowIndex can get changed when you do some changes to your grid (sort, filter, etc.).
The other method is to use the id of the row which will not change even if you sort, filter... the grid.
getRowNode(id) : Returns the row node with the given ID. The row node id is the one you provided with the callback getRowNodeId(data), otherwise, the id is a number auto-generated by the grid when the row data is set.
// Getting rowNode by row id
const rowNode2 = api.getRowNode(rowId);
You can use getVirtualRow() method to get a single row. This function is a part of the Row Model. You can get the Row Model by getModel() function.
var model = api.getModel();
console.log(model.getVirtualRow(idx));
Building on #Charlie H's answer, it's entirely possible that since the version that he was using, the API has changed a bit. I'm using the (current as of December 2017) version 15.0. I found that rowsToDisplay[] contains an array of rows accessible. The following, for example, does exactly what you'd think it would:
onCellEditingStarted: function (event) {
var displayModel = gridOptions.api.getModel();
var rowNode = displayModel.rowsToDisplay[event.rowIndex];
rowNode.setRowHeight(100);
gridOptions.api.onRowHeightChanged();
},
If you want to iterate through the grid row by row in order you can use this (where $scope.grid is your grid name):
$scope.high_index = 0;
$scope.rows = [];
$scope.grid.api.forEachNode(function (node) {
$scope.rows[node.childIndex] = node.id;
if (node.childIndex > $scope.high_index)
$scope.high_index = node.childIndex;
});
for (i = 0; i <= $scope.high_index; i++) {
var node = $scope.grid.api.getRowNode($scope.rows[i]);
}
Or if you want a row node by child index you can now use (after setting up $scope.rows above):
var node = $scope.grid.api.getRowNode($scope.rows[i]);
Where i is the row number you want.
I'm trying to get all of the values on a 4th column of my datatable table. (both visible and unvisible rows).The 4th column of each row is consist of a checkbox. After I get them, I need to change 'checked' property of them and send back to table. Currently, I'm able to get data but I do not know how could I send them back to datatable after modifying. In the column that I'm trying to retrieve checkboxes are exist. Here is my code :
$(document).on('click', '#select_all', function()
{
var rows = $("#results_container table").dataTable().fnGetNodes();
var cells = [];
for(var i=0;i<rows.length;i++)
{
// Get HTML of 4rd column (for example)
console.log( $(rows[i]).find("td:eq(3)"));
}
});
Here is what console.log statement prints out :
[td.sorting_1, prevObject: jQuery.fn.jQuery.init[1], context: tr, selector: "td:eq(3)"]
The check property that I want to modify is under 0: td.sorting_1 -> childNodes screen shoot of my console view
So how could I changed this checked value and see the result on my datatable?
In your for loop store your data to a variable:
var dataHolder = $(rows[i]).find("td:eq(3)")
Then access your data like this:
dataHolder = dataHolder[0].childNodes;
Then try your console.log() on the dataHolder.
You should be able to change the value like this:
dataHolder[1].checked = true;
Consider I have a list called "test"
And it has 5 list items (say a, b, c, d, e)
Now that I apply filter manually on the list items for a particular field
Now the result is 3 list Items.
Now I want to read the fields of these 3 list items through JavaScript & do calculation on it.
I need to access the fields of the currently displayed (after filter is applied manually)
I do not want to filter it in Javascript. But I want to filter some field manually & then I want to read the displayed result. Can anyone help ?
The following jQuery will get all the values for a column for the rows that are displayed. It works on SharePoint 2010. I left the code very verbose and with debugging statements so it's easier to understand. Keep in mind that this code will not run in IE with the console closed unless you remove the console.log and debugger lines.
$(document).ready(function() {
var columnHeading = "Title";
var anchor = $("a").filter(function() {
return $(this).text() === columnHeading; //find the link that matches the text in the columnHeading variable
});
var th = anchor.closest("th"); //Get the parent table header
var columnIndex = th.index(); //Get the index of the table header in the row for use on other rows
var table = th.closest("table");
var i;
debugger;
table.find("tbody").first().find("tr").not(":first").each(function() { //Loop over every row in the table EXCEPT the first row because its the table header
i = $(this).find("td").eq(columnIndex); //find the td element at the index we determined earlier
console.log($(i).text()); //get the text in the td. You may need to parseInt before any mathematical formulas.
});
});
If you need clarification on anything, please let me know.