koGrid does not seem to be able to sort all items when there are multiple pages. It looks as though it only sorts the page being displayed when you click on a column header. When you go to the next (or any subsequent or previous) page, the data is not sorted according to the column you clicked. This is even the case in the "Server-Side Paging Example" given on the koGrid website:
http://ericmbarnard.github.com/KoGrid/#/examples
Has anyone gotten sorting working over multiple pages using koGrid?
Thank you.
function EmailBlastsViewModel() {
// Data
var self = this;
self.blasts = ko.observableArray();
self.selectedItems = ko.observableArray();
self.status = ko.observable('queued');
self.pagingOptions = {
pageSizes: ko.observableArray([25, 50, 100]),
pageSize: ko.observable(25),
totalServerItems: ko.observable(),
currentPage: ko.observable(1)
}
self.pagingOptions.currentPage.subscribe(function(data) {
self.reload();
});
self.pagingOptions.pageSize.subscribe(function(data) {
self.reload();
});
self.gridOptions = {
displaySelectionCheckbox: true,
data : self.blasts,
selectedItems: self.selectedItems,
multiSelect: false,
pagingOptions: self.pagingOptions,
enablePaging: true,
columnDefs: [
{ field: 'creator.name', displayName: 'From', width: 105 },
{ field: 'to_name', displayName: 'To', width: 105 },
{ field: 'subject', displayName: 'Subject', width: 160 },
{ field: 'status', displayName: 'Status', width: 132 },
{ field: 'date_scheduled', displayName: 'Date Scheduled', width: 160 },
{ field: 'date_sent', displayName: 'Date Sent', width: 160 },
{ displayName: ' ', cellTemplate: $('#cell-template').html(), width: 40 }
]
}
self.allMail = function(item, event) {
self.status(null);
self.reload()
}
self.queuedMail = function(item, event) {
self.status('queued');
self.reload()
}
self.sentMail = function(item, event) {
self.status('sent');
self.reload();
}
self.archiveEmail = function(item, event) {
var email = self.selectedItems()[0];
email.archive();
}
self.approveEmail = function(item, event) {
var email = self.selectedItems()[0];
email.approve();
}
self.rejectEmail = function(item, event) {
var email = self.selectedItems()[0];
email.reject();
}
self.deleteEmail = function(item, event) {
var email = self.selectedItems()[0];
email.deleteEmail();
}
self.reload = function() {
var spinner = new Spinner().spin(document.getElementById('spin'));
var data = {
'page' : self.pagingOptions.currentPage(),
'limit' : self.pagingOptions.pageSize()
}
if( self.status() ) {
data['status'] = self.status()
}
$.ajax({
type: "GET",
data: data,
cache: false,
url: "/api/emailblast",
contentType: "application/json",
success: function(data, textStatus, jqXHR) {
spinner.stop();
var newData = [];
$.each(data.results, function(index, value){
var eb = new EmailBlast(self, value);
newData.push( eb );
})
self.blasts( newData );
self.pagingOptions.totalServerItems(data.total);
},
error: function(jqXHR, textStatus, errorThrown) {
spinner.stop();
noty({text: 'There was an error retrieving the email blasts.', type: 'error', timeout: 5000});
}
});
}
// Initialization
self.init = function() {
self.reload();
}
self.init();
};
emailBlastsViewModel = new EmailBlastsViewModel();
ko.applyBindings(emailBlastsViewModel);
