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

2 posts, 0 answers
  1. Todd
    Todd avatar
    4 posts
    Member since:
    Mar 2012

    Posted 09 Jul 2013 Link to this post

    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,
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 11 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top