How can I merge columns in UI-grid? - angularjs

Question

Is there any way to merge the columns of UI-grid to be appear as continuous row (without any column line in between). I have tried this
merge columns in ui grid
but this causes me loss of row data at row number number 1. Even more I want every alternate row to be merged.
Here is my Html
<div id="grid" ui-grid="gridOptions" ui-grid-move-columns ui-grid-resize-columns ui-grid-auto-resize class="grid"></div>
Here is my js code for grid
$scope.gridOptions = {
enableColumnResizing: true,
enableRowHeaderSelection: false,
enableGridMenu: true,
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 2,
enableColumnMenus: false,
enableRowSelection: true,
columnDefs: [
{
name: 'Code',
field: 'Code',
}, {
name: 'Title',
field: 'Title',
}, {
name: 'Visits',
field: 'Visit',
}, {
name: 'UsedVisits',
field: 'usedVisits',
}, {
name: 'Pending Visits',
field: 'pendingVisits',
}, {
name: 'Available Visits',
field: 'availableVisits',
}, {
name: 'Start Date',
field: 'StartDate',
}, {
name: 'End Date',
field: 'EndDate',
}, {
name: 'Status',
field: 'Status',
}
]
};
Please suggest me something,
Thank you

Answer 1

To implement it we can merge data while creating array for grid itself
using logic
originally we have array which we merge to show in grid so that in grid we can get merged data
$scope.myData = [{name: "1Abcd", age: "one", gender:2},
{name: "2Tom", age: "two", gender:1},
{name: "3Abcd", age: "three", gender:2},
{name: "4Abcd", age: "four", gender:2},
{name: "5Abcd", age: "five", gender:2},
{name: "6Abcd", age: "six", gender:2},
{name: "7Abcd", age: "seven", gender:2},
{name: "8Abcd", age: "eight", gender:2},
{name: "9Abcd", age: "nine", gender:2},
];
$scope.myDataNew =[] ;
for(var i=0;i<(($scope.myData.length/2)+1);i++){
var tempObj ={};
if($scope.myData[i*2] && $scope.myData[i*2].name && $scope.myData[i*2+1] &&$scope.myData[i*2+1].name){
tempObj.name =$scope.myData[i*2].name+$scope.myData[i*2+1].name ;
}
else if($scope.myData[i*2] && $scope.myData[i*2].name && !$scope.myData[i*2+1] ){
tempObj.name =$scope.myData[i*2].name;
}
if($scope.myData[i*2] && $scope.myData[i*2].age && $scope.myData[i*2+1] &&$scope.myData[i*2+1].age){
tempObj.age =$scope.myData[i*2].age+$scope.myData[i*2+1].age ;
}else if($scope.myData[i*2] && $scope.myData[i*2].age && !$scope.myData[i*2+1] )
{
tempObj.age =$scope.myData[i*2].age;
}
$scope.myDataNew.push(tempObj);
}
here is code pen for completed implementation
http://codepen.io/vkvicky-vasudev/pen/LRPNyL
If ant change required feel free to inform me