The control library from Infragistics, IgniteUI™, is tailored for general Javascript usage under JQuery. To use it within an AngularJS web app, they have made a directive wrapper called “Ignite UI directives for AngularJS” available on GitHub.

At the time of this writing I’m using IgniteUI version 15.1.20151.1005 and V1.0.0 of ignite-angularjs.js.

Directive without ID

The following code snippet uses the IgniteUI angular directives as indicated on its instructions. It declares the directive for an igGrid and configures it all using custom HTML elements. At the bottom of this article there is the full code for the final version.

<div ng-controller="ctrl1">
  <ig-grid data-source="dataJS" auto-generate-columns="true" event-data-binding="gridCreated">
    <features>
      <feature name="Selection" mode="row"></feature>
    </features>
  </ig-grid>
</div>
<script>
angular.module('app', ['igniteui-directives']).controller('ctrl1', ['$scope', ctrl]);
function ctrl($scope)
{
 $scope.dataJS = [
   {"title":"This is the title 1", "subtitle":"This is the subtitle 1", "id":1},
   {"title":"This is the title 2", "subtitle":"This is the subtitle 2", "id":2},
   {"title":"This is the title 3", "subtitle":"This is the subtitle 3", "id":3}];
 
 $scope.gridCreated

[…]


Read the full article.