CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
luisδμ
luisδμ

Reputation: 119

Edit a cell and keep the editing status when losing focus in ui-grid 3.0

My starting point is this Plunker, that contains a table made with AngularJS and UI-Grid 3.0. When I double-click on a cell with a template (let's take as an example the gender one), a select element is visible as it enters in edit mode.

But when this cell loses the focus (i.e. clicking outside the table or on another cell), the select element disapears and the cell goes back to the previous state.

Even though that is the default thing to do and the usual one, I'd like to keep the edit mode of each cell no matter if the focus is lost, and go back to the fixed mode only when an option is selected. I need to be able to keep one or more cells in this edit mode at the same time.

Also It'd be great if the gender field in the JSON array could be in a "intermediate" state while in edit mode (it could be the current third item "both" or anything else) and change to "male" or "female" once an option is selected.

The current code is the following:

HTML:

  <div ng-controller="MainCtrl">
    <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
    <hr>{{gridOptions.data | json}}
  </div>

JS:

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

app.controller('MainCtrl', ['$scope', '$http',
  function($scope, $http) {

    $scope.genderTypes = [{
      ID: 1,
      type: 'female'
    }, {
      ID: 2,
      type: 'male'
    }, {
      ID: 3,
      type: 'both'
    }];

    $scope.gridOptions = {
      enableSorting: true,
      enableFiltering: true,
      enableCellEditOnFocus: true,
      columnDefs: [{
        field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      }, {
        field: 'gender',
        editType: 'dropdown',
        enableCellEdit: true,
        editableCellTemplate: 'ui-grid/dropdownEditor',
        editDropdownOptionsArray: $scope.genderTypes,
        editDropdownIdLabel: 'type',
        editDropdownValueLabel: 'type'
      }, {
        field: 'company',
        enableSorting: false
      }]
    };

    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });

  }
]);

Upvotes: 0

Views: 1607

Answers (1)

Andrew
Andrew

Reputation: 11

I have just looked lightly at your code but you should have editDropdownIdLabel as 'ID'. This should do it. if you have a more complex change going on maybe look at my suggestion below.

There is a function in ui-grid called uiGridEventEndCellEdit, even though you have changed the data in the grid have you pushed the changes to your server side? So after you changes something you can lose focus and catch the event and then update your model accordingly.

Upvotes: 0

Related Questions