Category Archives: Programming

Expandable recursive tree table with AngularJS and Bootstrap

Below is the code for AngularJs directive which will render a table structure containing tree in its first column and data in further columns. By clicking on tree node one can expand/collapse subsequent rows. Please take a look at sample data provided to understand the data model used in this directive. angularTreeTable.directive.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
'use strict';
(function () {
    let app = angular.module('TestApp');
    app.directive('angularTreeTable', function () {
        return {
            restrict: 'EA',
            transclude: true,
            scope: {
                tableData: '=',
                tableConfig: '='
            },
            bindToController: true,
            templateUrl: 'angularTreeTable.directive.html',
            controller: function ($scope, StatusMessage, $sce) {
                let ctrl = this;
            },
            controllerAs: "ctrl"
        };
    });
})();

angularTreeTable.directive.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="treeTable">
    <table class="table-nested table table-bordered">
        <thead>
        <tr>
            <th ng-repeat="(thKey, thVal) in ctrl.tableConfig.colInfo" ng-class="{'cell-members': thKey!=0}">
                {{thVal.heading}}
            </th>
        </tr>
        </thead>
        <tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'"
               ng-repeat="item in ctrl.tableData"></tbody>
    </table>
    <script id="table_tree.html" type="text/ng-template">
        <tr ng-class="{'parent-node': item.childrens, 'leaf-node': !item.childrens}"
            ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
            <td ng-class="{'cell-name':tdKey === 0, 'cell-members': tdKey !== 0}"
                ng-repeat="(tdKey, tdVal) in ctrl.tableConfig.colInfo"
                ng-click="tdKey === 0 && (item.opened = !item.opened)">
                <div ng-if="tdKey === 0" class="indent" style="padding-left: {{15*level}}px;"></div>
                <div ng-if="tdVal.showIcon" ng-bind-html="ctrl.getIconDomByType(item[tdVal.iconDataKey])" style="display: inline"></div>
                {{item[tdVal.dataKey]}}
            </td>
        </tr>
        <tr class="children" ng-if="item.childrens && item.childrens.length > 0">
            <td colspan="{{ctrl.tableConfig.colSpan}}" style="padding: 0px !important;">
                <table class="table">
                    <tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'"
                           ng-init="level = level + 1" ng-repeat="item in item.childrens"></tbody>
                </table>
            </td>
        </tr>
    </script>
</div>

[…]

Using HTML5 Web Workers with AngularJs

Web workers introduced in Html5 provide a background mechanism to perform multi-threaded tasks. They add the ability to perform computationally heavy tasks like downloading or mathematical computation without hanging the user interface. Although AngularJS and web workers are both intended for asynchronous execution, both serve different purposes and should be used in conjunction. Angular JS […]

How to show Loader for $http calls in AngularJs ?

Hello Readers !!  In this post we are going to see how we can add a loader for $http calls in our angular applications. This loader will be shown whenever our angular application will send some call to server. I am assuming that you are aware of basics of AngularJs, if not then please go through […]

Security Features in AngularJs

  One of the major concerns with any new technologies is security. They might introduce security holes into an organization’s IT infrastructure. But if you are using AngualarJs then this concern isn’t very severe. Securing an AngularJS application is as simple as enforcing the good security practices for any web-application. In this post I am […]

AngularJS router to use different template for Mobile and Desktop

In your AngularJS application, if you want to use different templates/views for mobile and desktop users then following script may be useful for you. What we have done here is, just wrote a function named as “_isNotMobile”. This function will return true/false by checking user agent of device. And also we have used that function […]

CRUD Operations on JSON object using AngularJs

AngularJS is a powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. In this post we are going to see the code […]

How to check if jQuery is already loaded in Magento

If you are building some custom extension for Magento and your extension includes jQuery, but you don’t want to load it if its already loaded by some other Magento extension or theme, then you can do so using your layout XML file as shown below. Here we are checking for the global window.jQuery variable. If […]