This is a migrated thread and some comments may be shown as answers.

Show spinning icon while grid is filtering

4 Answers 1135 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
sam
Top achievements
Rank 1
Veteran
sam asked on 21 Oct 2020, 09:33 PM

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);

            addSubgrid();

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

4 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 23 Oct 2020, 09:32 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
sam
Top achievements
Rank 1
Veteran
answered on 25 Oct 2020, 04:17 AM

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);
        }
    });
0
sam
Top achievements
Rank 1
Veteran
answered on 25 Oct 2020, 04:23 AM

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,
        });

 

0
Dimitar
Telerik team
answered on 26 Oct 2020, 12:59 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
sam
Top achievements
Rank 1
Veteran
Answers by
Dimitar
Telerik team
sam
Top achievements
Rank 1
Veteran
Share this question
or