How to disable the left side menu based on data

[kontacthimanshu]

Hi Mazdik,

I am using "app-crud-table" in my application. I have following two requirements to fulfill. Can you please suggest how to achieve these?

1) Disable to left side menu based on a property in data (for example: "isdeleted"). 2) Alternate color for row background

Here is a sample of my data: [ { "id":1, "userteam":{"username":"John Salgat", "teamname":"Dev"}, "roles":[1,2], "rolenames":["Developer","Tester"], "isactive": true, "isdeleted": false }, { "id":2, "userteam":{"username":"Frank Castellon", "teamname":"Dev"}, "roles":[1], "rolenames":["Developer"], "isactive": true, "isdeleted": false }, { "id":3, "userteam":{"username":"Frank Castellon", "teamname":"Executive"}, "roles":[3], "rolenames":["Knowledge Manager"], "isactive": true, "isdeleted": false }, { "id":4, "userteam":{"username":"Jeff Rigsby", "teamname":"Executive"}, "roles":[4], "rolenames":["Operations Manager"], "isactive": true, "isdeleted": true } ]

Thanks.

[mazdik]

1. Sample

   
   import {Component, ViewChild, AfterViewInit} from '@angular/core';
   import {Column, CdtSettings, DataManager, CrudTableComponent} from '../../lib/ng-crud-table';
   import {DemoService} from './demo.service';

@Component({ selector: 'app-basic-demo', template: <app-crud-table #cdt [dataManager]="dataManager"></app-crud-table> })

export class BasicDemoComponent implements AfterViewInit {

columns: Column[]; dataManager: DataManager; settings: CdtSettings = { crud: true }; @ViewChild('cdt') cdt: CrudTableComponent;

constructor(private service: DemoService) { this.dataManager = new DataManager(this.columns, this.settings, this.service); }

ngAfterViewInit() { this.cdt.rowMenuBeforeOpen = (row) => { const menuIndex = this.cdt.actionMenu.findIndex(x => x.id === this.dataManager.messages.delete); if (menuIndex > -1) { this.cdt.actionMenu[menuIndex].disabled = (row['race'] !== 'ASMODIANS'); } }; this.cdt.actionMenu.find(x => x.id === this.dataManager.messages.delete).command = (row) => { if (row['race'] === 'ASMODIANS') { return confirm('Delete row ?') ? this.dataManager.delete(row) : null; } else { return null; } }; }

}

[mazdik]

2) Sample Demo

.datatable-body-row.row-sorcerer,
.datatable-body-row.row-sorcerer .datatable-row-left {
  background-color: LightSlateGray;
  color: white;
}

[kontacthimanshu]

Hi Mazdik,

Thanks for quick turnaround. I get an idea from the sample on how to work with left side menus. I in particular need to disable the entire menu button. Please see in the image as yellow highlighted.

Can you please suggest how to disable the entire menu button and disable particular menu option inside the menu?

Many thanks.

[kontacthimanshu]

Also I tried to disable the "Update" menu using the code below . But it does not seem to work, the update menu is still loading the edit form.

ngAfterViewInit() { this.cdt.rowMenuBeforeOpen = (row) => { const menuIndex = this.cdt.actionMenu.findIndex(x => x.id === this.dataManager.messages.titleUpdate); if (menuIndex > -1) { this.cdt.actionMenu[menuIndex].disabled = (row['isdeleted'] === true); } }; }

Thanks.

[mazdik]

there is still a table without a menu button (without CRUD) <app-data-table [table]="dataTable">

May be this.cdt.actionMenu[menuIndex].disabled = (row['isdeleted'] !== true); ?

[kontacthimanshu]

Hi Mazdik,

I just noticed that the event "rowMenuBeforeOpen" is not getting called at all. Below is my formation. I had to copy the default behavior for "rowMenuBeforeOpen" from your lib folder on GitHub to my "ng-crud-table". It was not there initially in my code. So may be I have missed copying something else which is not even executing overridden "rowMenyBeforeOpen" in my code. Can you please suggest what could be the issue

ngAfterViewInit() { console.log("Inside ngAfterViewInit"); this.cdt.rowMenuBeforeOpen = (row) => { console.log("Inside rowMenuBeforeOpen"); const menuIndex = this.cdt.actionMenu.forEach(function(value, index, arr){ console.log(value.label); if(value.label === 'Update' && row['isdeleted'] === true) { value.disabled = row['isdeleted']; } }); }; }

console.log("Inside rowMenuBeforeOpen"); is not rendering anything.

Thanks.

[mazdik]

demo custom row action

[kontacthimanshu]

Thanks for quick turnaround. I had to add the call for "rowMenuBeforeOpen" in my "ng-crud-table" component. It was not there earlier since I copied the code before you might have added this method.

`onRowMenuClick(event: any, row: Row) { const el = event.target.parentNode.parentNode.parentNode; // row const rowHeight = el.offsetHeight; const rowTop = el.offsetTop + rowHeight;

const rowChanged = this.dataManager.rowChanged(row);
let menuIndex = this.actionMenu.findIndex(x => x.id === this.dataManager.messages.revertChanges);
if (menuIndex > -1) {
  this.actionMenu[menuIndex].disabled = !rowChanged;
}
menuIndex = this.actionMenu.findIndex(x => x.id === this.dataManager.messages.save);
if (menuIndex > -1) {
  const rowIsValid = this.dataManager.rowIsValid(row);
  this.actionMenu[menuIndex].disabled = !rowChanged || !rowIsValid;
}

const left = 0;
const alertHeight = (this.alert) ? this.alert.nativeElement.offsetHeight : 0;
const toolbarHeight = (this.toolbar) ? this.toolbar.getHeight() : 0;
let top = alertHeight + toolbarHeight + this.dt.header.getHeight();
top += rowTop;
if (this.dataManager.settings.virtualScroll) {
  top -= (this.dataManager.dimensions.offsetY) ? 17 : 0;
} else {
  top -= this.dataManager.dimensions.offsetY;
}

### **this.rowMenuBeforeOpen(row);**
this.rowMenu.show(<MenuEventArgs>{originalEvent: event, data: row, left: left, top: top});

}`

It works like charm now.

Thanks.