Question

17

Give kendo datasource an angular scope variable

rated 0 times [ 23] [ 6] / answers: 1 / hits: 18416 / 11 Years ago, thu, october 10, 2013, 12:00:00

I'm currently trying to fill a kendo grid with remote data.
Kendo has its own function to fetch the data, but I want to use the angular factory which I created.

So I have a factory, which has a function getSkills. This function obtains all the skill objects from my api.

angular.module('MyApp').factory('Factory', function ($resource) {

    return $resource('/api/v1/skills/', {  },

        {

            getSkills: { method: 'GET', isArray: true }

        });

});

In my SkillController in angular, I put these fetched skills in a scope variable.

$scope.skills = SkillFactory.getSkills();

I initialize the Kendo grid here:

$scope.gridOptions = {

                dataSource: {

                    data: $scope.skills,

                    schema: {

                        model: {

                            fields: {

                                ID: { type: number },

                                Name: { type: string },

                                CreatedBy: { type: number },

                                CreatedDate: { type: string },

                                EditedBy: { type: number },

                                EditedDate: { type: string },

                                InUse: { type: boolean }

                            }

                        }

                    },

                    pageSize: 20

                },

                scrollable: true,

                sortable: true,

                filterable: true,

                pageable: {

                    input: true,

                    numeric: false

                },

                selectable: true,

                columns: [

                    { field: Name, title: skillname, width: 130px }

                ]

            };

Most of the times, the ajax callback is slower than the initialization of the kendo grid. Then it will show an empty table, because the data of the table isn't bound to the angular $scope.skills variable.

I have searched everywhere, but I can't figure out how I can use a custom function for the data attribute in the initialization, or how to bind the scope variable to the table.

Any help would be appreciated!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

robinh

Add To Favorites

Follow

Total Points: 371

Total Questions: 105

Total Answers: 89

Location: Cyprus

Member since Mon, Oct 24, 2022

2 Years ago

robinh questions

1 How to disable the Material UI Link API component

Thu, May 6, 21, 00:00, 3 Years ago

1 React functional components vs class components

Thu, Jan 7, 21, 00:00, 3 Years ago

1 JS Error: Element is not attached to a Document

Fri, Nov 6, 20, 00:00, 4 Years ago

1 Add custom add-button in material-table

Sun, Aug 9, 20, 00:00, 4 Years ago

1 Swiper.js pagination custom bullet won't click to move to next slide

Tue, Jul 28, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jocelyntrishar · Accepted Answer

I found a little simpler solution:
In my case $scope.regs defines the data which is updated from server REST service using Angular
$resource exposed with AppService. This service is defined as:

    var registrationServices = angular.module('registrationServices', ['ngResource']);



    registrationServices.factory('AppService', ['$resource',

        function($resource) {

            return $resource('rest/registrations');

    }]);

I set k-auto-bind = false to grid definition in HTML:

<div id=form-item>

 <label for=appId class=info>AppId:</label>

 <input id=appId ng-model=searchAppId> 

 <button id=search class=k-button ng-click=doSearch() >Search</button>

</div>  



<div kendo-grid  k-data-source=registrations k-selectable='row'

  k-pageable='{ refresh: true, pageSizes: true }'

  k-columns=registrationsColumns

  k-sortable=true k-groupable=true k-filterable=true

  k-on-change=selectedItem = data

  k-auto-bind=false >

</div>

Instead of binding Kendo grid datasource using data property, I used transport with read defined as function, something like that:

  $scope.regs;



 $scope.registrations = new kendo.data.DataSource({

    transport: {

        read: function(options) {

            options.success($scope.regs);

        }

    },

    schema: {

        model: {

            fields: {

                registrationId: {type: number},

                clientFullName: {type: string},

                registrationDate2: {type: number},

                registrationDate: {type: date}

            }

        }

    },

    pageSize: 5,

    serverPaging: true,

    serverFiltering: true,

    serverSorting: true

});





$scope.registrationsColumns = [{field: registrationId, title: Id},

    {field: clientFullName, title: Name},

    {field: registrationDate,

        title: Registration Date,

        format: {0:dd/MM/yyyy},

        filterable: {ui: dateFilter, extra: false}

    }

];

    ....

Then, when I want to refresh data in the grid, I use callback using Angular $resource. :

$scope.doSearch = function() {

    $scope.regs = AppService.query({regId: $scope.searchAppId}, function(result) {

        $scope.registrations.read();

    });

};

It works.
Additional advantage of this solution is, you don't have to move grid creation to Java Script code, it can stay in HTML.