How to disable the left side menu based on data about ng-mazdik HOT 8 CLOSED

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 = <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;
      }
    };
  }

}

from ng-mazdik.

2. Sample
   Demo

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

from ng-mazdik.

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.

from ng-mazdik.

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.

from ng-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); ?

from ng-mazdik.

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.

from ng-mazdik.

demo custom row action

from ng-mazdik.

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.

from ng-mazdik.