I am using an ngx-datatable to render tabular data(image below) in my Angular component. Everything works fine except the fact that I am unable to remove the sort function from the 'Action' header column. On inspecting it, I can see that it is using span class = "sort-btn" under span class = "datatable-header-cell-wrapper". Any idea on how the sort function can be removed? I have added the code below:
schedule-management.component.html:
<ol class="breadcrumb">
<li class="breadcrumb-item"><a [routerLink]="['/home']">Home</a></li>
<li class="breadcrumb-item"><a [routerLink]="['/cldtools']">Cloud Runner Tools</a></li>
<li class="breadcrumb-item active">Schedule Management</li>
</ol>
<div class="row" style="margin-top:20px;">
<div class="col-lg-12">
<h2>All Schedules</h2>
</div>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-lg-12">
<div class="dropdown">
<button class="btn btn-primary">Create New </button>
<div class="dropdown-content">
<a [routerLink]="['/schedulemanagement/autoStartStopVm']" [queryParams]="{dropDownListSelectedItem:'AutoStart'}">AutoStart</a>
<a [routerLink]="['/schedulemanagement/autoStartStopVm']" [queryParams]="{dropDownListSelectedItem:'AutoShutdown'}">AutoShutdown</a>
<!--<a href="#">Auto Scale</a>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!--<div style="overflow-x:scroll; overflow-y:scroll; width: 100%">-->
<ngx-datatable #table
class='datatable'
[sortType]="'single'"
[columns]="columns"
[columnMode]="'flex'"
[headerHeight]="40"
[footerHeight]="50"
[rowHeight]="'auto'"
[groupRowsBy]="'isCurrentDate'"
[limit]="10"
[rows]='rows'
[groupExpansionDefault]="true"
[scrollbarH]="true">
<ngx-datatable-group-header [rowHeight]="60" #myGroupHeader>
<ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
<div style="padding-left:5px;">
<a title="Expand/Collapse Group"
(click)="toggleExpandGroup(group)">
<b>{{group.value[0].isCurrentDate === true? 'Scheduled for Today':'Scheduled for other days'}}</b>
</a>
</div>
</ng-template>
</ngx-datatable-group-header>
<ng-template #sortableColumnTemplate let-sort="sortFn" let-column="column" ngx-datatable-header-template>
<span (click)="sort()" class="sort-fullwidth">{{column?.name}}</span>
<input class="filter-box" placeholder='' (keyup)='updateFilter($event)' />
</ng-template>
<ng-template #dateColumn let-row="row" let-value="value" ngx-datatable-cell-template>
<div>{{value | date:"short"}}</div>
</ng-template>
<ng-template #actionRowTemplate let-row="row" let-value="value" ngx-datatable-cell-template>
<div style="display:block; text-align:center;">
<!-- <a title="copy"><i class="glyphicon glyphicon-copy"></i></a> -->
<a title="delete" (click)="deleteWarningModal.show();scheduleToDelete = value"><i class="glyphicon glyphicon-remove"></i></a>
</div>
</ng-template>
</ngx-datatable>
</div>
</div>
<loading-spinner *ngIf="showSpinner"></loading-spinner>
<modal #deleteWarningModal>
<div class="app-modal-header">
Warning
</div>
<div class="app-modal-body">
Are you sure you want to delete the schedule?
</div>
<div class="app-modal-footer">
<button type="button" (click)="deleteSchedule()" class="btn btn-primary">Yes</button>
<button type="button" (click)="deleteWarningModal.hide()" class="btn btn-secondary">No</button>
</div>
</modal>
schedule-management.component.ts:
import { Component, Inject, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { GridComponent } from '../shared/grid.component';
import { SchdedulingDetails } from '../../models/schedulingDetails';
//Services
import { ScheduleManagementService } from '../../services/schedulemanagement.service';
import { ToasterNotificationService } from '../../services/toasterNotification.service';
import { ModalComponent } from '../shared/modal.component';
@Component({
selector: 'schedulemanagement',
templateUrl: './schedule-management.component.html',
styleUrls: ['./schedule-management.component.css', '../shared/grid.component.css']
})
export class ScheduleManagementComponent extends GridComponent implements OnInit {
constructor(private _schedManagementService: ScheduleManagementService,
private notificationsService: ToasterNotificationService) {
super();
}
scheduleToDelete: string;
showSpinner: boolean = true;
@ViewChild('deleteWarningModal') deleteWarningModal: ModalComponent;
@ViewChild('dateColumn') dateColumn: TemplateRef<any>;
ngOnInit(){
this.buildTable();
this.populateTable();
}
buildTable() {
this.columns = [
{
name: 'SID',
prop: 'sapsid',
sortable: true,
sortString: '',
flexGrow: 1,
cellTemplate: this.customColumnTemplate,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'CI Host',
prop: 'ciHostName',
sortable: true,
sortString: '',
flexGrow: 2,
cellTemplate: this.customColumnTemplate,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'App Host',
prop: 'sapAppHostName',
sortable: true,
sortString: '',
flexGrow: 2,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'Instance#',
prop: 'sapAppInstanceNumber',
sortable: true,
sortString: '',
flexGrow: 2,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'DB Host',
prop: 'dbHostName',
sortable: true,
sortString: '',
flexGrow: 2,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'Starts on',
prop: 'startDateTime',
sortable: true,
sortString: '',
flexGrow: 3,
headerTemplate: this.sortableColumnTemplate,
cellTemplate: this.dateColumn
},
{
name: 'Ends on',
prop: 'stopDateTime',
sortable: true,
sortString: '',
flexGrow: 3,
headerTemplate: this.sortableColumnTemplate,
cellTemplate: this.dateColumn
},
{
name: 'Scheduled For',
prop: 'actionName',
sortable: true,
sortString: '',
flexGrow: 2.7,
headerTemplate: this.sortableColumnTemplate,
},
{
name: 'Frequency',
prop: 'frequency',
sortable: true,
sortString: '',
flexGrow: 2,
headerTemplate: this.sortableColumnTemplate
},
{
name: 'Action',
prop: 'id',
cellTemplate: this.actionRowTemplate,
sortable: false,
flexGrow: 1.3
}
];
}
populateTable() {
this._schedManagementService.getSchedulingDetails().subscribe(
response=>{
this.showSpinner = false;
this.updateRows(response);
}, error => {
this.showSpinner = false;
this.notificationsService.notify('error', 'Error', "Unexpected error occured while retrieving Scheduling details.");
}
)
}
deleteSchedule(){
let id = this.scheduleToDelete;
this._schedManagementService.deleteSchedulingDetails(id).subscribe(
result =>{
this.rows = this.rows.filter(r=> r.id !== id);
this.deleteWarningModal.hide();
},error =>{
this.notificationsService.notify('error', 'Error', "Unexpected error occured while deleting schedule.");
});
}
}
