How to show checkboxes and button in UI Grid with Dynamic ColumnHeaders

Question

I want to create a dynamic UI-Grid with columns and rows dynamically generated.I have used the help from other post in Stack Overflow and able to create the grid as follows:-

HTML

<div ui-grid="{ data: myData.Data }" class="gridStyle" ui-grid-edit></div>

Controller

myApp.controller("ctrlSiteJob", ['$scope', function ($scope) {
    var updateDict = [];

    $scope.myData = {
        'Type':
        [
            'AValues',
            'BValues',
            'CValues'
        ],
        'Data': [
            {
                'Keys': 'Category',
                'AValues':
                {
                    'ID': '1',
                    'Val': 'Yes'
                },
                'BValues':
                {
                    'ID': '2',
                    'Val': 'No'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': 'No'
                }
            },
            {
                'Keys': 'TTT',
                'AValues':
                {
                    'ID': '2',
                    'Val': 'No'
                },
                'BValues':
                {
                    'ID': '4',
                    'Val': 'Yes'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': 'Yes'
                }
            },

        ]
    };

    angular.forEach($scope.myData.Data, function (value, index) {
        for (cntType = 0; cntType < $scope.myData.Type.length; cntType++) {
            var typeLength = $scope.myData.Type[cntType];
            value[typeLength] = value[typeLength].Val;            
            $scope.myData.Data[index] = value;
        }
    });
}]);

The grid looks as below:-

Now I want the following in the grid to be added:-

Instead of Yes/No it should show checkbox. If value is Yes then checkbox should be checked and for No it will be unchecked.
I want to add the button like Update on each row of Grid so that whenever user change the checkbox selection then it will be updated in the database.

How to achieve this?

Hasan Nafisi · Accepted Answer · 2018-04-07 08:46:49Z

0

you can use "cellTemplate" for each column inside $scope.myData, and i think you need to call a function when user click on each button, here is a simple example:

cellTemplate: '<div class="ui-grid-cell-contents" ng-click="grid.appScope.editProperties(row.entity)"><a class="btn btn-xs btn-grid btn-info"><i class="fa fa-pencil-square-o"></i></a></div>'

function editProperties(rowEntity) {
                //write everything u want
}

1 Comment

simple user Over a year ago

Thanks for your answer,. I have used cell template in many of other ui grid cases before where column headers are constant. Here in this example column headers are not constant and increase/decrease depend on the data in backend. Can you please provide an working exmaple on such scenario?

Collectives™ on Stack Overflow

How to show checkboxes and button in UI Grid with Dynamic ColumnHeaders

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related