How to Implement Kendo Mobile "Press to load More" in Knockout JS

Question

I have series of data in one page in which I am getting data of past two days using linq. I want to create a button clicking which gets 5 more days data. Please find the code for getting 2 days data. I need to add this to my code press to load more

https://demos.telerik.com/kendo-ui/m/index#mobile-listview/press-to-load-more

<div data-role="view" id="divData">
  <ul data-role="listview" data-bind="ListofEmployeeData">
    <li>
      <span data-bind="text:EmpID"></span>
      <span data-bind="text:EmpName"></span>
      <span data-bind="text:Empemail"></span>
    </li>
  </ul>
</div>

function EmployeeDetails() {
  self.ListofEmployeeData = ko.observableArray([]);
  self.getTotalStarRating = function () {
    ///Mobile DeviceUUId
    var Model = {deviceUUID: deviceId};
    $.ajax({
      type: "POST",
      dataType: "json",
      data: Model,
      url: serverUrl + 'xx/xx/xx',
      success: function (data) {
        self.ListofEmployeeData($.map(data, function (item) {
          return new EmployeeModel(item);
        }));
      }
    });
  }
}

function EmployeeModel(item)
{
  self.EmpID=ko.observable(item.empId);
  self.EmpName=ko.observable(item.EmpName);
  self.Empemail=ko.observable(item.Empemail);
}

Answer 1

You need to have a property in your data request to the server that indicate which day you want to load or how many days and in your server side you only return data based on that property I call it here DayNumber.

If you need to press Load more only one time and not any more you can hide your button in your ajax success. But if you want to keep loading data and you have no idea how much more data left you need to change the logic somehow in your back-end that send with return data.

The next thing, you need to push new element to your array every time you get data.

Don't forget to keep this separate in each model and sub model. Also in your view I see you bind <ul data-role="listview" data-bind="ListofEmployeeData"> but you forgot to put binding name like foreach :ListofEmployeeData

function EmployeeDetails() {
  var self = this;
  self.DayNumber = ko.observable(2);
  self.ListofEmployeeData = ko.observableArray([]);

  self.getTotalStarRating   = function () {
  var Model = {deviceUUID: deviceId,DayNumber: self.DayNumber()};
    $.ajax({
      type: "POST",
      dataType: "json",
      data: Model,
      url: serverUrl + 'xx/xx/xx',
      success: function (data) {
       // here based on your logic you need to hide your button load more if there is no more data for example if you know that once you have loaded DayNumber 5 then hide it 
       // if(self.DayNumber() == 5) hide your button
       $.map(data, function (item) {
            self.ListofEmployeeData.push(new EmployeeModel(item));
        });
    }})
  }
   // On your view bind a click event to loadMore as button
    self.LoadMore = function(){
        // here you update DayNumber based on your logic
        self.DayNumber(5);
        self.getTotalStarRating();
      }
   }
    function EmployeeModel(item)
    { var self = this;
      self.EmpID=ko.observable(item.empId);
      self.EmpName=ko.observable(item.EmpName);
      self.Empemail=ko.observable(item.Empemail);
    }