Custom FlexGrid Directive

by c1alexi

HTML

<script src="http://cdn.wijmo.com/5.20151.42/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.42/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20151.42/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.42/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.42/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
    <p>Custom <b>FlexGrid</b> composite directive with the embedded group by menu and arbitrary columns
    </p>
    <p><b>custom-flex-grid</b> - hardcoded group-by menu</p>
    <custom-flex-grid items-source="data" style="height:200px">
        <wj-flex-grid-column binding="country" header="Country">
        </wj-flex-grid-column>
        <wj-flex-grid-column binding="date" header="Date">
        </wj-flex-grid-column>
        <wj-flex-grid-column binding="downloads" header="Downloads" format="n0">
        </wj-flex-grid-column>
    </custom-flex-grid>
    
    <p><b>flex-grid-with-groups</b> - group-by menu items defined via the <b>groups</b> attribute</p>
    <flex-grid-with-groups items-source="data" style="height:200px" 
        groups="[{properties: '', displayName: '(no grouping)'},
                 {properties: 'country', displayName: 'Country'},
                 {properties: 'date', displayName: 'Date'},
                 {properties: 'country/date', displayName: 'Country and Date'}]">
        <wj-flex-grid-column binding="country" header="Country"></wj-flex-grid-column>
        <wj-flex-grid-column binding="date" header="Date"></wj-flex-grid-column>
        <wj-flex-grid-column binding="downloads" header="Downloads" format="n0"></wj-flex-grid-column>
    </flex-grid-with-groups>

    <p><b>flex-grid-group-all-columns</b> - group-by menu is based on the actual grid columns set</p>
    <flex-grid-group-all-columns items-source="data" style="height:200px">
        <wj-flex-grid-column...

JavaScript

// define app, include Wijmo 5 directives
  var app = angular.module('app', ['wj']);

// customFlexGrid directive - group by menu is hardcoded
app.directive('customFlexGrid', function ($compile) {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            itemsSource: '=?',
            control: '=?',
        },
        replace: true,
        template: '<div style="padding-bottom:50px">' +
            // FlexGrid properties can be set right on the directive element,
            // or in the 'initialized' event handler (flexInitialized).
            '<wj-flex-grid items-source="itemsSource" control="control" ' +
                'is-read-only="true" headers-visibility="Column" ' +
                'initialized="flexInitialized(s, e)" style="height:100%;box-sizing:border-box">' +
                    // column directives defined in page markup go here
                    '<div ng-transclude display="none"></div>' +
            '</wj-flex-grid>' +
            '<wj-menu value="groupBy" header="Group by">' +
                '<wj-menu-item value="\'\'">(no grouping)</wj-menu-item>' +
                '<wj-menu-item value="\'country\'">Country</wj-menu-item>' +
                '<wj-menu-item value="\'date\'">Date</wj-menu-item>' +
                '<wj-menu-item value="\'country/date\'">Country and Date</wj-menu-item>' +
            '</wj-menu></div>',
        link: function (scope, element, attrs, ctrl, transcludeFn) {
            scope.flexInitialized = function (s, e) {
                s.selectionMode = wijmo.grid.SelectionMode.RowRange;
            }

            scope.$watch('groupBy', function () {
                if (!scope.control) {
                    return;
                }
                var cv = scope.control.collectionView;
                cv.beginUpdate();
                try{
                    cv.groupDescriptions.clear();
                    var groupNames = scope.groupBy.split('/');
                    for (var i = 0; i <...