I need to add a new row at a specific index inside the ui-grid.
So I figured out how to add a new row inside the grid but the problem is that I need to add the new row after the selected row and not on the top of the grid.
Basically I do not know how to get the index of the clicked/selected row
$scope.addNew = function() {
$scope.gridOptions.data.unshift({});
};
here is the plunker with what I have done so far
I don't see anything inside the code to help you, but you can do it using simply js methods.
You just need to now the entity of the selected row (for example if you're using celNav's gridApi.cellNav.on.navigate(scope,function(newRowcol, oldRowCol){}) you could get it from newRowCol.row.entity), then you could find its index in gridOptions.data by calling:
gridOptions.data.indexOf(rowEntity)
You can see how I did in a new version of your plunkr.
Related
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 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
I have a mat-table which displays a list of jobs.
Now when I create a new job I want to display it in first row rather than last one.If i create and add a new job it goes to bottom of mat-table.
How can I achieve this .
I want something similar to this Stackblitz.but rather than adding row at bottom i want it in first row
To push an element to the first row , there is a method in array called unshift() .
To do that , take for an example :
var a = [1,2,3,4];
if i want to push 0 to a in the first position , i would simply do a.unshift(0)
All you have to do is instead of .push() , use .unshift()
I have forked the stackbltiz to help you out with the solution https://stackblitz.com/edit/angular-axjzov-8zmcnp
If you want to add new rows to the top of MaterialTable you can add the fallowing option:
<MaterialTable
...
options={
addRowPosition: 'first'
}
...
>
You can only chose from first or last. The default is set to last.
With your datasource declared in your component as follows:
dataSource = new MatTableDataSource<any>();
You can add a rown to the top op the table with:
this.dataSource.data.unshift(newRowObject);
I have a hierarical grid with single save button to save new and updated parent and child rows. After making changes to any child row if I click on add new row button, I get the new row but lose past changes. This is because addRow triggers rebinding of data and I lose my edits from other child rows. Any help is appreciated.
First you need to get a reference to the client-side object of the grid
var grid = $("#grid").data("kendoGrid");
Then you need to call the add method of the grid data source.
grid.dataSource.add( { name: "Name", value: "2" } );
Taken from here
There is a demo showing it in action here
1 - Save the editted grid data in a tempArray
2 - Add new row
3- Rebind the grid with latest tempArray data
I would explain the functionality of the jquery plugin myself but the website definitely does it better than what I can, it seems quite a simple plugin for the most part
http://tablesorter.com/docs/
I'm using this plug to filter my tables after they are generated, works fine. The issue is that the table is live updating and after table is filtered, if a new update is received and then you filter the table again, the data duplicates.
I have been looking in to it a lot, it seems the plugin builds up a cache of the information which allows the data to be filtered.
What I'd like to do is to delete the cache and rebuild it everytime there is an update, preventing duplicate information from being appended to the table array.
client javascript:
function appendTables(appendData, index) {
var tabPage = "#tabpage_"+index+" > #myJobs_"+index+" > .userJobs";
userJobsElement = $(tabPage);
userJobsElement.empty();
userJobsElement.append(appendData);
applySortTable();
}
this part generates multiple tables using a dynamic id as well as 2 standard tables:
function applySortTable() {
var tables = $('table');
tableCount = tables.length-2;
$("#myJobs_all").tablesorter();
$("#myJobs_noteam").tablesorter();
for (var i = 0; i < tableCount; i++){
$("#myJobs_"+ i).tablesorter();
}
the table is then generated using the plugin and as I said creates a cache, does anyone know how to clear the cache then have it rebuild for when this happens to a user?
update
the updating of the data is now working but currently we have setup a tab based table system to view different team information. when the update is processed, the table is then only updated in the first table and the other tables stop working, anyone know how to handle this?
Re-initializing the tablesorter plugin is not the correct method. After adding new content, simply trigger the update method:
$("table tbody")
.append(appendData)
.trigger('update'); // this event will bubble up
Check out this demo's code example