Total Pageviews

2016/01/27

[AngularJS] How to set selected row and set highlight in ng-gird pragmatically?

Requirement
After I create a new record, the program should refresh the data grid and set selected item and highlighted the selected item.


 After I update an existing record, the program should refresh the data grid and set selected item and highlighted the selected item.


 Here has the code snippet regarding ng-grid:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
        $scope.itemGridCols  = [ 
            {
               field : 'accountYr',
               displayName : '年度',
               cellClass: 'text-left',
               width: '150px'
            }, 
            {
               field : 'orgType',
               displayName : 'orgType',
               cellClass: 'text-left',
               visible : false
            },
            {
                field : 'orgTypeName',
                displayName : '機關類別',
                cellClass: 'text-left',
                width: '250px'
             },
             {
                field : 'masterAge',
                displayName : 'masterAge',
                cellClass: 'text-left',
                visible : false
             },
             {
                field : 'masterAgeName',
                displayName : '主管機關名稱',
                cellClass: 'text-left',
                width: '250px'
             },
             {
                field : 'ageName',
                displayName : '機關名稱',
                cellClass: 'text-left',
                width: '250px'
              },
             {
                field : 'age',
                displayName : '機關代號',
                cellClass: 'text-left',
                width: '250px'
             }
          ];
        
        $scope.itemGrid = {
                keepLastSelected: false,
                selectedItems: $scope.selectedItem,
                multiSelect : false,
                data : 'itemData',
                columnDefs : 'itemGridCols',
                enableColumnResize: true,
                afterSelectionChange : function(rowItem){ 
                    if (rowItem.selected) {
                        $scope.model.accountYr = rowItem.entity.accountYr;
                        $scope.model.orgType   = rowItem.entity.orgType;
                        $scope.model.masterAge = rowItem.entity.masterAge;
                        $scope.model.ageNm     = rowItem.entity.ageName;
                        $scope.model.age       = rowItem.entity.age;
                    }else{
                        $scope.model = {};
                        
                        $scope.model.accountYr = getCurrentYear()-1;
                    }
                }
        };

create and update button code snippet is as following:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
        $scope.createBtn = function(){
            // 驗證表單
               if (!$scope.validate(this.dbm039eForm)) {
                   return;
               }
               
               dbmService.execute("rest/create", $scope.model)
                   .then(function(response) { 
                       $scope.itemData = response;
                       cAlerter.info('新增成功');
                   }
               );
          };
          
          $scope.saveBtn = function(){
              dbmService.execute("rest/save", $scope.model)
                  .then(function(response) { 
                      $scope.itemData = response;                    
                      cAlerter.info('修改成功');
                  }
              );
          };

How To
Utilize $scope.itemGrid.selectRow(index, true); to fulfill this requirement, and remember to move this code in $timeout:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
         $scope.setSelectedRow = function(itemData, selectedItem){
              var index = 0;
              var keepGoing = true;

              angular.forEach(itemData, function(value, key) {
                  if(keepGoing){
                      if(value.accountYr == selectedItem.accountYr && 
                         value.orgType == selectedItem.orgType  && 
                         value.age == selectedItem.age){
                           index = key;
                           keepGoing = false;
                      }
                  }
              });
              
              // remember to set select row in $timeout, or it will NOT work
              $timeout(function () {
                  $scope.itemGrid.selectRow(index, true);
              },1 );
              
          };
    
        $scope.createBtn = function(){
            // 驗證表單
               if (!$scope.validate(this.dbm039eForm)) {
                   return;
               }
               
               dbmService.execute("rest/create", $scope.model)
                   .then(function(response) { 
                       $scope.itemData = response;
                       
                       //set model to selectedItem
                       $scope.selectedItem[0] = $scope.model;
                       //set selected row
                       $scope.setSelectedRow($scope.itemData, $scope.selectedItem[0]);
                       
                       cAlerter.info('新增成功');
                   }
               );
          };
          
          $scope.saveBtn = function(){
              if($scope.selectedItem.length == 0){
                  cAlerter.fatal('請選擇要修改的資料');
                  return;
              }
              
              dbmService.execute("rest/save", $scope.model)
                  .then(function(response) { 
                      $scope.itemData = response;
                      
                      // set selected row
                      $scope.setSelectedRow($scope.itemData, $scope.selectedItem[0]);
                      
                      cAlerter.info('修改成功');
                  }
              );
          };


Reference
[1] https://github.com/angular-ui/ui-grid/issues/2267
Posted by Albert Kuo at 10:48 AM
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)