Angular UI Grid: Transferring rows between dual grids

Question

Angular UI Grid: Transferring rows between dual grids

Recently, I decided to give angular-ui-grid a try (http://ui-grid.info/) and attempted to implement a feature that involves moving rows between two different grids. I found a solution for this on the kendo grid here:

http://jsfiddle.net/OnaBai/2qXKy/

.

However, as a beginner in JavaScript, I struggled to replicate this functionality in angular-ui-grid. I am facing challenges in assigning selected rows from grid1 to grid2 and then removing them from grid1.

If anyone already has a working solution for this problem, I would greatly appreciate your help.

Thank you in advance.

UPDATE: I have also tried to create a quick but unsuccessful jsfiddle implementation here:

http://jsfiddle.net/LimoJoe/n9h7xmw3/4/

javascript angularjs angular-ui-grid

Answer 1

Answer №1

Check out this JSBin link that demonstrates how you can handle it using two controllers and a service. While it uses ngGrid, the concept should still be applicable to ui.grid in your case.

It seems like the issue might be related to how you are configuring the gridOptions. In your provided example, I didn't see where you defined the '`selectedItems' property within the gridOptions:

Here's the updated code snippet:

 this.gridOptions = {
     data: 't2.items',
     /** NG Grid approach
      selectedItems: [] 
     */
     /** UI Grid approach */
     enableRowSelection: true,
     enableSelectAll: true,
     multiSelect: true,
     onRegisterApi: function(gridApi) {
         $scope.gridApi = gridApi;
         gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
             angular.copy(gridApi.selection.getSelectedRows(), ctl.selectedItems);
         });
      }
 };

Update:

In response to your feedback, I've created a modified version based on this plunkr fork of the referenced article which represents an enhanced iteration of the original resource. Hopefully, this will serve as a helpful starting point for you.

To transition from the mentioned article to ui-grid, remember that upgrading both Angular and ui-grid versions is essential.

Update:

I made some adjustments to your initial JsBin, and here is the revised version - new version. It now reflects an upgraded rendition of my original JsBin. We should be good now!

Answer 2

Check out this JSBin link that demonstrates how you can handle it using two controllers and a service. While it uses ngGrid, the concept should still be applicable to ui.grid in your case.

It seems like the issue might be related to how you are configuring the gridOptions. In your provided example, I didn't see where you defined the '`selectedItems' property within the gridOptions:

Here's the updated code snippet:

 this.gridOptions = {
     data: 't2.items',
     /** NG Grid approach
      selectedItems: [] 
     */
     /** UI Grid approach */
     enableRowSelection: true,
     enableSelectAll: true,
     multiSelect: true,
     onRegisterApi: function(gridApi) {
         $scope.gridApi = gridApi;
         gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
             angular.copy(gridApi.selection.getSelectedRows(), ctl.selectedItems);
         });
      }
 };

Update:

In response to your feedback, I've created a modified version based on this plunkr fork of the referenced article which represents an enhanced iteration of the original resource. Hopefully, this will serve as a helpful starting point for you.

To transition from the mentioned article to ui-grid, remember that upgrading both Angular and ui-grid versions is essential.

Update:

I made some adjustments to your initial JsBin, and here is the revised version - new version. It now reflects an upgraded rendition of my original JsBin. We should be good now!

Answer 3

Answer №2

Here is the ultimate fix available on JSBin. It includes a newly implemented callback function named

gridApi.selection.on.rowSelectionChangedBatch

, allowing users to utilize the Select All button for automatic updates to the selected list.

Answer 4

Here is the ultimate fix available on JSBin. It includes a newly implemented callback function named

gridApi.selection.on.rowSelectionChangedBatch

, allowing users to utilize the Select All button for automatic updates to the selected list.

Angular UI Grid: Transferring rows between dual grids

Answer №1

Answer №2

Similar questions

Learn how to use Django HTML to transmit radio option selections through AJAX and dynamically load a form

Prevent the routing on page reload in AngularJS

Custom AngularJS directive for validating date input forms

What is the best way to limit the number of days that can be selected in v-calendar range for vue.js?

Executing a Databind function using the keypress method in jQuery

Leverage Angularjs ng-repeat to organize array data within a specific framework

How to utilize a Boolean return value in React Class component following a promise fetch operation

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Is it possible to render the v-for value dynamically?

Ways to display an SVG spinner prior to a substantial UI refresh

The event bus in Vue.js is failing to emit events and send data to the component

Incorporate create-react-app with Express

Is there a way to determine if a sound is actively being played?

I'm having trouble getting my .click method to work with the <div id=menuButton>. Can anyone help me figure out why this is happening?

Unique content on a web page when it is loaded with HTML

Looking for a JavaScript or jQuery library that can automatically handle input direction?

The value being passed as a parameter is a number, which cannot be assigned to a parameter expecting a Date type

What methods can I use to identify when a browser autofills a saved password during a web login process?

Retrieving data from the state in a React Component

Deactivating a button using Jquery or Javascript after another button has been clicked