Current I have a scenario where I have to load records on scrollbar scrollevent. I have a empty dropdown list and on first load I am appending first 20 records which are retrieved from server. On dropdown scroll I am getting next 20 records from server and appending to dropdown. I am repeating this process on scrollbar event and appending next 20 and next 20 records to dropdown.
Below is my code/algorithm.
My Question is : Do we have any option to load all records at a time instead of loading 20 from server?
Cons: My odata returns only 20 records at a time. Its page size is set to 20. I do not have control to odata update. I have to loop the scenario to get 20 by 20 each time and on page load it should sum all together.
var nextCitiesLink = null;
var pgLoading = false;
$("#SelectedNames").bind('scroll', function(e) {
loadCityNames();
});
function loadCityNames() {
if (!pgLoading && nextLinkPgs != null) {
pgLoading = true;
$.ajax({
type: "GET",
url: nextCitiesLink,
crossDomain: true,
cache: false,
contentType: 'application/json; charset=utf-8',
xhrFields: {
withCredentials: true
},
success: function (result) {
debugger;
var namesDrpdown = $('#SelectedNames');
$.each(result.value, function(val, data) {
namesDrpdown.append($('<option></option>').val(data.Id).html(data.Name));
});
nextCitiesLink= "odatalink&$skip=20";
pgLoading = false;
},
complete: function() {
}
});
}
}
You could make multiple requests to get the number of pages you need to populate your page.
A better idea would be to ask whoever can update the OData service to increase the page size. It would be a bad idea to allow clients request everything in one call.