Background:
Paging allows developers to set a specific number of rows to appear in the grid, with any extra appearing on pages that the user can navigate across. Sometimes you'll also want to allow users to create new rows in the grid. This is not enabled by default when using paging, but it is possible to allow this feature in FlexGrid.
Steps to Complete:
1. Create a button element and tie an eventListener to it
2. Create a method associated with the eventListener
3. Push the new row onto the sourceCollection of the collectionView, refresh the grid, and then move to the last page
Getting Started
Create a button element and tie an eventListener to it
In this sample, we're going to add the new row through a simple button click. To do that, we need a button, and that button needs an eventListener.
HTML:
<button id="newRow">Add Row</button>
JavaScript:
var buttonRow = document.getElementById('newRow');
buttonRow.addEventListener('click', addNewRow);Create a method associated with the eventListener
An event, addNewRow(), has been associated with clicking on the button, so in this step we'll simply create the method that is going to be called when a user clicks on the button.
function addNewRow() {}Push the new row onto the sourceCollection of the collectionView, refresh the grid, and then move to the last page
Finally, in the addNewRow method, we'll create an empty object with the same properties as objects in our grid, push it onto the end of the sourceCollection of the collectionView, refresh the grid, and then move on to the last page.
view.sourceCollection.push({ id: null, country: null, product: null, sales: null, expenses: null });
flex.refresh();
view.moveToLastPage();You can find a live sample of the project in this article here: http://jsfiddle.net/JParksGC/7L9z0pmq/
Joel Parks