Ignite UI™ API Documentation

mobile.igListView

The igListView is a jQuery control that provides list functionality in a mobile environment. The control features templating, filtering, sorting, grouping, load on demand and hierarchical navigation capabilities.

The igListView control extends the igList control and adds hierarchical functionalities.

The igListView control adheres to the jQuery Mobile approach of using markup-based initialization and configuration along with the standard jQuery initialization. For more information on the igListView control’s HTML data-* attributes see igListView Data Attribute Reference.

The following code snippet demonstrates how to initialize the igListView control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igListView control read, Using JavaScript Resources in IgniteUI and Styling and Theming IgniteUI.

Code Sample

<!doctype html>
<html>
<head>
    <!-- jQuery Mobile Styles -->
    <link rel="stylesheet" href="../content/jqm/jquery.mobile.structure.min.css" />
    <!-- jQuery Core -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <!-- jQuery Mobile Core -->
    <script type="text/javascript" src="js/jquery.mobile.js"><script>
    <!-- Infragistics mobile loader -->
    <script type="text/javascript" src="js/infragistics.mobile.loader.js"></script>
    <script type="text/javascript">
        var northwindEmployees = [
            { "ID": 1, "Name": "Davolio, Nancy", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/1.png", "Phone": "(206) 555-9857", "PhoneUrl": "tel:(206) 555-9857" },
            { "ID": 2, "Name": "Fuller, Andrew", "Title": "Vice President, Sales", "ImageUrl": "../content/images/nw/employees/2.png", "Phone": "(206) 555-9482", "PhoneUrl": "tel:(206) 555-9482" },
            { "ID": 3, "Name": "Leverling, Janet", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/3.png", "Phone": "(206) 555-3412", "PhoneUrl": "tel:(206) 555-3412" },
            { "ID": 4, "Name": "Peacock, Margaret", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/4.png", "Phone": "(206) 555-8122", "PhoneUrl": "tel:(206) 555-8122" },
            { "ID": 5, "Name": "Buchanan, Steven", "Title": "Sales Manager", "ImageUrl": "../content/images/nw/employees/5.png", "Phone": "(71) 555-4848", "PhoneUrl": "tel:(71) 555-4848" },
            { "ID": 6, "Name": "Suyama, Michael", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/6.png", "Phone": "(71) 555-7773", "PhoneUrl": "tel:(71) 555-7773" },
            { "ID": 7, "Name": "King, Robert", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/7.png", "Phone": "(71) 555-5598", "PhoneUrl": "tel:(71) 555-5598" },
            { "ID": 8, "Name": "Callahan, Laura", "Title": "Inside Sales Coordinator", "ImageUrl": "../content/images/nw/employees/8.png", "Phone": "(206) 555-1189", "PhoneUrl": "tel:(206) 555-1189" },
            { "ID": 9, "Name": "Dodsworth, Anne", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/9.png", "Phone": "(71) 555-4444", "PhoneUrl": "tel:(71) 555-4444" }
        ];
    </script>
    <script type="text/javascript">
        $.ig.loader({
            scriptPath: "js",
            cssPath: "css",
            resources: "igmList",
            theme: "ios"
        });
    </script>
</head>
<body>
    <ul id="contactsListView"
        data-role="iglistview"
        data-icon-mode="thumbnail"
        data-data-source="northwindEmployees"
        data-bindings-header-key="Name"
        data-bindings-primary-key="ID"
        data-bindings-text-key="Phone"
        data-bindings-image-url-key="ImageUrl">
    </ul>
</body>
</html>

Related Samples

childrenPopulated

Cancellable:: false

Event which is fired when children have been populated (Load on demand)
use args.owner to access the hierarchical list object
use args.parentitem to access the li element for the item that was populated
use args.id to get the data ID of the list item.

Code Sample

//Delegate
$(document).delegate(".selector", "iglistviewchildrenpopulated", function (evt, ui) {
    //return data-id attribute of the list item
    ui.id;
    //return LI element for the item that was populated
    ui.parentitem;
    //return reference to igListView
    ui.owner;
});
 
//Initialize
$(".selector").igListView({
    childrenPopulated: function(evt, ui) {...}
});

childrenPopulating

Cancellable:: true

Event which is fired when children are about to be populated (Load on demand)
use args.owner to access the hierarchical list object
use args.parentitem to access the li element for the item that's about to be populated
use args.id to get the data ID of the list item.

Code Sample

//Delegate
$(document).delegate(".selector", "iglistviewchildrenpopulating", function (evt, ui) {
    //return data-id attribute of the list item
    ui.id;
    //return LI element for the item that was populated
    ui.parentitem;
    //return reference to igListView
    ui.owner;
});
 
//Initialize
$(".selector").igListView({
    childrenPopulating: function(evt, ui) {...}
});

Show Details

dataBind

.dataBind( );
Data binds the hierarchical list. No child lists will be created or rendered by default, unless there is initialExpandDepth >= 0 set.
Code Sample

$(".selector").igListView("dataBind");
destroy

.destroy( );
Destroys the hierarchical list by recursively destroying all child lists.
Code Sample

$(".selector").igListView("destroy");
root

.root( );

Return Type:

object

Return Type Description:

jquery wrapped element of the root list.
Returns the element of the root list (igList).
Code Sample

var root = $(".selector").igListView("root");
rootWidget

.rootWidget( );

Return Type:

object

Return Type Description:

widget object of the root igList (not igListView).
Returns the widget object of the root list (igList).
Code Sample

var root = $(".selector").igListView("rootWidget");

Ignite UI for jQuery | API Reference

mobile.igListView

Code Sample

Related Samples

Related Topics

Dependencies

autoGenerateLayouts

Code Sample

childLayout

Code Sample

key

Code Sample

defaultChildrenDataProperty

Code Sample

initialDataBindDepth

Code Sample

initSelector

Code Sample

odata

Code Sample

pathSeparator

Code Sample

childrenPopulated

Code Sample

childrenPopulating

Code Sample

dataBind

Code Sample

destroy

Code Sample

root

Code Sample

rootWidget

Code Sample