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

KendoGrid Fetch not updating the KendoGrid data

1 Answer 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 19 May 2015, 07:19 PM

We are unable to display the fetched data on the KendoGrid.  We are able to retreive the data from the service call and then call the datasource fetch() method to repopulate the grid, but the the grid is not displaying any data.

 Please refer to the code snippet below:

------------------------------------------------------------------------------------ 

// AngularJS Controller 

...

$scope.search = {
            timeout: null,
            delay: 500, //500ms
            query: '',        
        };

....

 $scope.applyFilter = function() {
            if (userType == "keheemployee") {
                //$scope.applyServerFilter();    //NOTE!!  This line of code works with ng-repeater

                //call the updateKendoDataSource function here...  
                updateKendoDataSource();  //NOTE!!  This line of code is for the actual Grid 

            } else {
                applyClientFilter();
            }
        };

 

// Note: Function which gets called when Filter button is clicked. 

function updateKendoDataSource() {

            var employeeGrid = $("#employeeGrid"); // employeeGrid id the Grid's id
            var employeeGridData  = employeeGrid.data("kendoGrid");

            if ($scope.search.timeout) {
                $timeout.cancel($scope.search.timeout);
            }
            $scope.search.timeout = $timeout(function () {               
                if ($('#searchText').val()) {
                    employeeGridData.dataSource.transport.read = {
                        url: landingPageAPIService.getSearchResultsData($('#searchText').val(), $scope.includeInactive),
                        type: "GET",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        cache: false                        
                    };
                    employeeGridData.dataSource.fetch();
                }
            }, $scope.search.delay);
        }

// AngularJS Service

var kVendorManagementServices = angular.module('kServices.apis.vendorManagement', ['kServices.connectApi']);

    kVendorManagementServices.service('landingPageAPIService', ['Services', 'vendorManagementEnvironment', landingPageAPIService]);

    return kVendorManagementServices;

    function landingPageAPIService(Services, vendorManagementEnvironment) {

        return {
            
            // All the API calls go here...                       
          getSearchResultsData: function (searchText, includeInactive) {              
              return Services.request("GET", vendorManagementEnvironment.apiVendorManagementServices('/api/LandingPage/Search/' + includeInactive + '/' + searchText));  //apiVendorManagementServices is created for us

        }, //end  getSearchResultsData function
                       
        };        
    }

 

View Template:

<div>
    <input id="searchText" ng-model="searchText" />
    <input id="includeInactive" type="checkbox" ng-model="includeInactive" /> &nbsp;
    <label>Include Inactive</label>
    <!-- Clear Filter button -->&nbsp;
    <input type="button" id="filterData" value="Filter" ng-click="applyFilter()" />
    <input type="button" id="clear" value="Clear Filters" ng-click="clearFilters()" />
</div>

<div id="employeeGrid" kendo-grid class="col-sm-12"
             k-data-source="landingPageData.Vendors"
             k-options="kendo.gridOptions" class="grid">
</div>

 

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 21 May 2015, 10:56 AM

Hello Rich,

Do you see a request being made in the network tab of your browser's developer tools? Do you see any errors in the console? Is it possible to provide a runnable sample that we can use to reproduce the issue?

Regards,
Kiril Nikolov
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
Brian
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or