mirik123 / ui-grid-odata

odata plugin for angular ui-grid

ui-grid-odata

This plugin allows querying for odata v3/v4 services.
I first implemented this idea in free-jqgrid project: grid.odata.js, wiki.
You can compare it with the angular implementation to see the differences between jqGrid and Angular development.

The odata plugin requires no external 3rd party packages like breeze.js or datajs.js.
Its only dependency is the ui-grid-expandable plugin.

The angular ui-grid-odata feature does the following:

• Queries odata source by the $http provider.
• Parses $metadata response to the plain JavaScript object.
• Builds ui-grid column definitions based on odata metadata.
• When NavigationProperties exist - configures ui-grid-expandable feature and builds multilevel subgrids.
• TODO: implement verbs $count, $skip, $top, $orderby, $filter for paging, sorting and filtering; together with ui-grid-pagination.

Other feature dependencies

Dependency name	Added functionality
ui-grid-expandable	Enables automatic multilevel subgrid expansions
ui-grid-pagination	Enables server-side paging, sorting and filtering using odata verbs

Public API

expandRow (row, col, rowRenderIndex, $event)
{row} - grid row object
{col} - grid col object (if missing, the first column references NavigationProperty or ComplexType is used)
{rowRenderIndex} - grid row $index
{$event} - grid $event
Used inside row template. Builds column definitions and data for subgrid (requires ui-grid-expandable directive).

    <div class="ui-grid-cell-contents"><a style="cursor:pointer" class="SubgridTemplate" ng-click="grid.options.odata.expandRow(row, col, rowRenderIndex, $event)">{{col.displayName}}</a></div>

genColumnDefs (grid, hasExpandable, callback)
{grid} - reference to the main grid
{hasExpandable} -parameter is true when ui-grid-expandable directive is applied on the main grid.
{callback} - callback function to be called instead of the default success event.
Queries odata $metadata and builds grid.columnDefs, initializes ui-grid-expandable feature.

parseMetadata (data, expandable)
{data} - odata $metadata in xml format
{expandable} - the expantion type of the odata feature: subgrid,link,json
Parses odata $metadata in xml format to the plain javascript object.

 $http.get('http://services.odata.org/V4/OData/OData.svc/$metadata', {dataType: 'xml'}).then(function (response) {
      var colModels = $this.parseMetadata(response.data, 'subgrid');
 });

Events

success(grid)

grid.api.odata.raise.success(grid);

error(data, message)

grid.api.odata.raise.error(response, 'failed to query $metadata'); 

Script example:

     var app = angular.module('app', ['ui.grid', 'ui.grid.expandable', 'ui.grid.odata']);
     app.controller('MainCtrl', ['$scope', 'gridUtil', function ($scope, gridUtil) {
        $scope.myGrid = {
            enableFiltering: true,
            showGridFooter: true,
            showColumnFooter: true,
            odata: {
                metadatatype: 'xml',
                datatype: 'json',
                expandable: 'subgrid',  //can be also 'link' or 'json'
                entitySet: 'Products',
                dataurl: "http://services.odata.org/V4/OData/OData.svc/Products",
                metadataurl: 'http://services.odata.org/V4/OData/OData.svc/$metadata',
                gencolumns: true
            },
            columnDefs: [
                { field: 'Description', width: 300 },
                { field: 'ID', width: 50 },
                { field: 'Name', width: 200 }
            ]
        };

        $scope.myGrid.onRegisterApi = function (gridApi) {
            gridApi.expandable.on.rowExpandedStateChanged($scope, function(row) {
                gridUtil.logDebug('expanded: ' + row.entity.Description);
            });

            gridApi.odata.on.success($scope, function(grid) {
                gridUtil.logDebug('succeeded');
            });

            gridApi.odata.on.error($scope, function(data, message) {
                gridUtil.logError(message);
            });
        };
     }]);

<div ng-controller="MainCtrl">
     <div id="grid1" ui-grid="myGrid" ui-grid-odata ui-grid-expandable></div>
</div>

View demo in codepen http://codepen.io/mirik123/pen/ZbboKV