Kendo UI Grid datasource read URL called thrice on page load

Question

When I open a new page, the Kendo UI Grid read URL (GetReport_Json) gets called thrice, although it should be called once.

function LoadReport() {
    $("#gridReport").kendoGrid({
        dataSource: {
            serverPaging: true,
            pageSize: 100,
            page: 1,
            transport: {
                read: {
                    url: _BASEURL + "Reports/GetReport_Json",
                    type: "POST",
                    dataType: "json",
                    data: function () {
                        return {
                            from: moment($("#fromFilter").val(), Common.dateFormat.toUpperCase() + ' ' + Common.timeFormat).format('YYYY-MM-DD HH:mm'),
                            to: moment($("#toFilter").val(), Common.dateFormat.toUpperCase() + ' ' + Common.timeFormat).format('YYYY-MM-DD HH:mm')
                        }
                    }
                }
            },
            
        columns: [
            {
                field: "ID",
                hidden: true,
                menu: false
            },
            {
                field: "PickupDateTime",
                title: tr.Get("BookingDate"),
                template: "#: GetDate(PickupDateTime) #",
                type: "date",
                filterable: false,
                width: "5%",
                media: "(min-width: 300px)",
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align:center;"
                }
            },
        ],  
    });

    $("#gridReport").data("kendoGrid");
}

The function is called in document ready.

I reckon the issue is not with the code but some architectural level or configuration issue. It may be that the Kendo libraries (JS) have been included multiple times. It's obvious that the default behaviour of a Kendo Grid is not to bind the grid thrice.

Any ideas or suggestions?