Ignite UI™ API Documentation

mobile.igListView

Overview
Options
Events
Methods
Theming

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

autoGenerateLayouts

Type:: bool
Default:: false

If true, will autogenerate all layouts assuming default values for "key".

Code Sample

 
        //Initialize
        $(".selector").igListView({
            autoGenerateLayouts: true
        });
        
        //Get
        var autoLayouts = $(".selector").igListView("option", "autoGenerateLayouts");

childLayout

Type:: object
Default:: {}

Object defning the options for a child list. All options that are applicable to a flat list are also applicable here.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                childLayout: {
                    key: "Products"
                }
            });
            
            //Get
            var autoLayouts = $(".selector").igListView("option", "childLayout");

key

Type:: string
Default:: null

Specifies the columnLayout key. This can be the property that holds the data records for the child layout.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                childLayout: {
                    key: "Products"
                }
            });
            
            //Get
            var autoLayouts = $(".selector").igListView("option", "childLayout");

defaultChildrenDataProperty

Type:: string
Default:: "Children"

Specifies the default property in the response where children will be located.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                defaultChildrenDataProperty : "Products"
            });
            
            //Get
            var childrenProperty = $(".selector").igListView("option", "defaultChildrenDataProperty");

initialDataBindDepth

Type:: number
Default:: -1

Only the first level will be data-bound initially. Also serves as "render" depth, meaning that depending on this prop, the list will.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                initialDataBindDepth : -1
            });
            
            //Get
            var bindDepth = $(".selector").igListView("option", "initialDataBindDepth");

initSelector

Type:: string
Default:: ":jqmData(role=iglistview)"

The selector to use by default to find html elements that should be transformed into this widget.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                initSelector: ":jqmdata(role=iglistview)"
            });
            
            //Get
            var initSelector = $(".selector").igListView("option", "initSelector");

odata

Type:: bool
Default:: false

If true, encodes all requests using OData conventions and the $expand syntax.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                odata: "true"
            });
            
            //Get
            var odata = $(".selector").igListView("option", "odata");

pathSeparator

Type:: string
Default:: "/"

Specifies the delimiter for constructing paths , for hierarchical lookup of data.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                pathSeparator: "/"
            });
            
            //Get
            var pathSeparator = $(".selector").igListView("option", "pathSeparator");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

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");
      
```

The current widget has no css classes.

Ignite UI | Samples

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