CODEWITHSUNDEEP
angularjsangular-ui-grid
Mike F.
Mike F.

Reputation: 48

How to copy selction into a new ui-grid

I am using Angular ui-grid (from ui-grid.info). I have one ui-grid showing JSON Data delivered by a webapi-controller what works perfectly. I added a second ui-grid with the same columsDef but no data.

I want to copy the (multi-)selected rows from grid1 to grid 2 using a button.

How would I access the selection to add it into the data of the second grid?

app.js

    var app = angular.module('app', ['ui.grid', 'ui.grid.grouping','ui.grid.selection']);

app.controller('MainCtrl', ['$scope', '$http', '$log', 'i18nService', '$interval', 'uiGridGroupingConstants', function ($scope, $http, $log,i18NService, $interval, uiGridGroupingConstants) {
    $scope.langs = i18NService.getAllLangs();
    $scope.lang = 'de';
    i18NService.setCurrentLang('de');
    $scope.gridOptions = {
        rowSelection:true,
        enableFiltering: true,

        enableRowSelection: true, 
       enableFullRowSelection :true,
        enableSelectAll: true,
        selectionRowHeaderWidth: 35,
        rowHeight: 75,
        showGridFooter:true,
        treeRowHeaderAlwaysVisible: true,
        columnDefs: [

        { name: 'Trigraph',field:'ZeigeTrigraphen',width:'10%'},

        { name: 'Titel', field: 'Titel', cellTemplate: '<td style="word-wrap:break-word;padding:5px;">{{ COL_FIELD }}</td>' },

 { name: 'Ziel', field: 'Ziel', cellTemplate: '<td style="word-wrap:break-word;padding:5px;">{{ COL_FIELD }}</td>' },


        ],
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        }
    };
    i18NService.setCurrentLang('de');

    $http.get('/api/Alarmkalender/HoleAlle').then(function (resp) {

        $scope.gridOptions.data = resp.data;
        $log.info(resp);
    });

html

<div class="container" ng-app="app">
@*<link rel="styleSheet" href="../../Scripts/ui-grid/ui-grid.min.css" />*@
<style>
    .grid {
        width: auto;
        height: 350px;
    }
</style>

<h2>Alarmmassnahmen</h2>
<div ng-controller="MainCtrl">

    <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>

        <button name="SpeichernButton" class="btn btn-success" id="btnSpeichern" type="submit" value="SpeichernButton"><i class="glyphicon glyphicon-save"></i> In Alarmkalender kopieren</button>

    <div id="grid2" ui-grid="gridOptions2" class="grid"></div>
</div>

Upvotes: 2

Views: 1859

Answers (1)

CMR
CMR

Reputation: 933

There are several ways to achieve your goal. I made a Plunker to demonstrate a possible solution.

You could create an ng-click on the row-template and gather all row selections. You either instantly load them into the new grid (as shown in Plunker) or load them all on external button-click.

There are basically three steps

First modify the row-Template

$templateCache.put('ui-grid/uiGridViewport',
  ...
  "<div ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\"" +
  "ng-click=\"grid.appScope.addRowtoSelection(row)\"" +
  ...
);

Then you bind that addRowtoSelection() to your first grid and push selected rows into an array.

all.relectedRows = [];
all.gridOptions = {
  ...
  appScopeProvider : {
    addRowtoSelection : function(row) {
        all.relectedRows.push(row.entity);
    },
  },
};

Finally you bind that array as new data to your second grid.

all.gridOptionsTwo = {
  data: 'all.relectedRows',
  ...
};

e: If you want to use a button instead of instant addition of rows, you could use selectedRows as temporary array and reference selectedRowsData in your second grid. See updated Plunker.

HTML

<button ng-click="all.addRowsToSecondGrid();">Add Rows</button>

JavaScript

    all.relectedRowsData = [];

    all.addRowsToSecondGrid = addRowsToSecondGrid;
    function addRowsToSecondGrid() {
      all.relectedRowsData = [];
      all.relectedRowsData = all.relectedRowsData.concat(all.relectedRows);
    }

    all.gridOptionsTwo = {
        data: 'all.relectedRowsData',
        ...

Hopefully that helps.

Upvotes: 1

Related Questions