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

Loading symbol issue inside grid.

1 Answer 25 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raed
Top achievements
Rank 1
Raed asked on 29 Jun 2015, 10:11 AM

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.‚Äč

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 01 Jul 2015, 09:59 AM
Hello Raed,

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

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Raed
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or