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>