Endless scroling not working while same code is working in my other page.

[Todd]

Hi all,

I am facing an issue while using the endless scrolling on my CSHTML pages.  In file "index.cshtml" , the endless scrolling is working fine, however in another file "Patient.cshtml" with the similar code, the endless scrolling is not working.The name of the function in both pages is viewInit(e). Below is the code for both pages.Please have a look and advice

Index.cshtml (with working endless scrolling)

<div data-role="view" data-layout="default" data-template="messageTemplate" data-status="1"
    data-init="viewInit" data-title="Inbox" id="Inbox">
    <ul id="LoadMoreInbox" class="messageList">
    </ul>
    <ul data-role="actionsheet" id="options" data-open="onOptionsOpening" data-popup='{"direction": "left"}'>
        <li><a data-click="newMessage" id="btnnewMessage" href="javascript:void(0)" data-align="left"
            data-role="button">New Message</a> </li>
        <li><a id="btnAddInr" href="javascript:void(0)" data-action="addInr">Add INR</a></li>
        <li><a id="btnFileComplete" href="javascript:void(0)" data-action="FileComplete">File
            Complete</a></li>
        @*<li><a href="#" data-action="logout">Logout</a></li>*@
    </ul>
</div>
<div data-role="view" id="FiledInbox" data-status="0" data-template="FiledItem" data-title="Filed"
    data-init="viewInit" data-layout="default">
    <ul id="LoadMoreFiled" class="messageList">
    </ul>
</div>
<div data-role="view" id="SentInbox" data-title="Sent" data-status="2" data-layout="default"
    data-init="viewInit">
    <ul id="LoadMoreSent" class="messageList">
    </ul>
</div>
<script id="messageTemplate" type="text/x-kendo-template">
<div>
# if(Status == 0) { #
  <img src='@Url.Content("~/Content/images/archive.png")' class="MessagePhoto"/>
#}#
# if(Status == 2) { #
  <img src='@Url.Content("~/Content/images/Send_32x32.png")' class="MessagePhoto"/>
#}#
# if(Status == 1) { #
  # if(isRead  == 0) { #
    <img src='@Url.Content("~/Content/images/email_32.png")' class="MessagePhoto"/>
  # } else
  {#
    <img src='@Url.Content("~/Content/images/email_open_32.png")' class="MessagePhoto"/>
  #}#
#}#
</div>

#if(statusId==1){#
   <img src='@Url.Content("~/Content/images/accept_32.png")' class="msgcmpltdsts"/>
#}#
<a  class="amsg _message
  # if(urgent_ind == 1){
      #urgent#
  }# " onclick="RedirectToDetail(#:msg_id#)">    
    <h2>#:msg_subject#</h2>
    <h3>#: from_name #</h3>
    # if(order_ind  != 0) { #
      <span class="ordercount">#: order_ind  #</span>
    # } #
    <h3 class="time">#: how_long#</h3><br/>
    <div style="font-size: 1.3em;margin-left: 20px;margin-top: 0.5em;">#: body#</div>
    <div class="clear"></div>
  </a>
 
<div style="float: right; display: none; overflow: visible; width: 130px;" class="DivMessageOptions" data-role="controlgroup">
  <div style="position: absolute; top: 28px; z-index: 2; padding: 0px 10px;">
   <a   msgid='#: msg_id#' class="File filebutton km-button _file" >File</a>
  </div>
  <div class="btnbackground" style="height: 60px; position: absolute; top: 13px; width: 100%; z-index: 1; padding: 0px 10px; border-radius: 10px 10px 10px 10px; background: none repeat scroll 0px 0px rgb(182, 182, 195); opacity: 0.8;">
  </div>
</div>
</script>
<script>
  
    function touchstart(e) {
     
        var parent = $(e.touch.target).parent();
        var target = $(e.touch.initialTouch),
            listview = $(parent).data("kendoMobileListView"),
            model,
            button = $(e.touch.target).find("[data-role=controlgroup]:visible");
        if (target.closest("[data-role=controlgroup]")[0]) {
            //prevent `swipe`
            this.events.cancel();
            e.event.stopPropagation();
        } else if (button[0]) {
            button.hide();
            //prevent `swipe`
            this.events.cancel();
        } else {
            listview.items().find("[data-role=controlgroup]:visible").hide();
        }
    }


    function swipe(e) {
        var button = kendo.fx($(e.touch.currentTarget).find("[data-role=controlgroup]"));
        button.expand().duration(200).play();
        var element = $(e.sender.element).attr("id");
        if (element == "LoadMoreFiled") {
            $(e.touch.target).find("._file").css('display', 'none');
            $(e.touch.target).find(".DivMessageOptions").width($(e.touch.target).find("._reply:first").width() + $(e.touch.target).find("._forward:first").width() + $(e.touch.target).find("._replyall:first").width() + 75);
            $(e.touch.target).find(".btnbackground").css('display', 'none');
        }
        else if (element == "LoadMoreSent") {
            $(e.touch.target).find("._reply").css('display', 'none');
            $(e.touch.target).find("._replyall").css('display', 'none');
            $(e.touch.target).find("._file").css('display', 'none');
            $(e.touch.target).find(".DivMessageOptions").width($(e.touch.target).find("._forward:first").width() + 30);
            (e.touch.target).find(".btnbackground").css('display', 'none');
        }
       
    }

    var scrollStatus = false;
    function viewInit(e) {
        debugger;
        var status = $(e.sender.id).data("status");
        var boxId = "", templateId = "#messageTemplate";
        var sent = false;
        var flag = "" + status + "";
        switch (parseInt(status)) {
            case 1:
                boxId = "#LoadMoreInbox";
                scrollStatus = false;
                break;
            case 0:
                boxId = "#LoadMoreFiled";
                scrollStatus = true;
                break;
            case 2:
                boxId = "#LoadMoreSent";
                scrollStatus = true;
                sent = true;
                break;
        }

        var datasource = new kendo.data.DataSource({
            pageSize: 10,
            serverPaging: true,

            transport: {
                read: {
                    url: '@Url.Content("~/Message/GetUserMessages")?random=' + Math.random() * 1000,
                    type: "post",
                    dataType: "json"
                },
                parameterMap: function (options) {
                    var parameters = {
                        count: options.pageSize,
                        page: options.page,
                        status: status
                    }
                    return parameters;
                }
            },
            group: { field: 'MessageGroup', dir: 'desc' },

            schema: {

                total: function () { return 0; }
            }
        });


        var scrollCounter = 0;
        $(boxId).kendoMobileListView({
            dataSource: datasource,
            template: $(templateId).html(),
            endlessScroll: scrollStatus,
            scrollTreshold: 30,
            fixedHeaders: true,
            dataBound: function (e) {

                if (status == 0 || status == 2) {
                    $(".km-group-title").css('display', 'none');
                }

                if (e.sender.dataSource._data.length == 0) {
                    scrollStatus = false;
                    if (scrollCounter == 0) {
                        $(boxId).html("<li class='emptytmpl'>No New Message</li>");
                    }
                }
                else { scrollStatus = true; scrollCounter = 1; }
            }
        }).kendoTouch({
            filter: ">li",
            enableSwipe: true,
            touchstart: touchstart,
            swipe: swipe
        });
    }

</script>

Patient.cshtml(Endless scrolling not working)

<div data-role="view" data-init="viewInit" data-layout="default" data-title="Patient List"
    id="actionsheet-view">
    <ul id="patient_List" data-role="listview" data-template="Patient_Template" class="messageList">
    </ul>
    <ul data-role="actionsheet" id="options" data-popup='{"direction": "left"}'>
         </ul>
    <input type="hidden" id="hdnpatientid" />
</div>
<script id="autotemplate" type="text/x-kendo-tmpl">    
          <h3>${ data.LocationName }</h3>
</script>
<script id="Patient_Template" type="text/x-kendo-template">
  <h2 class="Name">#: patientname#</h2>     
    <h3>Date Of Birth: #: DOB#</h3>
  <span id="patientid" style="display:none">#: patientid#</span>
</script>
<script>
    var scrollStatus = false;
    function viewInit(e) {
        templateId = "#Patient_Template";
        var datasource = new kendo.data.DataSource({
            pageSize: 20,
            serverPaging: true,
            transport: {
                read: {
                    url: '@Url.Content("~/Patient/GetPatientsByFacility/")?random=' + Math.random() * 1000,
                    type: "post",
                    dataType: "json"
                },
                parameterMap: function (options) {
                    var parameters = {
                        count: options.pageSize,
                        page: options.page,
                        facilityName: $.trim($("#txtFacility").val()),
                        userId: $("#AllowAllPatientView").val() == "True" ? 0 : MasterVariables.UserId
                    }
                    return parameters;
                },
                schema: {

                    total: function () { return 0; }
                }
            }

        });

        var scrollCounter = 0;
        $("#patient_List").kendoMobileListView({
            dataSource: datasource,
            template: $(templateId).text(),
            endlessScroll: scrollStatus,
            scrollTreshold: 30,
            fixedHeaders: true,
            dataBound: function (e) {
                if (e.sender.dataSource._data.length == 0) {
                    scrollStatus = false;
                    if (scrollCounter == 0) {
                        $(boxId).html("<li class='emptytmpl'>No New Message</li>");
                    }
                }
                else { scrollStatus = true; scrollCounter = 1; }
            }
        }).kendoTouch({
            filter: ">li",
            enableSwipe: true
        });
    }
    var MessageVariable = {
        MessageId: 0,
        PatientId: 0,
        PatientName: '',
        Subject: '',
        SentFromId: 0,
        LocationId: 0,
        LocationName: '',
        CheckAutocomplete: 0 // 0 for unselect and 1 for select
    };

    $(document).ready(function () {
        $("a[data-rel=BackFromRequestPatient]").hide();
        var pdata = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Content("~/Message/GetFacilityList")' + "?" + Math.random() * 1000,
                    type: "get",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8'
                }
            }
        });

        $("#txtFacility").kendoAutoComplete({
            minLength: 3,
            highlightFirst: true,
            filter: 'contains',
            ignoreCase: true,
            dataValueField: "LocationId",
            dataTextField: "LocationName",
            template: kendo.template($("#autotemplate").html()),
            dataSource: pdata,
            select: onSelect,
            close: onClose,
            open: onOpen
        });
    });

    function onOpen(e) {
        MessageVariable.CheckAutocomplete = 0;
    }
    function onClose(e) {
        if (MessageVariable.CheckAutocomplete == 0) {
            viewInit(e);
            loaderElement = kendoMobileApplication.pane.loader.element.find("h1");
        }
    }

    function onSelect(e) {
    }

    function onChange(e) {
    }
    $("#patient_List li").live("click", function () {
        location.href = '@Url.Content("~/Patient/PatientDetail/")' + $(this).find("#patientid").text();
    });

             
</script>



We are using all required references  on both files. Please have a look and give your kind suggestions on this issue.
Please let me know if you have any questions on this.

Thanks,

[Kiril Nikolov]

Hi Todd,

I was not able to reproduce the mentioned behaviour. Could you please extract a runnable demo in a JSBin/ JSFIddler that can be used for investigation?

In the mean time you can check this demo to see a possible implementation of the endless scrolling functionality.
 
Regards,
Kiril Nikolov
Telerik