In this document and accompanying video we will introduce and discuss some of the methods we can use to program the List Control in a UX Component.
Download component used in this video and document
In our sample component we have two list components, List Source and List Target, and initially both lists are empty:
Examples of methods we can use to program the List Control include a button to Add Sample Data to List, so that one click populates the list. Also, Delete all data which will clear all the data with one click:
We can Insert Sample Data at Current Location so that by clicking that button new rows of sample data are automatically added after our highlighted row. We can also Delete current selection so that individual rows of data can be easily deleted:
We can transfer rows from List Source to List Target and back again:
The data in List Target can be moved Up, Down, to the Top or Bottom using buttons:
We can also do an Ajax callback that submits the contents of the list by clicking Submit Data. When the window opens we see a message which is an alert being sent back that was computed server-side by Xbasic. It tells us that there were seven rows in the list, and shows us the data in the list that was submitted:
And as a last example we can click Add Record which will bring up a window that allows us to enter new data to be added to our list:
Let's take a closer look at some of these methods, starting with Add Sample Data to List. In our component builder we click on the Design tab, then click on the button called Add Sample Data to List. Then let's look at the click event under Javascript:
We see that it is calling a Javascript function called populateList:
Click on Javascript functions under Code to examine the populateList function. The first thing that this function does is get a pointer to the list object. We use the standard method of the UX Component called getControl, and LISTSOURCE is the name of the List Control to which we are trying to get a pointer:
We can see listSource is under Controls:
Once we have a pointer to the listSource we can then go and create an arbitrary array of JSON objects to populate the list. We see that the list has three columns: Firstname, Lastname and City. We also see the array of JSON data which is the sample data that we are using to populate our list:
Then we call the list's appendRows method passing in the sample data, and we also set focus to the first row. Since the row id's are zero based, using a setValue of zero will set focus to the first row:
Click on the Working Preview tab then click the Add Sample Data to List button. The sample data is automatically displayed and focus is given to the first row:
