In this document and accompanying video we will continue our discussion on various list methods. In Part 3 we will look at deleting selections and adding records.
Download component used in this video.
Let's now look at how the Delete Current Selection button works. In our example list when we click the Delete current selection button the current row is deleted, and we give focus to the row that follows the deleted row:
To see how this button is added click on the Design tab, then select Button: Delete current selection, then click under Javascript:
When the Edit Click Event window opens we can see that there is a method called listRemoveSelectedRows:
We could write that code by hand, but it is also available in Action Javascript. To have that same code generated for us we click on Action Javascript, then Add New Action:
From the Select an Action window we click on UX Component, then we choose List Control Actions:
From the List Control Actions window we select Action name, and choose the action Remove selected rows from list from the drop-down list:
The list from which we would like to remove the selected rows is listSource:
Click OK, then View JavaScript:
We see that Action Javascript has generated the same line of JavaScript. Click Close then Save:
Then next method is Delete all data. Click on that button, then click under Javascript:
Again, we can write the JavaScript by hand or have Action Javascript generate it for us:
Click UX Component, then List Control Actions:
The List Id is still listSource, but this time select Remove all rows from List as the Action name:
Click View JavaScript to see the line of code that was generated:
Now let's look at the next method, Add Record:
The Add Record method is a bit more complicated. We see that this button is executing an Action Javascript method called Show Container Window. Click on Edit Action:
By clicking Edit Action we see that the container window is called CONTAINER_2:
Under the Design tab we see that CONTAINER_2 is a container that has a sub-type of Window. Inside this container window we have controls called FirstName, LastName, and City. We also have the buttons OK and Cancel. To set the properties of this window, click Window properties:
We have given this window an explicit name called ADDRECORD, and we have turned OFF Window title has close button. Click on the smart field next to Window name for more information:
The reason we gave the window an explicit name (ADDRECORD) is that we want to use the getWindow method and the window hide method to close the window after it has been opened. In order to use these methods we need to give the window an explicit name rather than the default name of Default Window, which is suggested when you initially create the pop-up window:
To look more closely at the Cancel button click on the button, then click under Javascript:
We see that the Cancel button is getting a pointer to the window using the getWindow method, and then hiding the window which closes the window down:
When we look at the OK button, which will actually add the data, we see that what we are calling is a JavaScript function called addRecord, and then we close the window down:
Let's take a closer look at the addRecord function by clicking on Javascript functions under the Design tab, then scrolling down to the addRecord function. We see that what this function does is get the value out of those three controls (firstname, lastname and city) so that we have three variables called fn, ln, and city. Then we construct a JavaScript object called _d and and we set this object's properties, as shown in the highlighted portion below:
We will continue this discussion in Part 4.