Tanvir
Top achievements
Rank 1
Rank 1
Here is my defaultGridSettings code. I wanted to auto scroll paging for the grid with back end api call. But the onDataLoad() function is not invoking when I scroll down. It is only fired once at the initial page load. So I am unable to load subsequent data (next) with scrolling the grid.
protected setDefaultGridSettings() {
this.gridOptions = {
height: "100%",
allowCopy: false,
sortable: {
mode: "multiple",
allowUnsort: true
},
resizable: true,
columnMenu: true,
filterable: true,
scrollable: {
virtual: true
},
noRecords: {
template: require("../../common/templates/GridEmptyState.html")
},
edit: !this.readonlyAccess ? this.editOnchange.bind(this) : null,
cancel: this.cancelChange.bind(this),
columns: [
{ field: `id`, hidden: true, filterable: false, sortable: false, menu: false },
{
field: `sellerName`, title: `Seller Name`,
filterable: {
multi: true,
search: true
}
},
{
field: `marketPlace`,
title: `Marketplace`,
filterable: {
multi: true,
search: true
},
editor: this.marketPlaceEditor.bind(this),
template: `# if(marketPlace){ # #=marketPlace# #} else {# #=marketPlace||""# #} #`,
},
{ field: `phoneNumber`, title: `Phone Number`, filterable: false },
{ field: `emailAddress`, title: `Email Address`, filterable: false },
{ field: `physicalAddress`, title: `Physical Address`, filterable: false },
{
field: `partnerType`,
title: `Partner Type`,
filterable: {
multi: true,
search: true
},
hidden: false,
editor: this.partnerTypeEditor.bind(this),
width: "200px",
template: `# if(partnerType){ # #=partnerType# #} else {# #=partnerType||""# #} #`,
},
{
field: `sellerType`,
title: `Authorization`,
filterable: {
multi: true,
search: true
},
hidden: false,
editor: this.authorizationTypeEditor.bind(this),
template: `# if(sellerType){ # #=sellerType# #} else {# #=sellerType||""# #} #`
},
{
field: `sellerCategory`,
title: `Category`,
filterable: {
multi: true,
search: true
},
hidden: false,
editor: this.categoryTypeEditor.bind(this),
template: `# if(sellerCategory){ # #=sellerCategory# #} else {# #=sellerCategory||""# #} #`
},
{
field: `tag`,
title: `Auto-Tag`,
filterable: {
multi: true,
search: true
},
hidden: false,
editor: this.tagEditor.bind(this),
template: `# if(tag){ if(tag == 'Benign') {# #=tag# #} else {# #=tag# #} } else {# #=tag||""# #} #`
},
// {command: ["edit", "destroy"], title: "Actions", width: "270px", menu:false},
{
command: [{
name: "edit",
template: "<a class='k-grid-edit command-edit glyphicon glyphicon-pencil'></a>"
}, {
name: "destroy",
template: "<a class=' k-grid-delete command-delete glyphicon glyphicon-trash danger'></a>"
}], title: "Actions", menu: false, width: "120px"
}
] as kendo.ui.GridColumn[],
editable: "inline",
dataSource: {
serverSorting: true,
serverFiltering: true,
serverPaging: true,
pageSize: 500,
transport: {
read: this.onDataLoad.bind(this),
update: (options => {
let tag = "";
if (options.data.tag instanceof Object) {
tag = options.data.tag.id;
} else if (tag !== "") {
tag = (this.tagOptions.filter(x => options.data.tag === x.text))[0].id;
}
this.addButton = false;
const sellerList: ISeller[] = [{
id: options.data.id,
sellerName: options.data.sellerName ? (options.data.sellerName).trim() : options.data.sellerName,
marketPlace: options.data.marketPlace,
phoneNumber: options.data.phoneNumber ? (options.data.phoneNumber).trim() : options.data.phoneNumber,
emailAddress: options.data.emailAddress ? (options.data.emailAddress).trim() : options.data.emailAddress,
physicalAddress: options.data.physicalAddress ? (options.data.physicalAddress).trim() : options.data.physicalAddress,
sellerType: options.data.sellerType,
sellerCategory: options.data.sellerCategory,
partnerType: options.data.partnerType,
tag: tag ? tag : options.data.tag
}];
this.sellerViewDataService.updateSeller(sellerList).subscribe(response => {
if (response.success) {
options.success(sellerList);
this.grid.kendoGrid.dataSource.read();
} else {
options.error(null);
this.alertDialog.show(response.messages);
}
},
error => {
options.error(null);
this.alertDialog.show(error.messages);
});
}).bind(this),
destroy: (options => {
this.addButton = false;
const sellerList: ISeller[] = [{
id: options.data.id,
sellerName: options.data.sellerName,
marketPlace: options.data.marketPlace
}];
this.sellerViewDataService.deleteSeller(sellerList).subscribe(response => {
if (response.success) {
options.success(null);
} else {
options.error(options.data);
this.alertDialog.show(response.messages);
this.grid.kendoGrid.dataSource.read();
}
},
error => {
options.error(options.data);
this.alertDialog.show(error.messages);
this.grid.kendoGrid.dataSource.read();
;
});
}).bind(this),
create: (options => {
this.addButton = false;
const sellerList: ISeller[] = [{
sellerName: options.data.sellerName ? (options.data.sellerName).trim() : options.data.sellerName,
marketPlace: options.data.marketPlace,
phoneNumber: options.data.phoneNumber ? (options.data.phoneNumber).trim() : options.data.phoneNumber,
emailAddress: options.data.emailAddress ? (options.data.emailAddress).trim() : options.data.emailAddress,
physicalAddress: options.data.physicalAddress ? (options.data.physicalAddress).trim() : options.data.physicalAddress,
sellerType: options.data.sellerType,
sellerCategory: options.data.sellerCategory,
partnerType: options.data.partnerType,
tag: options.data.tag
}];
this.sellerViewDataService.addSeller(sellerList).subscribe(response => {
if (response.success) {
options.success(sellerList);
this.grid.kendoGrid.dataSource.read();
} else {
options.error(null);
this.alertDialog.show(response.messages);
}
},
error => {
options.error(null);
this.alertDialog.show(error.messages);
});
}).bind(this),
parameterMap: function (options, operation) {
if (operation !== "read" && options) {
return JSON.stringify({ data: options });
}
}
},
schema: SellerTrackingViewSourceSchema,
// change: this.countSeller.bind(this)
},
change: this.onGridChange.bind(this),
dataBound: this.onGridDataBound.bind(this),
reorderable: true,
selectable: "multiple row",
navigatable: false,
columnMenuOpen: (field) => {
this.selectColumnReorderController.bind(field, this.grid);
}
};
}
this is my onDataLoad method -
onDataLoad(options: kendo.data.DataSourceTransportReadOptions & { data: { page: number } }) { console.log(`ON DATA LOAD: SELLER TRACKING`); console.log(options); if (!this.grid) { // filtering workaround: ignore data load when grid is not initialized yet console.log(`GRID NOT INITIALIZED`); return; } let skip = (options.data.page - 1) * this.searchFieldsObj.limit; this.searchFieldsObj.skip = skip; if (options.data.sort) { this.searchFieldsObj.sortTypes = options.data.sort as ISort[]; } this.searchFieldsObj.kendoFilter = options.data.filter; // add the customer to the filters and make sure its set if (this.accountID > 0 && this.gridOptions.columns) { const filterableColumns = this.gridOptions.columns.filter(col => col.filterable && col.filterable["multi"]); filterableColumns.forEach(col => { if (col) { this.sellerViewDataService.getSellerDataForField(col.field).subscribe((response: any) => { let items = []; if (response) { if (response.data.length > 0) { items = response.data; } } (col.filterable["dataSource"] as kendo.data.DataSource).data(items); }, error => { (col.filterable["dataSource"] as kendo.data.DataSource).data([]); }); } }); this.grid.refreshFilterMultiselects(); // this.clearSelectedRows(); const oSearch = options.data.page === 1 ? this.sellerViewDataService.getSellerViewData(this.searchFieldsObj, filterableColumns.map(x => x.field)) : this.sellerViewDataService.getSellerViewData(this.searchFieldsObj); oSearch .subscribe((data: any) => { if (data) { if (data.sellers != null) { data.sellers.forEach((item: any) => { let tag = ""; const found = this.tagOptions.some(function (e) { if (e.id === item.tag) { tag = e.text; return true; } else return false; }); if (found) { item.tag = tag; } }); let response = {results: [], total: 0}; response.results = data.sellers; response.total = data.count; options.success(response); if (response.total) { this.zone.run(() => { this.sellerCount = response.total; }); } } } this.setExportMenuTitle(); }, error => { if (error.success) { this.sellerCount = 0; let response = {results: [], total: 0}; options.success(response); } }); } }