Angular ui-grid adding new row dynamically

Question

I am having a problem with the newly added row. It inherit the row in the grid (the buttons and behavior). The code is working adding a new row but I want a new row with the behavior in the AddOverride() function. Like a button with save and cancel button. Also when I add a new row. the new row >has the update and delete button. When I try to click update on the newly >added row, it is calling the service for updating.

-

HTML

   <button  id="addNew" ng-click="addOverride()" type="button" class="btn 
btn-primary">Add Rank</button>      
                <div ui-grid-auto-resize ui-grid="gridOptions" ui-grid-
pagination class="gridRank" style="height: 370px !important;"></div>

Populating Grid

$scope.gridOptions = {             
            columnDefs: [
                { 
                    field: 'rankID', displayName: '', visible: false
                },
                {
                    name: 'rankDesc', field: 'rankDesc', displayName: 'Rank Desc',
                    cellTemplate: '<div  ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 350

                },
                 {
                     field: 'createTime', displayName: 'Create Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
                 },
                {
                    field: 'createUserID', displayName: 'Create UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                },                   
                 {
                     field: 'updateTime', displayName: 'Update Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
                 },
                {
                    field: 'updateUserID', displayName: 'Update UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                },
            {
                name: 'Action', field: 'edit', enableFiltering: false, enableSorting: false, enableColumnMenu: false,
                cellTemplate: '<div><button ng-show="!row.entity.editrow"  ng-click="grid.appScope.edit(row.entity)"><span class="glyphicon glyphicon-edit"></span></button>' + ' ' + //Edit Button                                   
                               '<button ng-show="row.entity.editrow" ng-click="grid.appScope.saveRow(row.entity)"><span class="glyphicon glyphicon-ok"></span></button>' + ' ' +//Save Button
                               '<button ng-show="row.entity.editrow"  ng-click="grid.appScope.cancelEdit(row.entity)"><span class="glyphicon glyphicon-remove"></span></button>' + ' ' + //Cancel Button
                               '<button ng-show="!row.entity.editrow" ng-click="grid.appScope.Delete(row.entity)"><span class="glyphicon glyphicon-trash"></span></button>' + ' ' + //Delete Button
                               '</div>', width: 75
            }],
            data: response.data.resultLists.cookRankList,
            paginationPageSizes : [10, 20, 30],
            paginationPageSize : 10,
            multiSelect: false
        };

ADDING OF NEW ROW

$scope.addOverride = function () {
            var emptyData = [
                 {
                     field: 'rankID', displayName: '', visible: false
                 },
                  {
                      name: 'rankDesc', field: 'rankDesc', displayName: 'Rank Desc',
                      cellTemplate: '<div  ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 350

                  },
                  {
                      field: 'createTime', displayName: 'Create Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
                  },
                  {
                      field: 'createUserID', displayName: 'Create UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                  },
                  {
                           field: 'updateTime', displayName: 'Update Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
                  },
                  {
                           field: 'updateUserID', displayName: 'Update UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                  },
                  {
                    name: 'Action', field: 'add', enableFiltering: false, enableSorting: false, enableColumnMenu: false,
                    cellTemplate: '<div><button  ng-click="grid.appScope.saveRow(row.entity)"><span class="glyphicon glyphicon-ok"></span></button>' + ' ' +//Save Button
                                   '<button ng-click="grid.appScope.cancelEdit(row.entity)"><span class="glyphicon glyphicon-remove"></span></button>' + ' ' + //Cancel Button
                                   '</div>', width: 75
                }

            ];
            $scope.gridOptions.data.unshift(emptyData);
         };

Brian · Answer 1 · 2017-12-14T00:23:46.093

0

When you add a new row, it should be a single object with the same properties as the others within the grid. You are pushing the column definitions into a row, so the grid is confused.

Your add function should be shortened to simply push a new object into your data array:

$scope.addOverride = function () {
   $scope.gridOptions.data.unshift({
        rankID: "",
        // shortened
    });
};

Then, for your templates, you could create two variables to keep things tidy. Or just put it all together. Basically, you want your template to toggle on some field that won't be there initially. I am guessing createTime is one such field. Oftentimes this would be an id. You could also create a new hidden field if you wanted.

A lightweight example:

  var cellTemplateReg = '<div ng-if="row.entity.createTime">Existing</div>';
  var cellTemplateNew = '<div ng-if="!row.entity.createTime">New</div>';

columnDefs: [ //shortened
  {
      name: 'Action,
      field: 'action',
      enableFiltering: false,
      enableSorting: false,
      enableColumnMenu: false,
      width: 200,
      cellTemplate: cellTemplateReg + cellTemplateNew
  }
]

edited Dec 14 '17 at 00:23

answered Dec 08 '17 at 03:45

Brian

4,921
3
20
29

Hi Brian, thank you but you didn't answer my question. As you can see in the above code, I am not adding an editable fields for other column. Only for the RankDesc. I don't need editable fields for other columns. All I want is to have a "Save" and "Cancel button" in the newly added field instead of having an "Update" and "Delete" button since there is nothing to update or delete because it is a newly added row. And it seems that the newly added row inherit the buttons from the "Populating Grid" columndefs above instead of adding a new row from AddOverride() with Save and Cancel button. – Glenn Chua Dec 11 '17 at 07:01
function () { $scope.gridOptions.data.unshift({ rankID: "", rankDesc: "", createTime: "", createUserID: "", updateTime: "", updateUserID: "", cellTemplate: '
' + ' ' + '' + ' ' }); };
– Glenn Chua Dec 11 '17 at 07:03
I understand what you are trying to do. For a row that hasn't been committed, you want a different action set. I did update the column name in my sample to your `action` column name. What you are actually doing is adding column definitions into your data; the grid isn't going to do anything with that. It will look at that as more nested fields. A column is horizontal, and a row is vertical. You can't target a specific row like that. The solution I am providing shows how to set a template for a column, and make the template itself conditional. – Brian Dec 11 '17 at 09:31
Hi Brian. I think we are not on the same page. You've added a field for adding fields in the Action. But my button for adding a new row is outside the grid. (Check the html above) Also, I already have that celltemplate for my editable column which is only the RankDesc. All I need is to have a new button which is save and cancel. How am I going to achieved that? Can you give me a sample using jsfiddle or plnker? Is there something wrong on how i define my columndefs in populating grid that is affecting the newly added row? Thank you. – Glenn Chua Dec 12 '17 at 00:49
Your question shows that you have a button, external to the grid, to add a new row. When you click that, a new row should be added to the grid, and that row should have different buttons in the _Action_ column as that record hasn't yet been created (so you'd save or cancel vs. delete or update). What I am proposing is to do that. If that is not what you are looking for, you'd have to update the question since that is what I am gathering. – Brian Dec 12 '17 at 12:57
Then why would you have : cellFilter: 'date:\'yyyy-MM-dd\'', and cellTemplate: cellTemplateReg + cellTemplateNew if you are adding a new buttons? Do buttons need cellfilter of date format? It is making me more confuse on what do you want to suggest. – Glenn Chua Dec 14 '17 at 00:20
I copied that in with haste. Updated the definition in my answer. The cell template is to show the buttons. I separated the templates in variables, one for a regular row, and one for a new row. Then I concat them in the definition. Just helps to see the two templates separately. The key here is that adding a row is pushing a record into data, not column defs. The template should use standard angular directives (`ng-if`) to decide which to show, based on the context of that row (the non-existence of a field that would be there for an existing row). – Brian Dec 14 '17 at 00:24
Hi Brian. Thank you for your effort. I will try this in the future. But for now, I used a modal to add a new row since I don't have much time. Many Thanks. Cheers. – Glenn Chua Dec 14 '17 at 06:16

Angular ui-grid adding new row dynamically

1 Answers1