We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Introducing BoldSign : Free e-signature software and API by Syncfusion.
Claim your free account|
<ejs-grid #batchgrid id='Batchgrid' (created)="created()" [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'>
<e-columns>
. . .
</e-columns>
</ejs-grid>
<div class="e-grid">
// for Bottom Right position with custom Toolbar
<ejs-toolbar id="toolbar" (clicked)=" clicked($event)">
<e-items>
<e-item prefixIcon='e-btn-icon e-update e-icons e-icon-left' tooltipText='Save' text='Save'></e-item>
<e-item prefixIcon='e-btn-icon e-delete e-icons e-icon-left' tooltipText='Delete' text='Delete'></e-item>
<e-item prefixIcon='e-btn-icon e-cancel e-icons e-icon-left' tooltipText='Cancel' text='Cancel'></e-item>
</e-items>
</ejs-toolbar>
</div>... |
|
[.ts]
...
created(){
this.grid.element.querySelector('.e-toolbar-items').style.float = 'right'; // for Top Right position with default Grid Toolbar items.
}
...
clicked(args){
if(args.item.text == 'Save') {
if(this.grid.editModule.getBatchChanges().changedRecords.length || this.grid.editModule.getBatchChanges().addedRecords.length || this.grid.editModule.getBatchChanges().deletedRecords.length)
this.grid.endEdit();
}
else if(args.item.text == 'Delete') {
this.grid.deleteRecord()
}
else {
this.grid.editModule.batchCancel()
}
}
... |
|
...
<ejs-toolbar #tool id="toolbar" (clicked)="clicked($event)">
<e-items>
<e-item cssClass='e-save e-overlay' align='Right' tooltipText='Save' text='Save'></e-item>
<e-item cssClass='e-delete' align='Right' tooltipText='Delete' text='Delete'></e-item>
<e-item cssClass='e-cancel e-overlay' align='Right' tooltipText='Cancel' text='Cancel'></e-item>
</e-items>
</ejs-toolbar>
... |
|
...
<ejs-toolbar #tool id="toolbar" (clicked)="clicked($event)">
<e-items>
<e-item cssClass='e-save e-overlay' tooltipText='Save' text='Save'></e-item>
<e-item cssClass='e-delete' tooltipText='Delete' text='Delete'></e-item>
<e-item cssClass='e-cancel e-overlay' tooltipText='Cancel' text='Cancel'></e-item>
</e-items>
</ejs-toolbar>
... |
|
...
.e-save .e-tbar-btn{
background: greenyellow;
}
.e-delete .e-tbar-btn{
background: grey;
}
.e-cancel .e-tbar-btn{
background: yellow;
}
.e-toolbar-item::before{
display: none;
}
... |
|
...
beforeBatchSave(args){
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.add('e-overlay');
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.add('e-overlay');
}
batchCancel(args){
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.add('e-overlay');
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.add('e-overlay');
}
batchDelete(args){
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.remove('e-overlay');
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.remove('e-overlay');
}
cellSave(args){
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.remove('e-overlay');
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.remove('e-overlay');
}
... |
|
...
created(){
this.grid.toolbarModule.toolbar.items[0].align = 'Right';
this.grid.toolbarModule.toolbar.items[0].prefixIcon='';
this.grid.toolbarModule.toolbar.items[0].cssClass = 'e-customadd';
}
... |
|
[index.html]
...
<style>
.e-customadd .e-tbar-btn{
background: red;
}
</style>
... |
|
export class BatchEditComponent implements OnInit {
public ngOnInit(): void {
this.data = orderData.slice(0,5);
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch', showDeleteConfirmDialog : true};
}
} |
|
@Component({
selector: 'control-content',
template: '<div class="control-section">
<ejs-grid #batchgrid id='Batchgrid' (created)="created()" [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (batchDelete)="batchDelete($event)" >
<e-columns>
. . .
</e-columns>
</ejs-grid>
</div>
'
})
export class BatchEditComponent implements OnInit {
. . .
batchDelete(args){
. . .
this.grid.endEdit();
}
clicked(args){
if(args.item.text == 'Save') {
if(this.grid.editModule.getBatchChanges().changedRecords.length || this.grid.editModule.getBatchChanges().addedRecords.length || this.grid.editModule.getBatchChanges().deletedRecords.length)
this.grid.endEdit();
}
else if(args.item.text == 'Delete') {
this.grid.deleteRecord();
}
else {
this.grid.editModule.batchCancel()
}
}
} |
|
<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' type='number' [validationRules]='orderidrules'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customeridrules' type='string'></e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules' type='number'></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' editType='datepickeredit' textAlign='Right' type='date'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams' type='string'></e-column>
</e-columns>
</ejs-grid> |
|
...
CoverageList = [];
... |
|
...
actionComplete(args){
if(args.requestType == 'batchsave'){
console.log(this.grid.dataSource.length);
}
}
... |
|
...
L10n.load({
'de-DE': {
'grid': {
'Add': 'customName'
}
}
});
... |
|
...
dataBound(args){
if(this.changeName){
this.grid.toolbarModule.toolbar.items[0].text = "customName";
this.changeName = false;
}
console.log(this.grid.dataSource.length);
}
... |
|
...
batchDelete(args){
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.remove('e-overlay');
this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.remove('e-overlay');
console.log(this.grid.editModule.getBatchChanges());
this.grid.editSettings.showConfirmDialog = false;
setTimeout(()=>this.grid.endEdit(),0);
setTimeout(()=>this.grid.editSettings.showConfirmDialog = true,10);
}
... |
|
...
created(){
...
this.grid.getColumns()[0].validationRules = { required: [true, 'Este campo es requerido']}
}... |
|
...
L10n.load({
'en-US': {
'grid': {
'Add': 'customName',
'BatchSaveConfirm': 'custom save messages',
'ConfirmDelete': 'custom delete',
'CancelEdit': 'custom edit',
}
}
})
... |
|
@Component({
selector: 'app-root',
template: ' <ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'>
<e-columns>
. . .
<e-column field='Verified' headerText='Verified' editType= 'booleanedit' [edit]='boolParams' width=150></e-column>
</e-columns>
</ejs-grid>’,
})
export class AppComponent implements OnInit {
. . .
public boolParams: {params: CheckBoxModel};
ngOnInit(): void {
. . .
this.boolParams = { params: {checked: true } };
}
} |
