my question is that is there a way so that I can get element reference of a particular row in mat-table. I am getting the data from an API. I want to display popover over a row in mat-table and popover requires element reference or HTML element to get attached to. Is there a way to do this?
In mat-table, when you use row as:
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
Here, row is the ElementRef, you can pass row in click or hover event, however you want.
Related
I'm displaying a primeng table and the cell format will depend on the next column value, i.e. the one beside it to the right.
I'm wondering how I can get the value of another column. I have:
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header">
<ng-template let-row="rowData" pTemplate="body" *ngIf="col.field!='Name'">
{{row[col.field]}} --displays current cell. I want to compare value to value of cell beside it
</ng-template>
</p-column>
if "row[col.field]" gives me the value of the current column cell value, how can I get cell beside it?
Any ideas?
If you know the column name (eg id) of another column, then {{row['id']}}.
Or if you know the order in which other columns appear (eg 0), then {{row[cols[0].field]}}.
<p-column *ngFor="let col of cols" [field]="col.field [header]="col.header">
<ng-template let-row="rowData" pTemplate="body" *ngIf="col.field!='Name'">
{{row[col.field]}} --displays current cell.
{{row['id']}} --displays cell which column name is 'id'.
{{row[cols[0].field]}} --displays first column cell.
</ng-template>
</p-column>
I have an app where I display callback results in a table.
I'm trying to figure out how to highlight a row that I click on when I display details for that record.
I thought it might be possible using the $event method and applying a class change based on a property returned there.
Any suggestions would be great!
You could use the ngClass directive on the row to set a class depending upon the value of a scope variable. Then use ngClick on the row to set the value of that scope variable.
<tr ng-class="{'highlight':activeRow===0 }" ng-click="rowClick(0)">
I have created a fiddle here
I am trying to bind a Kendo UI Grid to an object on $scope instead of to kendo.data.dataSource. The grid shows the data (which is in the object) but if I change the data or add new row, the changes are not reflected in the $scope object. Why is that?
My real problem is, I want to show two grids top & bottom and when the user selects a row from top grid, the bottom grid should be populated with the details. However, these details are already fetched and kept in the DataSource of the top grid (hence no transport section for bottom grid) because I want to be able to save any changes in batches.
This is how I am binding my grids
Top Grid
<div kendo-grid="mainGrid"
k-sortable="true"
k-editable="true"
k-selectable="'row'"
k-filterable="true"
k-resizable="true"
k-scrollable='{ "virtual":true }'
k-on-change="selected = dataItem"
k-options="mainGridOptions"
k-height="165">
</div>
Bottom Grid
<div kendo-grid="detailGrid"
k-editable="true"
k-selectable="'row'"
k-options="detailGridOptions"
k-data-source="selected.Details"
k-height="125"></div>
This is how I add record to bottom grid
$scope.detailGrid.dataSource.add();
So far, I didn't get how to bind Kendo UI grid to an object on $scope. However, for my real problem, I have found a work around.
I bound on-save event of the child grid, and explicitly marked the current row as dirty.
$scope.onDetailGridSave = function () {
$scope.selected.dirty = true;
};
and in HTML
k-on-save="onDetailGridSave()"
I render table like so (there are many more fields):
<tr ng-repeat="client in clients">
<td>{{client.name}}</td>
<td>£{{client.total}}</td>
//...
</tr>
The model (clients) changes in the controller often (an ng-click handler changes the data in the $scope). I would like to highlight all cells that has changed.
A highly related question on SO is this, but it introduces new markup (highlighter="person.firstName") on each element, whereas I simply want AngularJS to highlight any change on the table; that is, every time the DOM changes, I wish to add a highlight class.
How can this be achieved?
When the grid is initially rendered, it follows the ordering of the list (model) behind it. How would one revert to that same natural ordering after a sort by column has occurred?
Within an ng-repeater you could set a custom data attribute to {{$index}}
<li class="sortable" ng-repeat="item in items" data-index="{{$index}}">
Then when the DOM is manipulated to produce your column sort the index when rendered will be preserved within data-index