|
[app.component.ts]
this.toolbar = [{ text: 'Sort', tooltipText: 'sort', id: 'sort' }, 'Add', 'Edit', 'Update', 'Delete'];
clickHandler(args) {
if (args.item.id === 'sort') {
this.Dialog.show();
}
}
Descending(args) {
this.grid.setProperties({
sortSettings: { columns: [{ field: 'ShipCountry', direction: args.value }] }
});
}
Ascending(args) {
this.grid.setProperties({
sortSettings: { columns: [{ field: 'ShipCountry', direction: args.value }] }
});
}
None(args) {
this.grid.clearSorting();
}
[app.compoenent.html]
<ejs-grid #grid [dataSource]='data' allowSorting='true' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings'
(toolbarClick)='clickHandler($event)' [toolbar]='toolbar'>
<e-columns>
. . . .
</e-columns>
</ejs-grid>
<ejs-dialog #Dialog [header]='header' [allowDragging]='dialogdragging' [animationSettings]='animationSettings' [showCloseIcon]='showCloseIcon'
[visible]='hidden' [target]='target' [width]='width' >
<ng-template #content>
<div class="radiobutton-control">
<h4>Sort data using this column</h4>
<div class="row">
<ejs-radiobutton label="None" name="sort" value="None" checked="true" (change)="None($event)"></ejs-radiobutton>
</div>
<div class="row">
<ejs-radiobutton label="Ascending" name="sort" value="Ascending" (change)="Ascending($event)"></ejs-radiobutton>
</div>
<div class="row">
<ejs-radiobutton label="Descending" name="sort" value="Descending" (change)="Descending($event)"></ejs-radiobutton>
</div>
</div>
</ng-template>
</ejs-dialog>
[app.component.css]
ejs-dialog.e-control.e-dialog.e-lib.e-popup.e-popup-open {
max-height: 190px !important;
}
| 
