CODEWITHSUNDEEP
javascriptangularjsserver-sideangular-datatables
Kenny Lucero
Kenny Lucero

Reputation: 134

Events for Computed Columns for AngularJS Datatables using Server-Side Processing

I am trying to hook up a paged datatable. It will show all of the available options, and I want there to be a checkbox on each row, that when changed updates the server with the options associated with a model.

I have tested the update call to the server with a non-server-side processing datatable and the update works correctly. But I am not sure how to connect the runtime generated column to a function in my component.

When I tried using HTML mark up to leverage ng-repeat I get the error: "You cannot use server side processing along with the Angular renderer!" So I found that DTColumnBuilder is needed for server side processing.

The thing I need help with is:

html file in component:

<table datatable="" dt-options="satc.dtOptions" dt-columns="satc.dtColumns" 
    class="table table-bordered table-hover"> </table>

datatable configuration in controller for component:

(function() {
    'use strict';

    angular.module(APPNAME).controller('SecurityActionTableController',
        SecurityActionTableController);

    SecurityActionTableController.$inject = ['$scope', '$baseController', '$claimsService', 'DTOptionsBuilder', 'DTColumnBuilder'];

    function SecurityActionTableController($scope, $baseController, $claimsService, DTOptionsBuilder, DTColumnBuilder) {
        var satc = this;
        $baseController.merge(satc, $baseController);
        satc.$claimsService = $claimsService;
        satc.update = _update;
        satc.isClaimActive = _isClaimActive
        satc.dtInstance = {};
        render();

        function render() {
            satc.dtOptions = DTOptionsBuilder.newOptions()
                .withFnServerData(get)
                .withDataProp('data')
                .withOption('processing', true)
                .withOption('serverSide', true)
                .withPaginationType('full_numbers');

            satc.dtColumns = [
                DTColumnBuilder.newColumn('selected').renderWith(function (data, type, full) {
                    return '<input type="checkbox" id=' + full.id + ' onChange="satc.update(full.id)" />';
                    // how does one hook up an onChange event for generated checkbox column?
                    // this might be the wrong approach but it's the closest thing i've found
                }).withTitle('Active'),
                DTColumnBuilder.newColumn('id').withTitle('Claim ID'),
                DTColumnBuilder.newColumn('claimValue').withTitle('Value'),
                DTColumnBuilder.newColumn('claimType').withTitle('Type'),
                DTColumnBuilder.newColumn('issuer').withTitle('Issuer'),
                DTColumnBuilder.newColumn('originalIssuer').withTitle('OriginalIssuer')
            ];
        };

        function get(sSource, aoData, fnCallback, oSettings) {
            var draw = aoData[0].value;
            var columns = aoData[1].value;
            var order = aoData[2].value;
            var start = aoData[3].value;
            var length = aoData[4].value;
            var search = aoData[5].value;
            var params = {
                start: start,
                length: length,
                draw: draw,
                order: order,
                search: search,
                columns: columns
            }
            satc.$claimsService.getDataTableClaims(params).then(function (response) {
                if (!response.data) {
                    console.log('error in datatable response');
                    return
                }
                fnCallback(response);
            });
        }

        function _update() {
            // this is being set by parent component and is working properly
            satc.onUpdate();
        }
        function _isClaimActive(claimId) {
            // satc.activeClaims is being set by parent component propertly
            if (satc.activeClaims && satc.activeClaims.length > 0) {
                return satc.activeClaims.filter(c => c.id == claimId).length > 0;
            } else {
                return false;
            }
        }
    }
}) ();

returning json from server:

{
    "draw": 1,
    "recordsTotal": 1000,
    "recordsFiltered": 100,
    "data": [{
        "id": "1",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AdditionalCompany",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "10",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AdditionalCompanyProduct.Create",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "100",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.List",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "101",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Create",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "102",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Read",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "103",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Update",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "104",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Delete",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "105",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Admin",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "106",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetUser",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "107",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetUser.List",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }],
    "error": null
}

security action table component.js

angular.
    module(APPNAME).
    component('securityActionTable', {  // This name is what AngularJS uses to match to the `<security-action-table>` element.
        templateUrl: '../Scripts/components/security-action-table/security-action-table.html',
        controller: 'SecurityActionTableController',
        controllerAs: 'satc',
        bindings: {
            activeClaims: '=',
            onUpdate: '&'
        }
    });

Upvotes: 0

Views: 558

Answers (1)

Kenny Lucero
Kenny Lucero

Reputation: 134

I decided to go with a row click event instead. this ended up being the example I followed. https://l-lin.github.io/angular-datatables/archives/#!/rowClickEvent

Upvotes: 0

Related Questions