How to update the respective row in angular ui grid

ui-grid columndefs
ui-grid options
ui-grid example
ui-grid tooltip
ui-grid grouping
ui-grid expandable
ui-grid filter

Hi i am trying to avoid name duplication's in angular ui grid.

$scope.gridOptions.columnDefs = [
    { name: 'id', width: '25%' },
    { field: 'name', 
      displayName: 'Name', 
      width: '25%',
      'cellTemplate':'<div><input type="text" ng-class="{error:grid.appScope.hasError(row.entity)}" ng-change="grid.appScope.objectHasChanged(row.entity)"  ng-input="" ng-model="" /><div class="errorspan" ng-show="grid.appScope.hasError(row.entity)" >Error in field</div></div>'
    { name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
      cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: 
        { id: 1, gender: 'Male' },
        { id: 2, gender: 'Female' }
        field: 'status',
        cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">InActive</div>'

Here is my plunker:

Problem is with its opening all the other rows as well.

What am i doing wrong? Is there any way to update only to the particular row?

You can use ui-grid-validate (see

<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav ui-grid-validate class="grid"></div>

And in JS:

    function(argument) {
      return function(newValue, oldValue, rowEntity, colDef) {
        if (!newValue) {
          return true; // We should not test for existence here
        } else {
          angular.forEach(argument, function(obj, key) {
            if ( === newValue) return true;
          return false;
    function(argument) {
      return "You can't insert duplicate";

Here is your plunker updated:

205 Row Edit Feature, The row still has the updated data displayed, but will be shown in red <script src=""></  In this article we will implement editing all columns in a row using button click and save the details to database on Save Button click. You can see a sample demo of editing functionality below. UIGrid Updates. We will use the cellTempalate, to make the cell editable. We are using a flag to make the row editable.

Angular UI-Grid row entity update steps: 1. Grid column def.

columnDefs : [
    field : 'email',
                cellTemplate : '<a href="#" 
  1. Declare a variable within $scope in controller i.e

        var selectedRow;
        $scope.update = function(myRow) {
        $scope.selectedRow = myRow;
        $scope.objCopy = angular.copy($scope.selectedRow.entity);
        //testing or update from a modal form or get the server copy
        $scope.selectedRow.entity  = angular.copy($scope.objCopy);

Refer methods and parameters:!/api/ui.grid.class:GridRow

ng-grid inline row update with textbox · Issue #1281 · angular-ui/ui , Currently with edit button, i copy row's data into angular popup modal. I make changes and update data to respective grid. But now, i want to  How do i change particular column value on runtime in angularjs ui grid? I have to perform following scenario ? When there is ACTIVE in Grid then the column should disable. When there is DRAFT in grid and user click on this option then only two option of selectbox should visible i.e DRAFT and RELEASE?

Just check with the changes @Mithun with a slight modification with your code :

 $scope.hasError = function(entity){  
  var changed =;
 // console.log('changed => '+changed);
 var count = 0;
   for (var key in $

     if ($[key].name == changed) {

      return true;
    return false;

Plunker link:

Hope this satisfies your requirement

Update one row only from server? · Issue #698 · angular-ui/ui-grid , It's highly possible that I'm over-thinking this but I need to edit the row in a dialog (​which I have working) and I need to send the row back to the  You don't actually need to refresh ui grid when data is updated, AngularJS is MVC framework and each model AngularJS will create a watcher to update view.

Angular Grid Editing | Data Manipulation, You can also directly update a cell and/or a row value through their respective update methods. // Updating the  An example on how to render the content of a particular Kendo UI Grid row when manually changing its values and without refreshing the entire Grid.

Change Log - Grid - Kendo UI for Angular, reuse detailed template if the row is not changed; group binding directive incorrectly to reference dist/npm/index.js; Adds @progress/kendo-angular-​common and $$iterator from rxjs; respect ctrlKey/metaKey state during multiple selection 3.0 will be the functionality we currently have, but with the remaining 3.0 milestone bugs fixed. So no, this won't be in 3.0. The usual way to reset the grid at the moment is to wrap your enclosing directive in an ng-if, so you can toggle the ng-if off, wait for one digest cycle, then toggle it on again.

Create a Modal Row Editor for UI-Grid in Minutes, Want a shortcut to cleanly editing data in UI-Grid Use this guide to create your own modal row editor with Angular Schema Form. to edit, in this case our row, but if we bind directly to the row we will be updating it live, data of schema form has to be change according to corresponding row's entry in DB. Manipulating the collection the Grid is bound to (or replacing it with a new one altogether) will result in rerendering the Grid with the latest data. You can store the Grid state and obtain it from local/session storage, remote service or via any other custom approach, and bind the Grid's pageSize , skip , filter , sort , and group properties to the ones of the saved state object, e.g.: