How to use the aurelia-slickgrid.Formatters.percentCompleteBar function in aurelia-slickgrid
To help you get started, we’ve selected a few aurelia-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.
ghiscoding / aurelia-slickgrid / client-cli / src / examples / slickgrid / example10.js View on Github 
defineGrids() {
this.columnDefinitions1 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.columnDefinitions2 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.gridOptions1 = {
enableAutoResize: false,
enableCellNavigation: true,
enableCheckboxSelector: true,
checkboxSelector: {
// remove the unnecessary "Select All" checkbox in header when in single selection mode
hideSelectAllCheckbox: true
},
rowSelectionOptions: {
// True (Single Selection), False (Multiple Selections)
selectActiveRow: true
},},
{
id: 'duration', name: 'Duration (days)', field: 'duration',
sortable: true,
type: FieldType.number,
editor: {
model: Editors.text
},
onCellChange: (e, args) => {
alert('onCellChange directly attached to the column definition');
console.log(args);
}
},
{
id: 'complete', name: '% Complete', field: 'percentComplete',
formatter: Formatters.percentCompleteBar,
type: FieldType.number,
editor: {
model: Editors.integer
}
},
{
id: 'start', name: 'Start', field: 'start',
formatter: Formatters.dateIso,
sortable: true,
type: FieldType.date
/*
editor: {
model: Editors.date
}
*/
},defineGrids() {
this.columnDefinitions1 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.columnDefinitions2 = [
{
id: 'title', name: 'Title', field: 'title',
sortable: true,
type: FieldType.string,
filterable: true
},
{
id: 'duration', name: 'Duration (days)', field: 'duration',
sortable: true,
type: FieldType.number,
filterable: truethis.columnDefinitions2 = [
{
id: 'title', name: 'Title', field: 'title',
sortable: true,
type: FieldType.string,
filterable: true
},
{
id: 'duration', name: 'Duration (days)', field: 'duration',
sortable: true,
type: FieldType.number,
filterable: true
},
{
id: 'complete', name: '% Complete', field: 'percentComplete',
formatter: Formatters.percentCompleteBar,
type: FieldType.number,
filterable: true,
sortable: true
},
{
id: 'start', name: 'Start', field: 'start',
filterable: true,
sortable: true,
formatter: Formatters.dateIso,
exportWithFormatter: true,
type: FieldType.date,
filter: { model: Filters.compoundDate },
},
{
id: 'finish', name: 'Finish', field: 'finish',
filterable: true,id: 'title', name: 'Title', field: 'title',
minWidth: 100, width: 120,
filterable: true,
sortable: true
},
{
id: 'duration', name: 'Duration', field: 'duration',
minWidth: 100, width: 120,
filterable: true,
sortable: true
},
{
id: 'percentComplete', name: '% Complete', field: 'percentComplete',
resizable: false,
minWidth: 130, width: 140,
formatter: Formatters.percentCompleteBar,
type: FieldType.number,
filterable: true,
filter: { model: Filters.slider, operator: '>=' },
sortable: true
},
{
id: 'start', name: 'Start', field: 'start',
minWidth: 100, width: 120,
filterable: true,
sortable: true
},
{
id: 'finish', name: 'Finish', field: 'finish',
minWidth: 100, width: 120,
filterable: true,
sortable: trueminWidth: 50,
cssClass: 'cell-title',
sortable: true
},
{
id: 'duration', name: 'Duration', field: 'duration',
minWidth: 50, width: 60,
sortable: true,
type: FieldType.number,
groupTotalsFormatter: GroupTotalFormatters.sumTotals,
params: { groupFormatterPrefix: 'Total: ' }
},
{
id: '%', name: '% Complete', field: 'percentComplete',
minWidth: 70, width: 90,
formatter: Formatters.percentCompleteBar,
sortable: true,
groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage,
params: { groupFormatterPrefix: '<i>Avg</i>: ' }
},
{
id: 'start', name: 'Start', field: 'start',
minWidth: 60,
sortable: true,
formatter: Formatters.dateIso,
exportWithFormatter: true
},
{
id: 'finish', name: 'Finish', field: 'finish',
minWidth: 60,
sortable: true,
formatter: Formatters.dateIso,defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70 },
{ id: 'phone', name: 'Phone Number using mask', field: 'phone', sortable: true, type: FieldType.number, minWidth: 100, formatter: Formatters.mask, params: { mask: '(000) 000-0000' } },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, minWidth: 90 },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true, minWidth: 100 },
{ id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100 },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
this.gridOptions = {
autoResize: {
containerId: 'demo-container',
sidePadding: 15
},
enableExcelCopyBuffer: true
};
}labelSuffix: 'symbol'
},
collectionSortBy: {
property: 'label',
sortDesc: true
},
collectionFilterBy: {
property: 'value',
value: 0,
operator: OperatorType.notEqual
},
model: Editors.singleSelect
},
minWidth: 100,
params: {
formatters: [Formatters.collectionEditor, Formatters.percentCompleteBar]
}
}, {
id: 'start',
name: 'Start',
field: 'start',
filterable: true,
filter: { model: Filters.compoundDate },
formatter: Formatters.dateIso,
sortable: true,
minWidth: 100,
type: FieldType.date,
editor: {
model: Editors.date
}
}, {
id: 'finish',aurelia-slickgrid
Slickgrid components made available in Aurelia
Package Health Score
75 / 100Popular aurelia-slickgrid functions
- aurelia-slickgrid.Aggregators.Avg
- aurelia-slickgrid.Aggregators.Sum
- aurelia-slickgrid.Editors.checkbox
- aurelia-slickgrid.Editors.date
- aurelia-slickgrid.Editors.longText
- aurelia-slickgrid.FieldType.boolean
- aurelia-slickgrid.FieldType.date
- aurelia-slickgrid.FieldType.dateIso
- aurelia-slickgrid.FieldType.number
- aurelia-slickgrid.FieldType.string
- aurelia-slickgrid.Filters.compoundDate
- aurelia-slickgrid.Filters.compoundInput
- aurelia-slickgrid.Filters.multipleSelect
- aurelia-slickgrid.Filters.singleSelect
- aurelia-slickgrid.Filters.slider
- aurelia-slickgrid.Formatters.checkmark
- aurelia-slickgrid.Formatters.dateIso
- aurelia-slickgrid.Formatters.multiple
- aurelia-slickgrid.Formatters.percentCompleteBar
- aurelia-slickgrid.OperatorType.notEqual