How to insert new row at top of mat-table - javascript

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);

Related

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

Error with expand table ( new opened row got previous value ) using Angular 9 and JS?

All code demonstration and behavior is here:
There is no need to explain much here.
Look at the stackblitz, open the first row (click on the row). You will see the details of that row. Click on the second row, the detail from the first row will be override with those details from the second row.
Example video here ( what is problem ) :
https://vimeo.com/543841393
Example of code:
What do I want? So I want that if I open the first row I see the details of the first row, if I open the second row I see the details of the second row and not override my data with each new opening of the row.
Instead of using singleDetailsDispatch variable, directly return the book object from the method and call that method inside HTML because when you call getSingleDispatch method, singleDetailsDispatch variable always gets replaced.
public getSingleDispatch(book: any) {
return book;
}
fixed stackblitz link heare
The issue exists because singleDetailsDispatch is the common variable and you are updating whenever you click on the table row. Instead of calling a function you can directly pass the book to the child component like below.
<ng-container *ngIf="book.expanded">
<div class="d-flex row my-1">
<app-child [dispatchDetails]="book" [closedDetail]="detail"
class="w-50"></app-child>
</div>
</ng-container>

How to add new row in ui-grid at specific index

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.

Get selected row column value extjs grid

I have a users grid. To delete one, select your row and click a button "delete".
But, this not work.
My code is:
var row = userGrid.getSelectionModel().getSelection();
console.log(row.get('dni'))
Firefox says:
TypeError: row.get is not a function
Any idea ?.
It is good practice to always check hasSelection() like -
if (userGrid.getSelectionModel().hasSelection()) {
var row = userGrid.getSelectionModel().getSelection()[0];
console.log(row.get('dni'))
}
perhaps because
getSelection( ) : Ext.data.Model[]
Returns an array of the currently selected records.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-getSelection

ExtJS List Data View

Left i have a list with all names. I select one name and click on a button 'add' (to the right list). Also i want to 'remove' items form the right list, back to the left list.
Someone an example?
$('#buttonid').click(function(){
var selecteditem = $('#listID option:selected').html();
$('#targetListId').append(selecteditem );
}
vice-vers for second question.
http://dev.sencha.com/deploy/dev/examples/dd/dnd_grid_to_grid.html
is an example to study
Is this what you're after?
I dont have example handy, however if you look at http://dev.sencha.com/deploy/dev/examples/grid/array-grid.html you can see grid example, focus on tpl to generate action (sell, buy) images/buttons, in listView you can also use tpl, change actions to remove (maybe only gray out if want to restore)...
But add action should be easier in EditGridPanel, If you want to still use listView I will suggest to have ad button on top or bottom toolbar, execute formPanel for data entry, when submit just add to listView.store
Dont forget to build communication to DB if needed in add and remove actions
That's really-really simple to do.
Just grab the selected record(s), remove from the store of left list, and add to the store of right list:
var left = // define your GridPanel or ListView
var right = // define your GridPanel or ListView
new Ext.Button({
text: "Move right ->",
handler: function() {
// when using GridPanel
var records = left.getSelectionModel().getSelections();
// when using ListView
var records = left.getSelectedRecords();
left.getStore().remove(records);
right.getStore().add(records);
}
});
I'm sure you can figure out how to implement the "Move left" button.
Note: Always first remove record from one store before adding to another as ExtJS currently doesn't support having one record in multiple stores. If you do it the other way around, strange things will happen.

Categories