pagerTemplate(): any {
let _this = this;
return {
template: Vue.component("pagerTemplate", {
template: `
{{ pageNumberMessage }}
{{ pageCountMessage }}
`,
data: () => {
return {
pageCount: this.pageSettings.pageCount,
grid: this.$refs.grid,
pageSize: this.pageSettings.pageSize,
fields: { text: "text", value: "value" },
dropValue: this.pageSettings.pageSize,
onAddSize: this.onAddSize,
context: this,
};
},
computed: {
compact: () => {
return this.compactMode;
},
currentSize: function () {
return this.$data.data.pageSize;
},
totalPages: function () {
return this.$data.data.totalPages;
},
pagerOffset: function() {
return Math.floor((this.$data.data.currentPage - 1) / this.pageCount)
},
shownPages: function () {
// @ts-ignore
let pageOffset = this.pagerOffset * this.pageCount;
let pages = [];
for (
let i = pageOffset + 1;
// @ts-ignore
i <= this.pageCount * (this.pagerOffset + 1);
i++
) {
if (i <= this.$data.data.totalPages) {
pages.push(i);
} else {
break;
}
}
return pages;
},
isFirstPage: function () {
return this.$data.data.currentPage <= 1;
},
isLastPage: function () {
return this.$data.data.currentPage >= this.$data.data.totalPages;
},
hasNextPageNumbers: function () {
// @ts-ignore
if (this.shownPages[this.shownPages.length - 1] >= this.totalPages) {
return false;
}
return true;
},
hasBackPageNumbers: function () {
// @ts-ignore
if (this.shownPages[0] <= 1) {
return false;
}
return true;
},
dropDownData: function() {
if (Array.isArray(this.context.pageSettings.pageSizes)) {
return this.context.pageSettings.pageSizes.map((item: number) => {
if (item === -1) {
return {
text: this.pagerResources.pagerDropdownAuto,
value: item
}
} else {
return {
text: item,
value: item
}
}
})
}
return _this.pageSettings.pageSizes;
},
pagerResources: () => {
return this.genericControlL10n[this.locale].pager;
},
pageNumberMessage: function () {
let resource = this.pagerResources.currentPageInfo;
return resource ? resource.replace("{0}", this.$data.data.currentPage).replace("{1}", this.$data.data.totalPages) : '';
},
pageCountMessage: function () {
let resource = this.pagerResources.totalItemsInfo;
if (_this.selectedIds.length > 0) {
let resourceRowSelected = this.pagerResources.rowSelectedInfo;
return resourceRowSelected ? resourceRowSelected.replace("{0}", this.$data.data.totalRecordsCount).replace("{1}", _this.selectedIds.length) : '';
}
return resource ? resource.replace("{0}", this.$data.data.totalRecordsCount) : '';
},
},
created: function () {
if (Array.isArray(this.dropDownData)) {
let pageSize = this.pageSize || this.context.persistedGridSettings.pageSize
// if the pagesize is equal to the autoSize we can just set auto
if (pageSize === -1 || pageSize === this.context.autoSize) {
this.dropValue = -1;
this.context.pageSettings.pageSize = -1;
return;
}
// @ts-ignore
let isPageSizeInDropdownOptions = this.dropDownData.some((item) => {
return item.value === pageSize;
});
if (!isPageSizeInDropdownOptions) {
this.onAddSize(pageSize)
this.context.pageSettings.pageSize = pageSize;
}
}
},
mounted: function () {
setTimeout(() => {
if (!this.$data.data.totalPages && this.grid && this.grid.ej2Instances && this.grid.ej2Instances.pagerModule) {
// Refreshing pager if incorrect data displayed
this.grid.ej2Instances.pagerModule.pagerObj.refresh();
} else {
this.$nextTick(() => {
// Removing previously mounted (incorrect) pagers
if (this.grid && this.grid.ej2Instances && this.grid.ej2Instances.pagerModule.element.childNodes.length > 1) {
for (let index = 0; index < this.grid.ej2Instances.pagerModule.element.childNodes.length; index++) {
if (index !== 0) {
this.grid.ej2Instances.pagerModule.element.childNodes[index].remove();
}
}
}
})
}
}, 200);
},
methods: {
getGoToPageLabel: (number: number) => {
let resource = this.globalResources.siliconResourceResources.PagerTooltip;
return resource ? resource.replace("{0}", number) : '';
},
pageNext: () => {
let pageData = this.$refs.grid.ej2Instances.pageSettings;
let pages = Math.ceil(
pageData.totalRecordsCount / pageData.pageSize
);
if (pageData.currentPage < pages) {
this.$refs.grid.goToPage(pageData.currentPage + 1);
}
},
pageBack: () => {
let grid = this.$refs.grid;
let pageData = grid.ej2Instances.pageSettings;
if (pageData.currentPage > 1) {
this.pageSettings.currentPage = pageData.currentPage - 1;
grid.goToPage(pageData.currentPage - 1);
}
},
pageLast: () => {
let pages = Math.ceil(
this.$refs.grid.ej2Instances.pageSettings.totalRecordsCount /
this.$refs.grid.ej2Instances.pageSettings.pageSize
);
this.pageSettings.currentPage = pages;
this.$refs.grid.goToPage(pages);
},
pageFirst: () => {
this.pageSettings.currentPage = 1;
this.$refs.grid.goToPage(1);
},
pagerNext: function() {
// @ts-ignore
let page = this.shownPages[this.shownPages.length - 1] + 1;
if (page <= this.$data.data.totalPages) {
this.context.pageSettings.currentPage = page;
this.context.$refs.grid.goToPage(page);
}
},
pagerBack: function() {
// @ts-ignore
let page = this.shownPages[0] - 1;
if (page >= 1) {
this.context.pageSettings.currentPage = page;
this.context.$refs.grid.goToPage(page);
}
},
pageTo: (e: any) => {
this.pageSettings.currentPage = e;
this.$refs.grid.goToPage(e);
},
dropChange: async function(e: any) {
let answer!: string;
if (this.context.isDirty()) {
answer = await this.context.showGridHasUnsavedChangesDialog();
if (answer == "cancel") {
this.context.stopButtonsSpinner();
this.dropValue = e.previousItemData.value;
return;
} else if (answer == "discard") {
//
} else if (answer == "save") {
if((this.context as any).saveMultiEdits) {
(this.context as any).saveMultiEdits();
} else if((this.context as any).saveEdits) {
(this.context as any).saveEdits();
}
}
}
if (e.value !== null && !Number.isNaN(Number(e.value))) {
this.context.pageSettings.pageSize = Number(e.value);
if (e.value > 0) {
// Temporarily reset autoSize
let curAutosize = this.context.autoSize
this.context.autoSize = 0;
this.context.pageSettings.pageSize = e.value;
if (Object.keys(this.context.persistedGridSettings).length) {
this.context.persistedGridSettings.pageSettings.pageSize = e.value;
} else {
this.context.$refs.grid.ej2Instances.pageSettings.pageSize = e.value;
}
if(answer !== "save") {
this.context.$refs.grid.ej2Instances.pagerModule.setPageSize(e.value);
}
this.context.autoSize = curAutosize
} else {
let rowsQuantity = this.context.getAutomaticRowsQuantity();
if (Object.keys(this.context.persistedGridSettings).length) {
this.context.persistedGridSettings.pageSettings.pageSize = -1;
} else {
this.context.$refs.grid.ej2Instances.pageSettings.pageSize = rowsQuantity;
this.context.pageSettings.pageSize = rowsQuantity;
}
if(answer !== "save") {
this.context.$refs.grid.ej2Instances.pagerModule.setPageSize(rowsQuantity);
}
}
}
},
noRecTemplate: function () {
return {
template: Vue.component("noRecordsTemplate", {
template: `
{{description}}
{{addButton}}
`,
data: () => {
return {
description: _this.globalResources.siliconResourceResources.PagerAddEntryText,
addButton: _this.globalResources.siliconResourceResources.ButtonAdd,
};
},
methods: {
addEntry: (e: MouseEvent) => {
let comboBox: any = this.$refs.combo;
let val = Number(comboBox.$el.value);
if (!Number.isNaN(val)) {
if (val <= 100) {
this.onAddSize(val);
} else {
this.dropValue = 100;
}
}
},
},
computed: {
isActive() {
// @ts-ignore
let inputValue = Number(this.$parent.ej2Instances.typedString)
return Number.isInteger(inputValue) && inputValue > 0 && inputValue < 100;
}
},
}),
};
},
},
}),
};
}