Ignite UI API Reference

mobile.igListView

mobile.igListView_image

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

Related Topics

Dependencies

jquery-1.7.2.js
jquery.mobile-1.2.0.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.util.js

  • 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) {...}
        });

  • 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.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.

#