I'm trying to update my table in angular 8, when data is added using renderRows() method but it is not working.
I have used #ViewChild and .renderRows() method after getting response also can anyone explain the meaning of this : {static: true}
//TODO: allocateMoney.ts
#ViewChild(MatTable, { static: true }) table: MatTable<any>;
openDialog() {
let dialogRef = this.dialog.open(AllocateMoneyFormComponent, {
disableClose: true,
data: {
projectId: this.projectId,
budgetId: this.budgetId
}
});
dialogRef.afterClosed().subscribe((result) => {
if (result == 'loadData') {
this.table.renderRows();
}});
}
//TODO: allocateMoney.html
<table class="example-list" mat-table [dataSource]="budget_dm.budget[budgetId].allocateMoney.tables.rows"
class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell [style.display]="'none'" *matHeaderCellDef> Id </th>
<td mat-cell [style.display]="'none'" *matCellDef="let element">{{element.id}}
</td>
</ng-container>
<ng-container matColumnDef="categoryCode">
<th mat-header-cell *matHeaderCellDef style="padding-left: 15px;"> Acc </th>
<td mat-cell *matCellDef="let element">{{element.categoryCode}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="budget_dm.budget[budgetId].allocateMoney.tables.cols"></tr>
<tr class="example-box" mat-row
*matRowDef="let row; columns: budget_dm.budget[budgetId].allocateMoney.tables.cols;"></tr>
</table>
//TODO: allocateMoneyForm.ts
isSubmitForm() {
this.formdata.raw.projectId = this.projectId;
this.formdata.raw.budgetId = this.budgetId;
this.budgetService.allocateMoney(this.orgId, this.formdata.raw).then(resp => {
if (resp) {
this.toast_.successToastr("Money Allocated Success", "SUCCESS");
} else {
this.toast_.errorToastr("Money Allocated Failure", "ERROR");
}
});
this.dialogRef.close('loadData');
}
core.js:5847 ERROR TypeError: Cannot read property 'renderRows' of undefined
at SafeSubscriber._next (allocate-money.component.ts:57)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at Subject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47)
at SafeSubscriber._next (dialog.es5.js:429)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
Try adding the #table reference to your html mat table , this is to make sure your mat table childview is well instantiated
Related
I am using Angular Material for displaying content.
My TS code is:
import { Component, OnInit, ViewChild } from '#angular/core';
import { AdminReassignTaskService } from 'src/app/services/admin-reassign-task.service'
import { Location } from '#angular/common';
import { trigger, state, transition, animate, style } from '#angular/animations';
#Component({
selector: 'app-admin-reassign-task',
templateUrl: './admin-reassign-task.component.html',
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
state('expanded', style({height: '*'})),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
styleUrls: ['./admin-reassign-task.component.scss']
})
export class AdminReassignTaskComponent implements OnInit {
reassignedlist;
columnsToDisplay = ['test'];
#ViewChild('expandedElement') expandedElement;
displayedColumns = ['comment'];
taskList;
constructor(private serv: AdminReassignTaskService,public _location: Location) { }
ngOnInit() {
this.serv.getByURL('admin/list').subscribe(response => {
this.reassignedlist=response;
})
}
editReassigned(i,element){
const result = [this.reassignedlist.find( ({ id }) => id === i )];
this.taskList=result;
this.expandedElement = this.expandedElement === element ? null : element ;
}
}
And my HTML Code is
<div class="main-content-wraper">
<ng-container>
<div class="mat-elevation-z2 card rounded-0 p-3 d-flex flex-row flex-wrap" >
<table mat-table [dataSource]="reassignedlist" multiTemplateDataRows class="mat-elevation-z8 w-100 custom-table">
<ng-container matColumnDef="task_name">
<th mat-header-cell *matHeaderCellDef> Task Name </th>
<td mat-cell *matCellDef="let element"> {{element.taskName}} </td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button matTooltip="View Task" (click)="editReassigned(element.id,element)" ><mat-icon >flag</mat-icon></button>
</td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<div class="example-element-detail" [#detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<table mat-table [dataSource]="taskList" class="task-card" >
<ng-container matColumnDef="comment">
<th mat-header-cell *matHeaderCellDef> Assigned User Comment</th>
<td mat-cell *matCellDef="let element" matTooltip="Assigned User Comment"> {{element.assignedUserCmt}} </td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element" >
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
</div>
</ng-container>
</div>
By this code, Main Table and Onclicking ICON in the main table Second table expands and I can View Data. But,
1) 2nd Table not Displaying Heading to it. What is the Wrong Coding Here?
2) After 2 Table I wanted to add some 4-5 Input Field in this Expand and collapse manner. How I can ADD without a table?
3) Here Attached Image (Output of current Coding). Kindly let me know anyone having an answer with you.
I think you need to be using expansion panels as part of angular material accordion:
https://stackblitz.com/angular/dnbkkoraexxa?file=src%2Fapp%2Fexpansion-overview-example.ts
<input Type="text" (keyup)="someval('$event.target.value')"/>
<table>
<tr>
<th> Id</th>
<th>Name</th></tr>
<tr *ngFor="let emp of pagedItems">
<td>{{emp.Id}}</td>
<td>{{emp.Name}}</td>
</tr>
<tr *ngIf="ErrorHandle">
<td colspan="5">
{{ErrorMsg}}
</td>
</tr>
Typescript
Here i writen some code to handle my Search text box its accepect Id value and find rec within the table.When Record is their its display the Rec but wen its not available i wana 2 hide *ngFor
someval(value){
if(value.length>=5){
this._pagedItems= this.allItems.find(e=>e.uniqueid == value);
if(this._pagedItems == undefined){
this.ErrorHandle=true;
this.ErrorMsg="No Such Record is Present......."
}
else{
this.pagedItems=[];
this.pagedItems.push(this._pagedItems);
}
You can do something like following code. I create it in FIDDLE
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 6';
ErrorHandle :Boolean = false;
ErrorMsg :string ="No Such Record is Present.......";
allItems = [{ Id: 1, Name: "chintan" }]
pagedItems = [];
emp = { Id: 1, Name: "chintan" };
someval(value) {
if (value) {
this.pagedItems = [];
let emp = this.allItems.find(e => e.Id == value);
if (emp == undefined) {
this.ErrorHandle = true;
} else {
this.ErrorHandle = false;
this.pagedItems.push(emp);
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all-testing.umd.dev.js"></script>
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<input Type="text" (keyup)="someval($event.target.value)" />
<table>
<tr *ngIf="!ErrorHandle">
<th> Id</th>
<th>Name</th>
</tr>
<tr *ngFor="let emp of pagedItems">
<td>{{emp.Id}}</td>
<td>{{emp.Name}}</td>
</tr>
<tr *ngIf="ErrorHandle">
<td colspan="5">
{{ErrorMsg}}
</td>
</tr>
</table>
In Vue how do you remove a row from a table when the item is deleted?
Below is how I am rendering the table
<tbody>
<tr v-for="item in items">
<td v-text="item.name"></td>
<td v-text="item.phone_number"></td>
<td v-text="item.email"></td>
<td><button #click="fireDelete(item.id)">Delete</button></td>
</tr>
</tbody>
Below is an excerpt from my Vue component.
data() {
return {
items: []
}
},
methods: {
fireDelete(id) {
axios.delete('/item/'+id).then();
}
},
mounted() {
axios.get('/item').then(response => this.items = response.data);
}
The axios.get work and so does the axios.delete, but the fronend doesn't react so the item is only removed from the table after a page refresh. How do I get it to remove the relevant <tr>?
I've managed to work out a nice way. I pass the index to the fireDelete method and use the splice function. Works exactly how I wanted.
<tbody>
<tr v-for="(item, index) in items" v-bind:index="index">
<td v-text="item.name"></td>
<td v-text="item.phone_number"></td>
<td v-text="item.email"></td>
<td><button #click="fireDelete(item.id, index)">Delete</button></td>
</tr>
</tbody>
fireDelete(id, index) {
axios.delete('/item/'+id).then(response => this.organisations.splice(index, 1));
}
I had the same trouble as this question. So maybe someone will find this usefull.
For the button use:
v-if="items.length > 1" v-on:click="fireDelete(index)"
And the fireDelete function:
fireDelete: function (index) {
this.photos.splice(index, 1);
}
You can try to modify your #click="fireDelete(item.id)" part to a custom method #click='deleteData(items, item.id)'
and do something like:
methods: {
deleteData (items, id) {
this.items = null // These parts may not
this.fireDelete(id) // match your exact code, but I hope
} // you got the idea.
}
and your template can do just:
<tbody>
<tr v-for="item in items" v-if='items'>
<td v-text="item.name"></td>
<td v-text="item.phone_number"></td>
<td v-text="item.email"></td>
<td><button #click="deleteData(item, item.id)">Delete</button></td>
</tr>
</tbody>
<tr>
<td class="einput">Admission Type :</td>
<td class="einput">
#Html.DropDownListFor(model => model.Adm_Type_LSeq, (SelectList)ViewBag.lstAdmType, String.Empty, new { #class = "drpclass" })
</td>
<td class="einput">Hostel Name :</td>
<td class="einput">
#Html.DropDownListFor(model => model.Hostel_Seq, (SelectList)ViewBag.lstHostel, String.Empty, new { #class = "drpclass" })
</td>
</tr>.
this is my code in html5 ...in this admission type have two values "hosteller" and "dayscholar" when i select admission type as dayscholar, hostel name dropdown should be disable then i select admission type as a hosteller hostel name dropdown should be enable.
this only my requirement ..please help me some one..thanks in advance.
Try this :
Jquery
$(document).ready(function () {
if ($("#Select1").val() == "dayscholar")
{
$("#Select2").attr('disabled','disabled');
}
else
{
$("#Select2").removeAttr('disabled');
}
$("#Select1").change(function () {
if ($(this).val() == "dayscholar")
{
$("#Select2").attr('disabled','disabled');
}
else
{
$("#Select2").removeAttr('disabled');
}
});
});
cshtml code :
<tr>
<td class="einput">Admission Type :
</td>
<td class="einput">
#Html.DropDownListFor(model => model.Adm_Type_LSeq, (SelectList)ViewBag.lstAdmType, String.Empty, new { #class = "drpclass" ,#id="Select1" })
</td>
<td class="einput">Hostel Name :
</td>
<td class="einput">
#Html.DropDownListFor(model => model.Hostel_Seq, (SelectList)ViewBag.lstHostel, String.Empty, new { #class = "drpclass",#id="Select2" })
</td>
</tr>
Demo : http://jsfiddle.net/Vx7H8/
I am trying to make datatables sort my columns. The first column works okay as it's a simple number. However the next column is an input field. When I try to make that sort then nothing happens.
<table width="100%" cellspacing="0" class="table sortable no-margin">
<thead>
<tr>
<th scope="col" class="sorting" style="width: 57px;">
<span class="column-sort">
</span>
ID
</th>
<th scope="col" class="sorting_desc" style="width: 94px;">
<span class="column-sort">
</span>
Order
</th>
</tr>
</thead>
<tbody>
<tr id="row_20" class="odd">
<td id="refKey_20" style="text-align:center;" class="">
1Y
</td>
<td class=" sorting_1">
<input type="text" value="160" size="3" name="item.Order"
maxlength="3" id="Order_20" >
</td>
</tr>
<tr id="row_19" class="even">
<td id="refKey_19" style="text-align:center;" class="">
1X
</td>
<td class=" sorting_1">
<input type="text" value="150" size="3" name="item.Order"
maxlength="3" id="Order_19" >
</td>
</tr>
</tbody>
</table>
Is there some way that I can get datatables to sort input fields?
The easiest way is to add a hidden span inside columns <span style="visibility:hidden">value of the input</span>
You should look at this example that explains how to do sorting on input fields. Basically you declare a sorting function
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( this.value );
} );
return aData;
}
And then tell to your table to use that
$('#example').dataTable( {
"aoColumns": [
null,
{ "sSortDataType": "dom-text" }
]
} );
or wit aoColumnDefs
$('#example').dataTable( {
"aoColumnDefs": [{ "sSortDataType": "dom-text" , aTarget: "yourclass"}]
} );
For versions of Datatables 1.10+ the names of some option variables have been changed and a new API introduced. Documentation here: http://datatables.net/examples/plug-ins/dom_sort.html.
Here is a working version of the above accepted answer in 1.10+:
$(document).ready(function () {
var table = $('#example').DataTable({
"columnDefs": [
{
"orderDataType": "dom-input",
"targets": 0, // Just the first column
},
],
});
});
The custom sort function:
$.fn.dataTable.ext.order['dom-input'] = function (settings, col) {
return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
return $('input', td).val();
});
}
jQuery.fn.dataTableExt.oSort['textbox-asc'] = function (a, b) {
var vala = $('#' + $(a).filter('input').attr('id')).val().toLowerCase();
var valb = $('#' + $(b).filter('input').attr('id')).val().toLowerCase();
if (vala === '')
return 1;
if (valb === '')
return -1;
return vala < valb ? -1 : vala > valb ? 1 : 0;
};
jQuery.fn.dataTableExt.oSort['textbox-desc'] = function (a, b) {
var vala = $('#' + $(a).filter('input').attr('id')).val().toLowerCase();
var valb = $('#' + $(b).filter('input').attr('id')).val().toLowerCase();
if (vala === '')
return 1;
if (valb === '')
return -1;
return vala < valb ? 1 : vala > valb ? -1 : 0;
};
then use it like this
$(datatable).dataTable({
"iDisplayLength": 50,
"bLengthChange": false,
"bPaginate": false,
"columns": [
null, { "sType": "textbox" }
],
});
If you decide to use the columns option where you are rending information from a JSON file you can easily add a hidden span on your render property. It appears as though DataTables looks for text to order and if it cannot find any, it will break. The example at https://datatables.net/examples/plug-ins/dom_sort.html uses a table that has already been rendered. Here is an example using an API:
...columns([{
"data": "receivedDate",
"render": function (data, type, row, meta)
{
if (data == "null")
{
return "<input type='text' id='datepicker_" + meta.row + "' class='datepicker form-control' /><span class='hidden'><span>";
}
else
{
return "<input type='text' id='datepicker_" + meta.row + "' class='datepicker form-control' value='" + moment(data).format("MM/DD/YYYY") + "'/><span class='hidden'>" + moment(data).format('MM/ DD / YYYY') + "</span>";
}
}
}]);
Set an invisible div with the value before the input field.
<tbody>
<tr id="row_20" class="odd">
<td id="refKey_20" style="text-align:center;" class="">
1Y
</td>
<td class=" sorting_1">
<div style="display:none;">160</div>
<input type="text" value="160" size="3" name="item.Order"
maxlength="3" id="Order_20" >
</td>
</tr>
<tr id="row_19" class="even">
<td id="refKey_19" style="text-align:center;" class="">
1X
</td>
<td class=" sorting_1">
<div style="display:none;">150</div>
<input type="text" value="150" size="3" name="item.Order"
maxlength="3" id="Order_19" >
</td>
</tr>
</tbody>