How to use angular-slickgrid - 9 common examples
To help you get started, we’ve selected a few angular-slickgrid examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
aspnetrun / run-aspnetcore-cqrs / src / AspnetRun.Web / src / app / views / category / category-list / category-list.component.ts View on Github 
ngOnInit(): void {
this.columnDefinitions = [
{
id: 'edit',
field: 'id',
excludeFromColumnPicker: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
formatter: Formatters.editIcon,
minWidth: 30,
maxWidth: 30,
onCellClick: (e: Event, args: OnEventArgs) => {
this.router.navigate(['/category/category-detail/' + args.dataContext.id]);
}
},
{ id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
{ id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true },
{ id: 'description', field: 'description', name: 'description', filterable: true, sortable: true },
];
this.gridOptions = {
backendServiceApi: {
service: new GraphqlService(),
options: {
columnDefinitions: this.columnDefinitions,
datasetName: GRAPHQL_QUERY_DATASET_NAME
},
process: (query) => this.getCategories(),
}
};;
}ngOnInit(): void {
this.columnDefinitions = [
{
id: 'edit',
field: 'id',
excludeFromColumnPicker: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
formatter: Formatters.editIcon,
minWidth: 30,
maxWidth: 30,
onCellClick: (e: Event, args: OnEventArgs) => {
this.router.navigate(['/product/product-detail/' + args.dataContext.id]);
}
},
{ id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
{ id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true },
{ id: 'unitPrice', field: 'unitPrice', name: 'Unit Price', filterable: true, sortable: true, maxWidth: 200, filter: { model: Filters.inputNumber } },
{ id: 'category', field: 'category.name', name: 'Category', filterable: true, sortable: true, formatter: Formatters.complexObject },
];
this.gridOptions = {
backendServiceApi: {
service: new GraphqlService(),
options: {
columnDefinitions: this.columnDefinitions,
datasetName: GRAPHQL_QUERY_DATASET_NAME
},
process: (query) => this.getProducts(),
}
};;
}ngOnInit(): void {
this.columnDefinitions = [
{
id: 'edit',
field: 'id',
excludeFromColumnPicker: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
formatter: Formatters.editIcon,
minWidth: 30,
maxWidth: 30,
onCellClick: (e: Event, args: OnEventArgs) => {
this.router.navigate(['/category/category-detail/' + args.dataContext.id]);
}
},
{ id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
{ id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true },
{ id: 'description', field: 'description', name: 'description', filterable: true, sortable: true },
];
this.gridOptions = {
backendServiceApi: {
service: new GraphqlService(),
options: {
columnDefinitions: this.columnDefinitions,ngOnInit(): void {
this.columnDefinitions = [
{
id: 'edit',
field: 'id',
excludeFromColumnPicker: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
formatter: Formatters.editIcon,
minWidth: 30,
maxWidth: 30,
onCellClick: (e: Event, args: OnEventArgs) => {
this.router.navigate(['/product/product-detail/' + args.dataContext.id]);
}
},
{ id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
{ id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true },
{ id: 'unitPrice', field: 'unitPrice', name: 'Unit Price', filterable: true, sortable: true, maxWidth: 200, filter: { model: Filters.inputNumber } },
{ id: 'category', field: 'category.name', name: 'Category', filterable: true, sortable: true, formatter: Formatters.complexObject },
];
this.gridOptions = {
backendServiceApi: {
service: new GraphqlService(),
options: {{
id: 'edit',
field: 'id',
excludeFromColumnPicker: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
formatter: Formatters.editIcon,
minWidth: 30,
maxWidth: 30,
onCellClick: (e: Event, args: OnEventArgs) => {
this.router.navigate(['/product/product-detail/' + args.dataContext.id]);
}
},
{ id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
{ id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true },
{ id: 'unitPrice', field: 'unitPrice', name: 'Unit Price', filterable: true, sortable: true, maxWidth: 200, filter: { model: Filters.inputNumber } },
{ id: 'category', field: 'category.name', name: 'Category', filterable: true, sortable: true, formatter: Formatters.complexObject },
];
this.gridOptions = {
backendServiceApi: {
service: new GraphqlService(),
options: {
columnDefinitions: this.columnDefinitions,
datasetName: GRAPHQL_QUERY_DATASET_NAME
},
process: (query) => this.getProducts(),
}
};;
}excludeFromHeaderMenu: true,
formatter: Formatters.editIcon,
minWidth: 30,
maxWidth: 30,
onCellClick: (e: Event, args: OnEventArgs) => {
this.router.navigate(['/category/category-detail/' + args.dataContext.id]);
}
},
{ id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
{ id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true },
{ id: 'description', field: 'description', name: 'description', filterable: true, sortable: true },
];
this.gridOptions = {
backendServiceApi: {
service: new GraphqlService(),
options: {
columnDefinitions: this.columnDefinitions,
datasetName: GRAPHQL_QUERY_DATASET_NAME
},
process: (query) => this.getCategories(),
}
};;
}formatter: Formatters.editIcon,
minWidth: 30,
maxWidth: 30,
onCellClick: (e: Event, args: OnEventArgs) => {
this.router.navigate(['/product/product-detail/' + args.dataContext.id]);
}
},
{ id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
{ id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true },
{ id: 'unitPrice', field: 'unitPrice', name: 'Unit Price', filterable: true, sortable: true, maxWidth: 200, filter: { model: Filters.inputNumber } },
{ id: 'category', field: 'category.name', name: 'Category', filterable: true, sortable: true, formatter: Formatters.complexObject },
];
this.gridOptions = {
backendServiceApi: {
service: new GraphqlService(),
options: {
columnDefinitions: this.columnDefinitions,
datasetName: GRAPHQL_QUERY_DATASET_NAME
},
process: (query) => this.getProducts(),
}
};;
}import { ModalModule } from 'ngx-bootstrap/modal';
import { NgSelectModule } from '@ng-select/ng-select';
import { AngularSlickgridModule } from 'angular-slickgrid';
import { ValidationMessageComponent } from './validation-message/validation-message.component';
import { CapitalizePipe } from './pipes/capitalize.pipe';
import { TrimPipe } from './pipes/trim.pipe';
@NgModule({
imports: [
CommonModule,
FormsModule,
ModalModule.forRoot(),
NgSelectModule,
AngularSlickgridModule.forRoot({
enableAutoResize: true,
autoHeight: false,
autoResize: {
maxHeight: 429,
containerId: 'grid-container',
sidePadding: 0
},
enableFiltering: true,
pagination: {
pageSizes: [],
pageSize: 20,
totalItems: 0
},
}),
],
exports: [id: 'edit',
field: 'id',
excludeFromColumnPicker: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
formatter: Formatters.editIcon,
minWidth: 30,
maxWidth: 30,
onCellClick: (e: Event, args: OnEventArgs) => {
this.router.navigate(['/product/product-detail/' + args.dataContext.id]);
}
},
{ id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
{ id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true },
{ id: 'unitPrice', field: 'unitPrice', name: 'Unit Price', filterable: true, sortable: true, maxWidth: 200, filter: { model: Filters.inputNumber } },
{ id: 'category', field: 'category.name', name: 'Category', filterable: true, sortable: true, formatter: Formatters.complexObject },
];
this.gridOptions = {
backendServiceApi: {
service: new GraphqlService(),
options: {
columnDefinitions: this.columnDefinitions,
datasetName: GRAPHQL_QUERY_DATASET_NAME
},
process: (query) => this.getProducts(),
}
};;
}angular-slickgrid
Slickgrid components made available in Angular
