Loading symbol issue inside grid.

[Raed]

Hi,

I need to display loading symbol inside grid using external fields search.

On load I need to hide the grid and once user provides search fields I want to load the grid and show loading symbol till server responds all the data.

I have tried following code.

HTML

   <div kendo-grid="subscribersGrid"
                                            k-pageable="true"                                            
                                            k-selectable="false"                    
                                            k-options="subscribersGridOptions"
                                            k-data-source="subscribersGridDataSource"
                                             k-columns="subscribersGridColumns"
                                             k-reorderable = "true"
                                             >
                                       </div>  

 

Script -->

 

 $scope.showGrid = true;
           
            var searchUrl = $rootScope.connectionProps.domain + $rootScope.connectionProps.filter;
           
            $scope.subscribersGridDataSource = new kendo.data.DataSource({
                type: "POST",
                transport: {
                    read: {
                      
                        type: "POST",
                        url: searchUrl,
                        dataType: "json",
                        contentType: "application/json",


                        data: subSearchFilterReq,
                        beforeSend: function(req) {
                            // alert('Show loading symbol');
                            req.setRequestHeader('X-AUTH-TOKEN', $cookieStore.get('authToken'));
                        },
                        afterSend: function(xhr) {

                            console.log('afterSEnd' + xhr.getRequestHeader('X-AUTH-TOKEN'));
                        },

                        complete: function(jqXHR, textStatus) {
                            if (jqXHR.status == 403) {
                                window.location.href = '#app/login';
                            }
                   
                            $scope.hideInfoLoader($rootScope.applicationResource.searchComplete);

                            console.log('hide message11');
                            
                        }
                    },
                    parameterMap: function(data, type) {
                        if (type == "read" && data) {
                            return JSON.stringify(data);
                        }
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 5,
                },
                batch: false,
                serverPaging: true,
                pageable: true,

                pageSize: 10,
                schema: {
                    data: 'data',
                    total: 'total'
                },
                error: function(e) {
                   
                    if (e.xhr.status == 403) {
                                window.location.href = '#app/login';
                    }
                    console.log('error')  ;
                    $scope.errorMsgs = angular.fromJson(e.xhr.responseText);
                    $scope.subscribersGridDataSource = [];
                    $timeout( function(){ $scope.showErrorMessage($scope.applicationResource.responseFailed); }, 1000);
                }
            });

 Inside  complete: I am trying to hide the loading symbol. but its not working.

Please suggest.​

[Alexander Valchev]

Hello Raed,

Please use the requestStart and requestEnd events of the DataSource to show and hide the animation.

Regards,
Alexander Valchev
Telerik