Background:
There may be times where you have two different grids on a single page, and want an easy way to move data in between them. By using methods such as splice() and arrays of data within the grids, you can remove rows from one grid and add them to another.
Steps to Complete:
1. Set the selectionMode of the FlexGrid so that its set to row selection
2. Add a button and assign an eventListener to it; this event will be used to move the rows between grids
3. Use the splice() method to remove the selected row from one FlexGrid and move it to another
Getting Started
Set the selectionMode of the FlexGrid so that its set to row selection
First, since we're moving rows based on selection, we'll want the FlexGrid to be set to selectionMode row.
var gridArray = new wijmo.grid.FlexGrid('#flexGrid', {
autoGenerateColumns: false,
itemsSource: gridView,
allowDragging: 2,
selectionMode: 3
});The proper enum to be used to set the selectionMode to select the whole row is '3', which signifies that when we click on a cell it will highlight the entire row.
Add a button and assign an eventListener to it; this event will be used to move the rows between grids
Next, we need a way to initiate the movement of the row. For this sample, we're going to use a button and tie an event to it that is associated with a method.
HTML:
<button id="gridOneButton">Move Selected Row</button>
JavaScript:
document.getElementById('gridOneButton').addEventListener("click", gridOneMove);Use the splice() method to remove the selected row from one FlexGrid and move it to another
Finally, we'll create the gridOneMove method tied to the button click event and use the splice() method to remove the row that is currently selected and then move it into the next grid.
function gridOneMove() {
data1.push(gridArray.rows[gridArray.selection.row].dataItem);
gridArray.rows.splice(gridArray.selection.row, 1);
data.splice(gridArray.selection.row);
gridArray1.itemsSource = data1;
gridArray.refresh();
gridArray1.refresh();
}Here, we push the selected row onto the second CollectionView (data1). After, we splice it out of the first FlexGrid, push the second CollectionView back onto the second FlexGrid, and then refresh both to see the changes made.
You can find a sample of the project outlined in this article here: http://jsfiddle.net/JParksGC/u7o8k9d1/
Joel Parks