Editable array of strings within ui-grid

Question

I am trying to display a list of Strings (array) in a ui-grid table and allow the user to create new entries in the list.

In the first item added, everything works fine (the item is added and the user can update it). After this, for every item added, the changes did previously are being lost.

Link to reproduce the issue (with steps to reproduce): http://plnkr.co/edit/d3b8IYGVM6sMaALN

Am I missing something? Do some of you have a clue about how to solve it?

Thank you in advance!

Code:

$scope.gridOptions = {
        enableSorting: true,
        enableGridMenu: true,
        gridMenuCustomItems: [
            {
                title: 'Add',
                action: function ($event) {
                    $scope.gridOptions.data.push("New item");
                },
                order: 210
            }
        ],
        columnDefs: [
          { name:'Name', field: uiGridConstants.ENTITY_BINDING }
        ],
        data : [
          "John Rogers",
          "David Michaels",
          "Andrew Johnson",
          "Donald McDonald"
        ]
      };
}]);

Let me know if the answer work :)

joseglego
– joseglego

2021-09-23 10:07:44 +00:00
Commented Sep 23, 2021 at 10:07 — joseglego
– joseglego, Commented Sep 23, 2021 at 10:07

joseglego · Accepted Answer · 2021-09-23 09:59:29Z

1

I forked your plnkr and here is an example: http://plnkr.co/edit/qqEon3rtEjf6RDx3

The problem is associated with the type of data, so, my recommendation is to use an object. If you use a list of objects instead of a list of strings, you won't have this issue.

What I did was:

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);

app.controller('OneDimensionCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
$scope.data = [
          {name: "John Rogers"},
          {name: "David Michaels"},
          {name: "Andrew Johnson"},
          {name: "Donald McDonald"}
        ]
$scope.gridOptions = {
        enableSorting: true,
        enableGridMenu: true,
        gridMenuCustomItems: [
            {
                title: 'Add',
                action: function ($event) {
                    $scope.gridOptions.data.push({name: "New item"});
                },
                order: 210
            }
        ],
        columnDefs: [
          { name:'name' }
        ],
        data : $scope.data
      };
}]);

If your original data comes as a list of string, you can create on object with:

$scope.data.map(function (originalValue) {
  return ({ name: originalValue })
})

answered Sep 23, 2021 at 9:59

joseglego

2,1091 gold badge20 silver badges32 bronze badges

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

1 Comment

Marcelo Magnani Over a year ago

Indeed your answer works well. Thank you for this. The not-so-elegant part is because is necessary to convert from [] String to [] Object to display the data in the grid, and from [] Object to [] String before sending the data to the backend. Still, it works...

Collectives™ on Stack Overflow

Editable array of strings within ui-grid

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related