List view Endless scrolling spinner

[Dale]

Hi,

Is there an easy way to disable the spinner when loading more content in the list view on endless scroll mode? I can set the following CSS to hide it altogether but this would affect the initial load and load after filter etc

    .k-loading-mask {
        display: none !important;
    }

Many thanks,

Dale

[Stoyan]

Hello Dale,

Achieving this requirement for a specific behavior like subsequent fetches of data from the server is indeed tricky.

You can subscribe to the DataSource's RequestStart Event to most accurately catch the time at which the loader appears and set it visibility to hidden.

.DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Endless_Scrolling_Read", "ListView"))
                .PageSize(9)
                .Events(e=>e.RequestStart("onRequestStart"))
            )

    var requestStart = 0;
    function onRequestStart(e){
        requestStart++;
        if(requestStart==1){
            setTimeout(function(){
                $(".k-loading-mask").css("visibility","visible");
            })
        }else{
            setTimeout(function(){
                $(".k-loading-mask").css("visibility","hidden");
            })
        }
    }

    .k-loading-mask{
        visibility:hidden;
    }

I have applied the code above to this Telerik REPL example. Please give it a try and let me know how it works on your side.

Regards,
Stoyan
Progress Telerik

[Dale]

Thank you Stoyan :)

[Dale]

I am having trouble getting this working with my code. It uses an odd mix of taghelper and html helper, I get a console error that the function is not defined? (note I added the on-request-start tag)

Edit: nevermind, it was simply because the script was after instead of before the html

<kendo-datasource type="DataSourceTagHelperType.Ajax" name="imagelistViewDataSource" server-operation="true" page-size="75" on-request-start="onRequestStart">
    <transport>
        <read url="@Url.Action("GetItems", "ImagesModule")" />
    </transport>
    <schema>
        <model>
            <fields>
                <field name="Item.Id" type="int"></field>
                <field name="Item.Accessed" type="date"></field>
                <field name="Item.Modified" type="date"></field>
                <field name="Item.Created" type="date"></field>
                <field name="Item.ByteCount" type="number"></field>
            </fields>
        </model>
    </schema>
</kendo-datasource>
<div class="demo-section wide">
    <div id="image-listview-container" class="responsive-kendolistview-vh100-minus-200px">
        <script type="text/x-kendo-tmpl" id="image-container-template">
            <div class="single-image-container">
                <div class="k-card">
                    <div class="k-card-body">
                        <div onclick="loadItemDetailsWindow(#: Item.Category # , #: Item.Id #)" class="text-center card-background-grey">
                            <img class="img-fluid k-card-image" src="ImagesModule/GetImageThumbnail/#: Item.Id #" /><br />
                        </div>
                    </div>
                </div>
            </div>
        </script>
        @(Html.Kendo().ListView<CCL.Spektor.Analysis.WebUI.Models.ImageItemModel>()
        .Name("image-listView")
        .TagName("div")
        .DataSource("imagelistViewDataSource")
        .ClientTemplateId("image-container-template")
        .Scrollable(ListViewScrollableMode.Endless)
        .HtmlAttributes(new { style = "height:670px;" })
        .Pageable()
        .Selectable(ListViewSelectionMode.Single)
        )
    </div>

....
....

    var request = 0;
    function onRequestStart(e) {
        request++;
        if (request == 1) {
            setTimeout(function () {
                $(".k-loading-mask").css("visibility", "visible");
            })
        } else {
            setTimeout(function () {
                $(".k-loading-mask").css("visibility", "hidden");
            })
        }

    }
</script>

[gunasundari]

Hi,

Is there any way to disable the spinner when loading no records in the list view on endless scroll mode? I have tried the above script and CSS to hide it altogether but if block only triggers not else block, how to end the event when no records found on my case?

   

Many thanks,

Guna

[Ivaylo]

Hello, Dale

Thank you for the details provided.

To determine whether the collection is empty and hide the spinner accordingly, register for the DataBinding event of the ListView. The event handler provides an items object that includes a length property. If this property is 0, the collection is empty, and the spinner should be hidden. Below is an example of the implementation:

 

//C#
.Events(e => e.DataBinding("onDataBinding"))

//JS
function onDataBinding(e) {
    if (e.items.length === 0) {
        $(".k-loading-mask").hide();
    } 
}

 

Below, I prepared a sample REPL where the suggested modifications could be tested:

• https://netcorerepl.telerik.com/mzYGcqEt57wNZV9N17

I hope this information was helpful.

Regards,
Ivaylo
Progress Telerik