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.

In the plunker shared every time i click on add row it is adding a row with file chooser. I want some rows with file chooser and some with text-boxes. — ppb20, Mar 15 '18 at 17:01
To achieve what you are asking for you only have to change the value of the variable "useBindScript". If the answer solved your problem please accept it — A1t0r, Apr 05 '18 at 10:38

score 1 · Answer 1 · answered Mar 14 '18 at 15:23

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;
}

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

1 Answers1