How to refresh AngularJs Kendo Grid?

Question

I am trying to refresh angular js kendo grid and no solution is working for me. I tried most of the solutions suggested in the forums.

Here is my HTML code

<tab heading="Transactions (Exception)" data-ng-controller="ExceptionSearchResultsController as exceptionSearchResults" data-ng-show="exceptionSearchResults.hasResults">
    <div class="panel panel-default">
    <div id="exceptionSearchResultsGrid" data-kendo-grid ="exceptionSearchResults" data-k-options="exceptionSearchResults.gridOptions" data-show-no-results data-show-active-filters data-k-rebind="exceptionSearchResults.gridOptions"></div>
    </div>
</tab>

Here is my controller code

function initDataWatch() {
            $scope.$watch(function () {
                return exceptionDataService.reportData();
            }, function (newValue) {
                viewModel.dataRecords = newValue.records || [];

                viewModel.gridOptions = {
                    dataSource: new kendo.data.DataSource({
                        data: viewModel.dataRecords,
                        pageSize: 15,
                        sort: { field: "dateCreated", dir: "asc" }
                    }),
                    pageable: {
                        pageSizes: [15, 50, 100],
                        pageSize: 15,
                        input: true
                    },
                    height: 575,
                    columns: viewModel.columns,
                    columnMenu: true,
                    reorderable: true,
                    filterable: true,
                    resizable: true,
                    sortable: true,
                    groupable: true,
                    navigatable: true
                };
            }, true);
        }

viewModel.dataRecords is coming from the service call and I can see data on the log.

Answer 1

Looks like you'll need to access the datasource of your grid and set a new datasource after the data has changed.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setDataSource

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-fetch

Answer 2

Try this to reload your grid.

$("#kgrid").data("kendoGrid").dataSource.read();

DEMO