A new JavaScript data grid with excited features announced for small and professional web application named ag-grid (Agnostic Grid). It is client side data grid. Two versions of ag-grid announced for free and enterprise experiences.

Today, I want to share my new experience with ag-grid i.e. ag-grid crud operations using angularjs. Please review the code and enjoy powerful features of ag-grid.

ag-grid-crud-example.js
// angular js module
var module = angular.module("example", ["agGrid"]);
// angularjs controller
module.controller("exampleCtrl", function($scope, $timeout) {
    // data for listing
    var data = [
        {defaultString: 'Apple', upperCaseOnly: 'APPLE', number: 11, setAngular: 'AAA', setNoAngular: 'AAA'},
        {defaultString: 'Orange', upperCaseOnly: 'ORANGE', number: 22, setAngular: 'BBB', setNoAngular: 'BBB'},
        {defaultString: 'Banana', upperCaseOnly: 'BANANA', number: 33, setAngular: 'CCC', setNoAngular: 'CCC'},
        {defaultString: 'Pear', upperCaseOnly: 'PEAR', number: 44, setAngular: 'DDD', setNoAngular: 'DDD'}
    ];
    // listed data formatted for angularjs column defination
    var columnDefs = [
        {headerName: "Default String", field: "defaultString", width: 150, editable: true},
        {headerName: "Upper Case Only", field: "upperCaseOnly", width: 150, editable: true, newValueHandler: upperCaseNewValueHandler},
        {headerName: "Number", valueGetter: 'data.number', width: 150, editable: true, newValueHandler: numberNewValueHandler},
        {headerName: "Custom With Angular", field: "setAngular", width: 175, cellRenderer: customEditorUsingAngular},
        {headerName: "Custom No Angular", field: "setNoAngular", width: 175, cellRenderer: customEditorNoAngular},
        {headerName: "", width: 175, cellRenderer: deleteRecord}
    ];
    // drop down options for customEditorUsingAngular and customEditorNoAngular
    var setSelectionOptions = ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'];
    // insert new record
    $scope.addRecord = function()
    {
        // a record initialization
        var newRecord = {defaultString: 'Mango', upperCaseOnly: 'MANGO', number: 55, setAngular: 'EEE', setNoAngular: 'EEE'};
        // push new record in row data
        $scope.gridOptions.rowData.push(newRecord);
        // overwrite row data
        $scope.gridOptions.api.setRowData($scope.gridOptions.rowData);
    }
    // delete record from data
    function deleteRecord(params) {
      var html = '<a title="Remove" href="javascript:;" class="align-center btn-link btn-sm" ng-click="RemoveRecord(' + params.rowIndex + ')">Delete</a>';
      return html;
    }
    // remove record
    $scope.RemoveRecord = function(index)
    {
        // one index splice
        $scope.gridOptions.rowData.splice(index,1);
        // overwrite row data
        $scope.gridOptions.api.setRowData($scope.gridOptions.rowData);
    }
    // initialization of grid options          
    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: data,
        angularCompileRows: true
    };
    // convert value to upper case
    function upperCaseNewValueHandler(params) {
        params.data[params.colDef.field] = params.newValue.toUpperCase();
    }
    function numberNewValueHandler(params) {
        var valueAsNumber = parseInt(params.newValue);
        if (isNaN(valueAsNumber)) {
            window.alert("Invalid value " + params.newValue + ", must be a number");
        } else {
            params.data.number = valueAsNumber;
        }
    }
    // custom editable using angular
    function customEditorUsingAngular(params) {
        params.$scope.setSelectionOptions = setSelectionOptions;
        var html = '<span ng-show="!editing" ng-click="startEditing()">{{data.'+params.colDef.field+'}}</span> ' +
            '<select ng-blur="editing=false" ng-change="editing=false" ng-show="editing" ng-options="item for item in setSelectionOptions" ng-model="data.'+params.colDef.field+'">';
        // we could return the html as a string, however we want to add a 'onfocus' listener, which is no possible in AngularJS
        var domElement = document.createElement("span");
        domElement.innerHTML = html;
        params.$scope.startEditing = function() {
            params.$scope.editing = true; // set to true, to show dropdown
            // put this into $timeout, so it happens AFTER the digest cycle,
            // otherwise the item we are trying to focus is not visible
            $timeout(function () {
                var select = domElement.querySelector('select');
                select.focus();
            }, 0);
        };
        return domElement;
    }
    // custom editable without angular
    function customEditorNoAngular(params) {
        var editing = false;
        var eCell = document.createElement('span');
        var eLabel = document.createTextNode(params.value);
        eCell.appendChild(eLabel);
        var eSelect = document.createElement("select");
        setSelectionOptions.forEach(function(item) {
            var eOption = document.createElement("option");
            eOption.setAttribute("value", item);
            eOption.innerHTML = item;
            eSelect.appendChild(eOption);
        });
        eSelect.value = params.value;
        // add click event
        eCell.addEventListener('click', function () {
            if (!editing) {
                eCell.removeChild(eLabel);
                eCell.appendChild(eSelect);
                eSelect.focus();
                editing = true;
            }
        });
        // add blur event
        eSelect.addEventListener('blur', function () {
            if (editing) {
                editing = false;
                eCell.removeChild(eSelect);
                eCell.appendChild(eLabel);
            }
        });
        // add change event
        eSelect.addEventListener('change', function () {
            if (editing) {
                editing = false;
                var newValue = eSelect.value;
                params.data[params.colDef.field] = newValue;
                eLabel.nodeValue = newValue;
                eCell.removeChild(eSelect);
                eCell.appendChild(eLabel);
            }
        });
        return eCell;
    }
});

 

ag-grid-crud.html

<html>
<head>
	<title> ag-grid crud example using angularjs </title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
    <script src="../dist/ag-grid.js?ignore=notused16"></script>
    <link rel="stylesheet" type="text/css" href="../dist/ag-grid.css?ignore=notused16">
    <link rel="stylesheet" type="text/css" href="../dist/theme-fresh.css?ignore=notused16">
    <script src="ag-grid-crud-example.js"></script>
</head>
<body ng-app="example" ng-controller="exampleCtrl">
    <button ng-click="addRecord()"> Add New Record </button>
<div ag-grid="gridOptions" style="height: 100%;" class="ag-fresh"></div>
</body>
</html>

To download the code click here
To visit the demo click here

If you have any question please query 🙂

Regards

Reference Link: ag-grid.com