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" />
<label>Include Inactive</label>
<!-- Clear Filter button -->
<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
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