From HTML5 Builder
Jump to: navigation, search

The MList component is a dynamic list using the jQueryMobile library. This list can be filled with data either manually, through its Items property, or with a database connection.


Fill From a Datasource

You can fill an MList from a Datasource component using PHP code. Take the following function as an example:

function fillMList($sender, $params)
    // Get the items array from the MList (you cannot work with the property directly).
    $items = $this->MList1->Items;

    // Add all the item to the items array.
    // NOTE: items are associative arrays, see the documentation of the Items property.
	   while( ! $this->DataSource1->DataSet->EOF )
		      $items[] = array("Caption" => $this->DataSource1->DataSet->Fields["column_name"]);
        // NOTE: This example adds an item with the value of its caption field filled with the value
        // of the ‘column_name’ column from the DataSource.
        // See the documentation of the Items property for a list of available item fields.


    // Save the items array back to the property.
    $this->MList1->Items = $items;

You can call it from your Page’s OnBeforeShow event.

Get the Clicked Item

From JavaScript:

$("#MList1 li").on("click", function() {
    $clickedItemCaption = $(this).html();

Client-side Features

DOM Elements

The component generates the following client-side DOM elements:

  • Wrapper (HTMLDivElement). Full web browser support. Access it with $("#ComponentName_outer").get()[0].
    • List (HTMLUListElement). Full web browser support. Access it with: $("#ComponentName").get()[0].
      • List Item (HTMLLiElement). Full web browser support. Access it with: $("#ComponentName li").get(ListItemIndex)[0].

Client-side Events

Documented in the RPCL Reference.

Server-side Features

Properties, Methods and Events

Documented in the RPCL Reference.

Help Resources


Video Tutorials

Sample Applications

In the following folders inside the sample applications directory you will find projects covering this component:

  • jQueryMobile\basic. Showcase of several mobile components, including the MList in the mlist.php page.
  • Features\ClientStorage\SimpleList. How to work with the component from JavaScript.