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.
New Product LaunchBoldDesk: Help desk ticketing software.
Try it for free.|
<ejs-grid #grid [dataSource]='data' height='400' [frozenRows]='2' [frozenColumns]='1' [allowSelection]='false' [enableHover]='false'
[allowResizing]='true' [allowSorting]='true' [allowMultiSorting]='false' allowPaging='true'>
<ng-template #toolbarTemplate let-data>
<ejs-multiselect #multiselect id='multiselectelement' width='400' mode='checkbox' (created)="created($event)" (removed)="removed($event)" (select)="select($event)"></ejs-multiselect>
</ng-template>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
...
</e-columns>
</ejs-grid> |
|
...
export class AppComponent {
...
created(args: any): void {
var mulData = [];
for (var i = 0; i < this.grid.columns.length; i++) {
if ((this.grid.columns[i] as any).index >= this.grid.frozenColumns) {
mulData.push((this.grid.columns[i] as any).field);
}
}
var multiselect = (document.getElementsByClassName("e-multiselect")[0] as any).ej2_instances[0];
multiselect.dataSource = mulData; //assign multiselect dropdown dataSource as grid column field names
}
removed(args:any){
this.grid.getColumnByField(args.itemData).isFrozen = false ;
this.grid.refreshColumns();
}
select(args: any): void {
if(this.multiselect.getItems().length ==1){
args.cancel =true;
}else{
for (var i = 0; i < this.grid.getVisibleColumns().length; i++) {
if (args.itemData == this.grid.getVisibleColumns()[i].field) {
this.grid.getVisibleColumns()[i].isFrozen = true; //added isFrozen property to corresponding columns
}
}
this.grid.refreshColumns();
}
}
} |
|
<ejs-grid #grid [dataSource]='data' [frozenColumns]='1' [allowSelection]='false' [enableHover]='false' [allowResizing]='true'
[allowSorting]='true' [allowMultiSorting]='false' allowPaging='true'>
<ng-template #toolbarTemplate let-data>
<ejs-toolbar (created)="onCreate($event)">
<e-items>
<e-item template='<input type="text" tabindex="1" id="ddlelement" />' type='Input'></e-item>
</e-items>
</ejs-toolbar>
</ng-template>
<e-columns>
. . .
</e-columns>
</ejs-grid>
|
|
import { MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns';
. .
MultiSelect.Inject(CheckBoxSelection);
export class AppComponent {
@ViewChild('grid')
public grid: GridComponent;
public multiselect: MultiSelect = new MultiSelect({
created :this.created.bind(this),
removed:this.removed.bind(this),
select:this.select.bind(this),
mode:"CheckBox",
width:400
});
. . .
onCreate(args:any){
this.multiselect.appendTo('#ddlelement');
}
removed(args:any){
this.grid.getColumnByField(args.itemData).isFrozen = false ;
this.grid.refreshColumns();
}
select(args: any): void {
if (this.grid.getColumns().length - 1 > this.grid.getFrozenColumns()) {
for (let i = 0; i < this.grid.getVisibleColumns().length; i++) {
if (args.itemData == this.grid.getVisibleColumns()[i].field) {
this.grid.getVisibleColumns()[i].isFrozen = true;
}
}
this.grid.refreshColumns();
}else{
args.cancel =true;
}
}
}
|
|
App.component.ts
export class AppComponent {
@ViewChild('grid')
public grid: GridComponent;
public data: Observable<DataStateChangeEventArgs>;
public pageOptions: Object;
public searchField: any;
public state: DataStateChangeEventArgs;
public columns: any;
public toolbar: object[];
constructor( private service: OrdersService) {
this.data = service;
}
public dataStateChange(state: DataStateChangeEventArgs): void {
this.service.execute(state);
}
clickHandler(args) {
if (args.item.id === 'freeze') {
this.grid.getColumnByField('CustomerID').isFrozen = true; //isFrozen property helps to freeze the columns
this.grid.refreshColumns();
}
}
public ngOnInit(): void {
this.toolbar = [{ text: 'Freeze Column', tooltipText: 'Freeze Column', prefixIcon: 'e-expand', id: 'freeze' }];
this.pageOptions = { pageSize: 10, pageCount: 4 };
let state = { skip: 0, take: 10 };
this.service.execute(state);
}
} |
|
export class AppComponent {
@ViewChild('ddsample')
public dropDown: DropDownListComponent;
@ViewChild('grid')
public grid: GridComponent;
public data: Object[];
public editSettings: Object;
public columnMenuItems: any = [{ text: 'Freeze column', id: 'freezecolumn' },{ text: 'UnFreeze column', id: 'unfreezecolumn' }];
columnMenuClick(args) {
if (args.item.id === 'freezecolumn') {
this.grid.getColumnByField(args.column.field).isFrozen = true; //isFrozen property helps to freeze the columns
this.grid.refreshColumns();
}
if (args.item.id === 'unfreezecolumn') {
this.grid.getColumnByField(args.column.field).isFrozen = false; //isFrozen property helps to freeze the columns
this.grid.refreshColumns();
}
}
public ngOnInit(): void {
this.data = orderDataSource;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true , newRowPosition: 'Top' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.orderidrules = { required: true, number: true };
this.customeridrules = { required: true };
}
}
|
