In this document and accompanying video we will continue our discussion on various list methods. Let's now look at the method that inserts data at the current location.
Download component used in this video and document
In our example let's click on the third row of data, displaying the information Francis Higgins of Durban. This is actually row index two since we are using a zero based index. Click on Insert Sample Data at Current Location:
Two rows of additional data (Michael Gorbi and Eddie Barlow) were inserted after Francis Higgins:
Click on the Design tab to see how we add this method to our list. Click on Controls, then the Button: Insert Sample Data at Current Location, then the click event under Javascript to see the click event for this button:
We see that the insert button is calling a function called insertAtCurrentLocation:
Click on Javascript functions under Code to see the Javascript for the insertAtCurrentLocation function. The function creates an array of data that we want to insert (Firstname, Lastname, etc.), then calls the insertData function. The insertData function takes the Id of the list that we would like to insert data into, then the array of data, and gets a pointer to the list control that we would like to program against:
We then set a flag that indicates whether we are going to be doing an append or an insert. The data in the list is inside a property called rData, which is the row data. If that array has a length of zero then there is no data in the list, and we will be doing an append. In addition, we have to see whether the currently selected row in the list is the last row in the list, and if it is we will be doing an append, otherwise we will be doing an insert at the current location row. And we will set the target to give focus to the last row that was inserted:
The tricky stuff is the code highlighted below. It says that the list object . selection (lObj . selection) is an array of selected row numbers. In our example we have set our list to allow only one row at a time to be selected, but we can set the list to allow multiple rows to be selected which would give back an array. What we want to do is create a new array that is distinct from and not pointing to the lObj . selection array:
We want to create a brand new array by using a Javascript trick of creating an empty array using [ ] and then calling the concat method of that empty array to append the data from the lObj . selection array. Now we have a new array called row, which is disassociated from the lObj . selection array, so it can be sorted, popped, etc. without interfering with the list at all:
The code says that we now have an array of selected rows, and we want them to be sorted so that the data in the selection is sorted in order. We do that because when you select multiple items in the list you could select row four before row two, but we want the array to be in sorted order. We get the last value in the array by calling the pop method, and then we add one to that:
That gives us the target row number for where we will be appending, but if that target row number is greater or equal to the existing length of data then we want to do an append. All of this fairly complex Javascript code allows us to decide whether we will be doing an append or an insert. The command that does an append is appendRows and the command that does an insert is insertRows, but either way we are adding new rows into the list at the current location:
