KendoGrid Fetch not updating the KendoGrid data

2 posts, 0 answers
  1. Rich
    Rich avatar
    10 posts
    Member since:
    Jun 2011

    Posted 19 May 2015 Link to this post

    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 


    $ = {
                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 {


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

    function updateKendoDataSource() {

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

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

    // 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:

        <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 id="employeeGrid" kendo-grid class="col-sm-12"
                 k-options="kendo.gridOptions" class="grid">


  2. Kiril Nikolov
    Kiril Nikolov avatar
    2543 posts

    Posted 21 May 2015 Link to this post

    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?

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top