How to add a new row with custom cell Template on button click in to an existing grid

Question

var nameTemplate = ""

function templateFunction() {

  if ($scope.useBindScript === true) {

    nameTemplate = '<div class="ui-grid-cell-contents"><input type = "file"></div>';

  } else {
    nameTemplate = '<div class="ui-grid-cell-contents"><input type = "text"></div>';

  }

  return nameTemplate;
}

$scope.gridOptionsArg = {
  enableRowSelection: true,
  enableRowHeaderSelection: false,
  enableCellEditOnFocus: true,
  data: $scope.arginputFiles,
  columnDefs: [{
      name: 'mark',
      cellTemplate: templateFunction()
    },
    {
      name: 'argument',
      field: 'index',
      enableCellEdit: false
    },
    {
      name: 'value',
      field: 'value'
    }
  ]
};

$scope.addRow = function() {
  if (condition) {
    $scope.gridOptionsArg.data.push({
      "argument": "Application",
      "value": ""

    });
    $scope.columns[$scope.columns.length - 2].cellTemplate = templateFunction();
  }
}

This is the definition of my grid. Once I click on some button add row function would be called where I want to add a row to the grid with new cellTemplate. Everytime it is returning a textbox.

Answer 1

I have created a plunker with your needs: http://plnkr.co/edit/GKmcwZurGSf6VXjC2gu0?p=preview

The following function creates a new row and add it to the ui-grid data:

vm.addRow = function() {
    vm.gridOptions1.data.unshift({"name":"Test", "gender":"Male", "company":"test"});
    vm.grid1Api.core.notifyDataChange( uiGridConstants.dataChange.EDIT );
  };

I have used the same function to return the template:

function templateFunction() {
  var nameTemplate;
  if (useBindScript === true) {

    nameTemplate = '<div class="ui-grid-cell-contents"><input type = "file"></div>';

  } else {
    nameTemplate = '<div class="ui-grid-cell-contents"><input type = "text"></div>';

  }

  return nameTemplate;
}