Telerik Forums / Kendo UI Integration
This is a migrated thread and some comments may be shown as answers.

Updating Kendo UI grid datasource with locally stored data pulled from outside of grid datasSource.

3 Answers 511 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Boris
Top achievements
Rank 1
Boris asked on 08 Aug 2017, 06:41 PM

I have a scenario where the data for the grid, as well as other parts of the ui , needs to be pulled with a separate $scope function and stored in a $scope variable.

In order to replicate this, I used a function from your demos.

I was not able to make this work.

What am I doing wrong?

http://dojo.telerik.com/ehEXEn

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
    <script src="../content/shared/js/people.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <div kendo-grid="mainGrid" options="mainGridOptions" k-data-source='mainGridDataSource'>
        </div>
 
 
    </div>
</div>
 
<style>
  .contact-info-form {
    list-style-type: none;
    margin: 30px 0;
    padding: 0;
  }
 
  .contact-info-form li {
    margin: 10px 0;
  }
 
  .contact-info-form label {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-weight: bold;
  }
</style>
 
<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
       
       
                $scope.mainGridDataSource =  new kendo.data.DataSource({data:[], pageSize: 100});
            $scope.mainGridOptions = {
                sortable: true,
                height: 543,
                //pageSize:100,
                //dataSource: {pageSize: 100, data:[]},
                scrollable: {
                            virtual: true
                        },
                pageable: {
                  numeric: false,
                  previousNext: false,
                  messages: {
                    display: "Showing {2} data items"
                  }
                },
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: "120px"
                    },{
                    field: "LastName",
                    title: "Last Name",
                    width: "120px"
                    },{
                    field: "City",
                    width: "120px"
                    },{
                    field: "Title"
                }]
            };
       
        generatePeople(500000, function(results) {
            //console.log(results);
            $scope.mainGridDataSource =  new kendo.data.DataSource({data: results, pageSize: 100});
            console.log($scope.mainGridDataSource);
          $scope.mainGridDataSource.read();
          $scope.mainGrid.refresh();
          $scope.mainGrid.dataSource.read();
          $scope.mainGrid.refresh();
        });
 
             
        })
</script>
 
 
</body>
</html>

3 Answers, 1 is accepted

Sort by
0
Boris
Top achievements
Rank 1
answered on 08 Aug 2017, 07:57 PM

the link I posted isn't working, so her it is.

http://dojo.telerik.com/ehEXEn

0
Accepted
Tsvetina
Telerik team
answered on 10 Aug 2017, 10:18 AM
Hello Boris,

Looking at your initial code snippet, you only need to replace the logic that creates a new DataSource with a call that sets new data to the existing DataSource:
$scope.mainGridDataSource =  new kendo.data.DataSource({data:[], pageSize: 100});
generatePeople(500, function(results) {
    //console.log(results);
    $scope.mainGridDataSource.data(results);
});

Otherwise, you are creating a new DataSource without updating the AngularJS bindings and the change is not reflected. 
You can see a Dojo here: http://dojo.telerik.com/@tsveti/eBARac

As for the second Dojo you sent me, the Grid expects to be passed a DataSource when k-data-source directive is used and it cannot successfully bind to the ObservableArray. The other option to updating the data() array of the DataSource is to declare a read function that runs a data read logic each time $scope.mainGrid.dataSource.read(); is called:
$scope.mainGridDataSource =  new kendo.data.DataSource({
  transport: {
    read: function(options){
      var people = generatePeople(500, function(results) {
        options.success(results);
 
      });
    }
  },
  pageSize: 5
});

A Dojo using this approach is available here: http://dojo.telerik.com/@tsveti/acOmo/2
This is the way to go if you are planning on implementing CRUD operations. You can read more about using custom functions for CRUD operations in the DataSource here:
Local or Custom Transport CRUD Operations


Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Boris
Top achievements
Rank 1
answered on 10 Aug 2017, 06:51 PM
Thank you!
Tags
Integration with other JS libraries
Asked by
Boris
Top achievements
Rank 1
Answers by
Boris
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or