KendoUI Chart using in AngularJS with Dynamic data

Here i'm going to do the KendoUI Chart using AngularJS  and getting dynamic data from angular services.

First need to down-lode the required js files for KendoUI and AngularJS like below image,

And Injected Kendo directive to the AngularJS module

In html page

Above image i added the options is "optTest" - its setting the KendoUI chart in control,
And the data source name is  "dsTest" - its assign data dynamically from services.

In Ctrl Side

In above image

$scope.tempDSTest[] = before assign the dynamic data we assign the empty dataset , because of some time not populated the chart while dynamic dataset assign.
    $scope.optTest = Its implement the some setting for the kenodui chart , here using i'm using area chart settings.
    $scope.dsTest = its the empty dataset or datasource name.

After that i called the testServices.getTestdata() method, In this method i used the web api url for getting data from server

Based on response i assigned to the data source like $scope.dsTest.data(response.data)

I called setup function at end of the control.

Screen

i hope this helpful , have any new idea or need to change something else  please let me know.

Thanks in Advance :) ;)

Handled ngGridEventScroll for particular ng-grid among more than ng-grid

I am using the multiple ng-grids in same page like below,

$scope.gridOptionsOne = {

//---------

}

$scope.gridOptionsTwo = {

//-----------

}

but i need to trigger ngGridEventScroll for gridOptionsTwo.

So handled the below condition, it will be working fine

$scope.$on('ngGridEventScroll', function(event) {
   if(event.targetScope == $scope.gridOptionsTwo .$gridScope) {
      //----------------
   }
});

UI Bootstrap modal error: [$compile:tpload] failed to load template

When getting the following error ,using UI Bootstrap modal dialog in AngularJS project.

Error like

If you got error like above add this below library

"<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>"

Auto save data to the server after a cell value changed - AngularJS and ng-grid

Hi friends,

how get the data or auto save data to the server after a cell value changed in angular js

I have to create a controller as "DonarController" and with in create a ng-grid "GridOptions"

<div data-ng-controller="DonarController">
    <form name="bb-donar-form">
        <div class="col-sm-12">
                <div class="gridStyle" data-ng-grid="GridOptions">
                </div>
            </div>
    </form>
</div>

Then have to create functionality for particular grid

(function () {
    angular.module('BloodBank.Controller')
    .controller('DonarController', ['$scope', function ($scope) {
 //past below code here
    } ]);
})()

below code have to past the above.
This functionality is declare the celledit template as a input box with updateEntity(col,row) function

 var cellEditableTemplate = "<input type=\"number\" style=\"width:56px; text-align: right;\" ng-class=\"'colt' + col.index\" ng-input=\"COL_FIELD\" ng-blur=\"updateEntity(col,row)\" ng-model='row.entity.phno'/>";
        
        $scope.GridOptions = {
            data: 'datas',
            enableCellSelection: true,
            enableRowSelection: false,
            columnDefs: [
                { field: 'username', displayName: 'User Name' },
                { field: 'fullname', displayName: 'Full Name' },
                { field: 'bloodtype', displayName: 'Blood Type' },
                { field: 'gender', displayName: 'Gender' },
                { field: 'location', displayName: 'Location'},
                { field: 'phno', displayName: 'Phone No',                                          enableCellEdit: true,                                                            editableCellTemplate: cellEditableTemplate }
            ]
        };

and also add below function,

$scope.updateEntity = function (column, row) {
            console.log(row.entity);
            console.log(column.field);
            }

below screen i get changed cell value from ng-grid

Error : Request header field Content-Type is not allowed by Access-Control-Allow-Headers

I got below error when accessing the web api from angular js

So, i have to add the following line in web config(web api)

hope this helpful..