angular js dynamically add column to ui-grid

Question

hi, I am developing angular js application In which i am using angular ui-grid to display bind the data coming from mvc controller.But after i bind data to ui-grid i want to add extra column to grid having buttons on each row dynamically.I dont know how to do it.Any help will be grateful..

code: Here columnDefs will be binded to http service method that will call mvc controll action and bind response.I want to add new column now.That will have buttons for each row.Is there any to bind array to field of columnDefs:

    $scope.gridOptions = {
            enableColumnsResize: true,
            enableSorting: false,
            enableFiltering: false,
            autoResize: true,
            enableFocusedCellEdit: true,
            enableCellSelection: true,
            enableCellEditOnFocus: true,
            enableColumnMenus: false,
            columnDefs: [

            ],
            data:$scope.swap,
            onRegisterApi: function (gridApi) {
                $scope.grid1Api = gridApi;
            }

        };
$http.get('/Default1/GetJsonData')
            .success(function (result) {
                $scope.swap = result;
                $scope.gridOptions.push({name:'newcol',filter:'newcolarray'})

                $scope.gridOptions.data = $scope.swap;
                console.log(result);
            })
            .error(function (data) {
                console.log(data);
            });

Hi, did you manage to find a solution for this? Im having the same issue. The push solution also overwrites the other columns displaying only the 'newCol' — Emad
– Emad, Commented Apr 11, 2018 at 8:58

S. Baggy · Accepted Answer · 2016-09-06 21:03:43Z

0

You should be able to do the following in your success() handler

$scope.gridOptions.columnDefs.push({name: 'newCol', displayName: 'My new col'});

And so on, one call like that per column, before you set $scope.gridOptions.data

answered Sep 6, 2016 at 21:03

S. Baggy

95810 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

swapnil Over a year ago

I have query about this.will it overwrite the ui-grid..and display only 'newcol' instead of apppending new column to the existing ui-grid..can you tell me..

swapnil Over a year ago

hi,S.Baggy i tried it ..but it overwrites the existing columns in the ui-grid only shows the new one..

S. Baggy Over a year ago

Can you paste in the code you used to add the columns?

swapnil Over a year ago

i pasted the code i have slight change in requirement is it posssible to bind array in field of columnDefs.I have array of dates and i have bind it to field so that for each date column will be created. i have made some changes in code

S. Baggy Over a year ago

In your original code, you set the columnDefs to [] (empty array), so I am not sure how you are overwriting existing columns, because it doesn't look like there are any? Maybe some more code is missing? If you could create a Plunker, it would make things a lot easier, if you have the time.

|

Collectives™ on Stack Overflow

angular js dynamically add column to ui-grid

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related