Show spinning icon while grid is filtering

[sam]

I have a remote data source which I use to populate the grid.

The grid has around 7000 rows and 30 columns, few rows also have a sub grid with maximum of two rows in each sub grid.

Using inbuilt filtering of grid based on a column takes about 3-5 seconds.

During that duration I want to show a spinning/loading icon.

I have the approach in the code below with no success.

The spinning/loading icon does not show up while filtering the grid and waiting for the grid to filter.

When I debug the page and put break points in JavaScript, I can see the loading icon on the grid as expected but its not there in normal use without the debugger open.

dataBound: function () {
            kendo.ui.progress($("#grid"), true);
            highlightLines();
            disableLineItems();
            if ((!isGridEditable)) {
                makeGridReadOnly();
            }
            kendo.ui.progress($("#grid"), false);
        },

[Dimitar]

Hi Sam,

The Grid uses kendo.ui.progress internally to display the loading indicator as mentioned in Configuring the Loading Indicator. If scrolling is enabled and the Grid has no set height, the data area will initially have a zero height, which will make the loading overlay invisible during the first remote request. The article shows two approaches to overcome this. On Grid Remote Data Binding demo the loading indicator is visible as expected on filtering.

Regards,
Dimitar
Progress Telerik

[sam]

Hi Dimitar,

I have already defined the height property of the grid and still it is not working as expected. I went through your linked articles and could not find anything wrong that i am doing.

Please could you let me know what changes i would need to make to ensure the loading indicator is visible. It would be great if you could provide a link to a demo for the same.

My grid definition is as follows bellow :-

$("#grid").kendoGrid({
        dataSource: claimLinedDataSource,
        height: 610,
        pageable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    contains: "Contains",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                },
                date: {
                    eq: "Equal to",
                    neq: "Not Equal to",
                    lt: "Less than",
                    gt: "Greater than"
                }
            }
        },
        sortable: true,
        groupable: true,
        editable: true,
        resizable: true,
        scrollable: {
            virtual: true
        },
        detailInit: detailInit,
        toolbar: [button1,
        {
            name: button2,
            template: "#= button2()#"
        },
        {
            name: button3,
            template: "#= button3()#"
        },
        {
            name: button4,
            template: '#= button4()#'
        },
        button5,
        {
            name: button6,
            template: '#= button6()#'
        },
        button7,
        {
            name: button8,
            template: '#= button8()#'
        }
        ],
        excel: {
            allPages: true,
            fileName: getExcelFileName(),
        },
        edit: function (e) {
            if ((!isGridEditable)) {
                e.sender.closeCell();
            }
        },
        excelExport: generateExcelFile,
        dataBound: function () {
            kendo.ui.progress($("#grid"), true);
            addSubgrid();

            highlightLines();
            disableLineItems();
            if ((!isGridEditable)) {
                makeGridReadOnly();
            }
            kendo.ui.progress($("#grid"), false);
        },
        columns:
            [
                { selectable: true, width: "50px" },
                { field: "column1", headerTemplate: '<span class="font-bold" title="' + column1 + '">' + column1 + '</span>', hidden: true, width: "100px" },
                { field: "column2", headerTemplate: '<span class="font-bold" title="' + column2 + '">' + column2 + '</span>', hidden: true },
                { field: "column3", headerTemplate: '<span class="font-bold" title="' + column3 + '">' + column3 + '</span>', template: function (dataItem) { return dataItem.StatusDescription; }, width: "100px" },
                { field: "column4", headerTemplate: '<span class="font-bold" title="' + column4 + '">' + column4 + '</span>', width: "100px" },
                { field: "column5", headerTemplate: '<span class="font-bold" title="' + column5 + '">' + column5 + '</span>', template: "#=dirtyField(data,'column5')# #:(column5 != null ? column5 : ' ') #", width: "100px" },
                { field: "column6", headerTemplate: '<span class="font-bold" title="' + column6 + '">' + column6 + '</span>', template: "#= dirtyField(data,'column6')# #:(column6 != null ? column6 : ' ')#", width: "100px" },
                { field: "column7", headerTemplate: '<span class="font-bold" title="' + column7 + '">' + column7 + '</span>', template: "#=dirtyField(data,'column7')# #:(column7 != null ? column7 : ' ')#", width: "200px" },
                { field: "column8", headerTemplate: '<span class="font-bold" title="' + column8 + '">' + column8 + '</span>', template: "#=dirtyField(data,'column8')# #:(column8 != null ? column8 : ' ')#", width: "200px" },
                { field: "column9", headerTemplate: '<span class="font-bold" title="' + column9 + '">' + column9 + '</span>', template: "#=dirtyField(data,'column9')# #:(column9 != null ? column9 : ' ')#", width: "100px" },
                { field: "column10", headerTemplate: '<span class="font-bold" title="' + column10 + '">' + column10 + '</span>', template: "#=dirtyField(data,'column10')# #:(column10 != null ? column10 : ' ')#", width: "100px" },
                { field: "column11", headerTemplate: '<span class="font-bold" title="' + column11 + '">' + column11 + '</span>', template: "#=dirtyField(data,'column11')# #:(column11 != null ? column11 : ' ')#", width: "100px" },
                { field: "column12", headerTemplate: '<span class="font-bold" title="' + column12 + '">' + column12 + '</span>', template: "#=dirtyField(data,'column12')# #:(column12 != null ? column12 : ' ')#", width: "100px" },
                { field: "column13", headerTemplate: '<span class="font-bold" title="' + column13 + '">' + column13 + '</span>', template: "#=dirtyField(data,'column13')# #:(column13 != null ? column13 : ' ')#", width: "150px" },
                { field: "column14", headerTemplate: '<span class="font-bold" title="' + column14 + '">' + column14 + '</span>', template: "#=dirtyField(data,'column14')# #:(column14 != null ? column14 : ' ')#", width: "150px" },
                { field: "column15", headerTemplate: '<span class="font-bold" title="' + column15 + '">' + column15 + '</span>', template: "#=dirtyField(data,'column15')# #:(column15 != null ? column15 : ' ')#", width: "100px" },
                { field: "column16", headerTemplate: '<span class="font-bold" title="' + column16 + '">' + column16 + '</span>', template: "#=dirtyField(data,'column16')# #:(column16 != null ? column16 : ' ')#", width: "100px" },
                { field: "column17", headerTemplate: '<span class="font-bold" title="' + column17 + '">' + column17 + '</span>', hidden: true, width: "100px" },
                { field: "column18", headerTemplate: '<span class="font-bold" title="' + column18 + '">' + column18 + '</span>', hidden: true, width: "200px" },
                { field: "column19", headerTemplate: '<span class="font-bold" title="' + column19 + '">' + column19 + '</span>', template: "#= Iscolumn19 ? 'yes' : 'no' #", width: "50px" },
                { field: "column20", headerTemplate: '<span class="font-bold" title="' + column20 + '">' + column20 + '</span>', width: "100px" },
                { field: "column21", headerTemplate: '<span class="font-bold" title="' + column21 + '">' + column21 + '</span>', width: "100px" },
                { field: "column22", headerTemplate: '<span class="font-bold" title="' + column22 + '">' + column22 + '</span>', template: "#= Iscolumn22 ? 'yes' : 'no' #", hidden: true, width: "50px" },
                { field: "column23", headerTemplate: '<span class="font-bold" title="' + column23 + '">' + column23 + '</span>', hidden: true },
                { field: "column24", headerTemplate: '<span class="font-bold" title="' + column24 + '">' + column24 + '</span>', hidden: true }

            ],
        change: onCheckBoxSelect,
        saveChanges: gridSaveChanges,
    }).on("change", ".k-invalid", function (e) {
        var grid = $("#grid").data("kendoGrid");
        if (grid.editable) {
            grid.editable.validatable.validateInput(this);
        }
    });

[sam]

The following is my data source definition

var claimLinedDataSource = new kendo.data.DataSource({
            batch: true,
            transport: {
                read: {
                    url: apiBaseUrl + getLines + Id,
                    headers: getApiHeaders(),
                },
                update: {
                    url: apiBaseUrl + saveChangesOnEdit,
                    headers: getApiHeaders(),
                    method: 'POST',
                    dataType: 'json',
                    data: claimLines,
                    complete: onCompletionOfEditSave
                },
                parameterMap: function (data, type) {
                    if (type == "update") {
                        let claimLinesData = [];
                        for (let i = 0; i < claimLines.length; i++) {
                            claimLinesData.push(data[i]);
                        }
                        return { '': JSON.stringify(claimLinesData) };
                    }
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        column1: { type: "string", editable: false, validation: { required: false } },
                        column2: { editable: false, nullable: false },
                        column3: { type: "string", editable: false, validation: { required: false } },
                        column4: { type: "string", editable: false, validation: { required: false } },
                        column5: { type: "string", validation: { required: true } },
                        column6: { type: "string", validation: { required: { message: column1 } } },
                        column7: { type: "date", validation: { required: true } },
                        column8: { type: "string", validation: { required: true } },
                        column9: { type: "string", validation: { required: true } },
                        column10: { type: "string", validation: { required: { message: column10 } } },
                        column11: { type: "string", validation: { required: true } },
                        column12: { type: "string", validation: { required: false } },
                        column13: { type: "date", validation: { required: false } },
                        column14: { type: "string", validation: { required: false } },
                        column15: { type: "string", validation: { required: false } },
                        column16: { type: "string", validation: { required: true } },
                        column17: { type: "string", validation: { required: { message: column17 } } },
                        column18: { type: "string", validation: { required: true } },
                        column19: { type: "string", validation: { required: { message: column19 } } },
                        column20: { type: "string", validation: { required: true } },
                        column21: { type: "number", validation: { min: 1, required: true } },
                        column22: { type: "string", validation: { required: false } },
                        column23: { type: "string", validation: { required: false } },
                        column24: { type: "boolean", editable: false },
                        column25: { type: "string", editable: false },
                        column26: { type: "string", validation: { required: false } },
                        column27: { type: "string", validation: { required: false } },
                        column28: { type: "string", validation: { required: false } },
                        column29: { type: "string", validation: { required: false } },
                        column30: { type: "string", validation: { required: false } },
                        column31: { type: "string", validation: { required: false } },
                        column32: { type: "string" },
                        column33: { type: "string" },
                        column34: { type: "string" },
                        column35: { type: "string" },
                        column36: { type: "string" },
                        column37: { type: "boolean" },
                        column38: { type: "boolean", editable: false },
                        column39: { type: "string", editable: false },
                        column40: { type: "string", editable: false }
                    }
                }
            },
            change: onDataSourceChange,
            error: onErrorOfDataSourceOperation,
            pageSize: defaultPageSize,
        });

 

[Dimitar]

Hi Sam,

The snippets seem correct. The following Dojo snippet is based on Virtualization of remote data demo and the Grid settings from the provided code snippets. On initial load, on filtering and on scrolling down (activating virtual scroll) the default progress indicator as well as the one defined in Grid's databound event are shown. I would suggest you to try simplifying the Grid configuration to match the one from the Dojo and see if the indicator is still not present on your side.

Regards,
Dimitar
Progress Telerik