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

4 posts, 1 answers
  1. Boris
    Boris avatar
    17 posts
    Member since:
    Feb 2015

    Posted 08 Aug Link to this post

    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>
  2. Boris
    Boris avatar
    17 posts
    Member since:
    Feb 2015

    Posted 08 Aug in reply to Boris Link to this post

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

    http://dojo.telerik.com/ehEXEn

  3. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2102 posts

    Posted 10 Aug Link to this post

    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.
  4. Boris
    Boris avatar
    17 posts
    Member since:
    Feb 2015

    Posted 10 Aug in reply to Tsvetina Link to this post

    Thank you!
Back to Top