angular ui grid combining two columns into one

Question

Is there a way to combine two fields into one field in angular ui grid?

I tried the below code, the case manager part worked but the client part is not working

CaseServices.getCases().then(function (response) {
            $scope.gridOptions.columnDefs = [
          { name:'Title', field: 'Title' },
          { name:'Case Manager', field: 'Case_x0020_Manager.Title' },
          { name:'Client', field: 'Client.FirstName' + 'Client.Title'},

        ],
            $scope.gridOptions.data = response.d.results;
        });

I saw in an example that we can build our own functions like below

columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', field: 'getZip()', enableCellEdit:false}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]

But since I am getting response from ajax call, I am not sure how to modify the data part ($scope.gridOptions.data = response.d.results;)

Can someone help on any one of these? as it will solve the purpose

Your ajex results I guess are just an array. After you get it back, you can modify it anyway you want with plain ol' JS .map, .filter, etc. You bind that modified array to your grid and you should have what you want. — Tim Consolazio
– Tim Consolazio, Commented Jan 18, 2017 at 12:15
Thanks Tim. isn't there some other way in angular ui grid other than parsing through array and reconstructing it? — Vignesh Subramanian
– Vignesh Subramanian, Commented Jan 18, 2017 at 12:33
There might be. But running a standard filter or map on an array to transform a list or grid is very standard practice. It only takes a line or two of code, and if you're dealing with this sort of thing on any kind of regular basis, is very (very) worth knowing how to do. — Tim Consolazio
– Tim Consolazio, Commented Jan 18, 2017 at 13:10

Philip · Accepted Answer · 2017-01-19 06:27:21Z

1

There are two ways to do this

Modifying the object array

$.each(response.d.results,function(){
            this.ClientName = this.Client.FirstName + " " + this.Client.LastName;  

         });

Using CaseTemplate feature available in angular ui grid (recommended)

$scope.gridOptions.columnDefs = [
                  { name:'Title', field: 'Title' },
                  { name:'Client', field: 'Client', cellTemplate:'<div>{{row.entity.Client.FirstName + " " + row.entity.Client.Title }}</div>'},
                ],

answered Jan 19, 2017 at 6:27

Philip

263 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular ui grid combining two columns into one

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related