Comments (8)
- 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.
.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.
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.
Related Issues (20)
- Pre-Select Checkbox in Tree Table based on JSON data HOT 2
- Possible to mark cell changed indicator to RowAction HOT 2
- Export All HOT 8
- have Plan to add TabControl ?
- Can i use both dtHeaderTemplate , dtRowGroupTemplate in same table. HOT 1
- indeterminate selection option for Tree table template HOT 4
- Table column reorder not updating view HOT 3
- dtHeaderTemplate with treeTable
- Pagination for dtHeaderTemplate child group HOT 4
- How can i connect custom column template(dtHeaderTemplate) to table column.
- groupRowsBy removing column from table HOT 4
- headerCellTemplate in Update dialog HOT 1
- Action Menu HOT 1
- column for array of objects HOT 2
- How can i get the updated column list from the datamanager after hiding the columns? HOT 2
- Language inside the columns modal dialog box HOT 3
- Default filter in CRUD table on first load HOT 2
- Is there a way to do something like this using mazdik? HOT 1
- Default value for select HOT 1
- Prevent modal closing while click the "esc" button
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-mazdik.