Ignite UI API Reference

mobile.igList

mobile.igList_image

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

The igList control represents a flat list and serves as a base for igListView control.

The following code snippet demonstrates how to initialize the igList 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 igList 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"
                });
                $.ig.loader(function() {
                    $("#igList").igList({
                        iconMode: "thumbnail",
                        dataSource: northwindEmployees,
                        bindings: {
                            headerKey: "Name",
                            primaryKey: "ID",
                            textKey: "Phone",
                            imageUrlKey: "ImageUrl"
                        }
                    });
                });
            </script>
        </head>
        <body>
        <div id="igList"></div>
        </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

  • bindings

    Type:
    object
    Default:
    {}

    Specifies the data binding properties and keys.

    Code Sample

     
            //Initialize
            $(".selector").igListView({
                dataSource: northwindEmployees,
                bindings: {
                    countKey: "count",
                    countXPath: "@count",
                    descriptionKey: "description",
                    descriptionXPath: "@description",
                    detailsTitleKey: "title",
                    detailsTitleXPath: "@title",
                    headerKey: "header",
                    headerXPath: "@header",
                    imageUrlKey: "imageurl",
                    imageUrlXPath: "@imageurl",
                    isDividerKey: "isdivider",
                    navigateUrlKey: "navigateurl",
                    navigateUrlXPath: "@navigateurl",
                    primaryKey: "ID",
                    textKey: "text",
                    textXPath: "@text",
                    customBindings: [
                        {
                            fieldName: "CategoryName",
                            dataType: "string"
                        }
                    ]
                }
            });
            
            //Get
            var bindings = $(".selector").igListView("option", "bindings");

    • countKey

      Type:
      string
      Default:
      count

      Specifies the name of the data source property the value of which would be used as a count of the node.

    • countXPath

      Type:
      string
      Default:
      @count

      Specifies the XPath to the node count. Used in client-only binding directly to XML.

    • customBindings

      Type:
      array
      Default:
      []
      Elements Type:
      object

      A list of objects of custom bindings. This will bring in extra data to be used in item or details templates.
      Each item should be an object with key/value pairs of 'fieldName', 'dataType', and 'format'.

    • descriptionKey

      Type:
      string
      Default:
      description

      Specifies the name of the data source property the value of which would be used as a count of the node.

    • descriptionXPath

      Type:
      string
      Default:
      @description

      Specifies the XPath to the list item description Used in client-only binding directly to XML.

    • detailsTitleKey

      Type:
      string
      Default:
      title

      Specifies the name of the data source property the value of which would be the Title of a sub page for a node.

    • detailsTitleXPath

      Type:
      string
      Default:
      @title

      Specifies the XPath to the title attribute/node. Used in client-only binding directly to XML.

    • headerKey

      Type:
      string
      Default:
      header

      Specifies the name of the data source property the value of which would be used as a count of the node.

    • headerXPath

      Type:
      string
      Default:
      @header

      Specifies the XPath to the list item header. Used in client-only binding directly to XML.

    • imageUrlKey

      Type:
      string
      Default:
      imageurl

      Specifies the name of the data source property the value of which would be used as a URL
      for the node image.

    • imageUrlXPath

      Type:
      string
      Default:
      @imageurl

      Specifies the XPath to the image URL attribute/node. Used in client-only binding directly to XML.

    • isDividerKey

      Type:
      string
      Default:
      isdivider

      Specifies the name of the data source property which will be used to determine if an item represents a read-only list divider.

    • navigateUrlKey

      Type:
      string
      Default:
      navigateurl

      Specifies the name of the data source property the value of which would be used as an href
      attribute for the node anchor.

    • navigateUrlXPath

      Type:
      string
      Default:
      @navigateurl

      Specifies the XPath to the navigate URL attribute/node. Used in client-only binding directly to XML.

    • primaryKey

      Type:
      string
      Default:
      null

      Specifies the name of the data source property the value of which is the primary key attribute
      for the data. This property is used when load on demand is enabled and if specified the node paths
      would be generated using primary keys instead of indices.

    • textKey

      Type:
      string
      Default:
      text

      Specifies the name of the data source property the value of which would be the node text.

    • textXPath

      Type:
      string
      Default:
      @text

      Specifies the XPath to the text attribute/node. Used in client-only binding directly to XML.

  • countTheme

    Type:
    string
    Default:
    c

    The swatch to apply to count bubbles (if present).

    Code Sample

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

  • createSubPagesOnInit

    Type:
    bool
    Default:
    false

    If this option is set to true, sub pages for local data are created the first time the list view is bound.

    Code Sample

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

  • dataSource

    Type:
    object
    Default:
    null

    Can be any valid data source accepted by $.ig.DataSource, or an instance of an $.ig.DataSource itself.

    Code Sample

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

  • dataSourceType

    Type:
    string
    Default:
    null

    Explicitly set data source type (such as "json"). Please refer to the documentation of $.ig.DataSource and its type property.

    Code Sample

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

  • dataSourceUrl

    Type:
    string
    Default:
    null

    Specifies a remote URL as a data source, from which data will be retrieved using an AJAX call ($.ajax).

    Code Sample

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

  • enableUtcDates

    Type:
    bool
    Default:
    false

    Enables formatting of the dates as UTC. Note that this may be desirable when the dates are coming from a backend, encoded as UTC. Otherwise, if dates are created on the client (in the browser), most probably keeping enableUTCDates to false is the desired behavior.

  • features

    Type:
    object
    Default:
    []

    A list of list features definitions: sorting, filtering, etc. Each feature goes with its separate options that are documented for the feature accordingly.

    Code Sample

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting"
                    }
                ]
            });
            
            //Get
            var features = $(".selector").igListView("option", "features");

  • imageMode

    Type:
    enumeration
    Default:
    thumbnail

    Whether to show no image, an icon, or a thumbnail.

    Members

    • none
    • Type:string
    • icon
    • Type:string
    • thumbnail
    • Type:string

    Code Sample

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

  • inset

    Type:
    bool
    Default:
    false

    Whether the list view should appear inset in the page.

    Code Sample

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

  • itemDetailsTemplate

    Type:
    string
    Default:
    null

    IG templating style template that will be used to render details about list items in a sub page.

    Code Sample

     
            //Initialize
            $(".selector").igListView({
                itemDetailsTemplate: "<div><h2>${Title}</h2><p>${Description}</p></div>"
            });
            
            //Get
            var itemDetailsTemplate = $(".selector").igListView("option", "itemDetailsTemplate");

  • itemHeaderSize

    Type:
    enumeration
    Default:
    h2

    Whether to show a heading tag in the LI. Can be H1 to H6 depending upon value.

    Code Sample

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

  • itemTemplate

    Type:
    string
    Default:
    null

    IG templating style template that will be used to render list items.

    Code Sample

     
            //Initialize
            $(".selector").igListView({
                itemTemplate: "<div><h2>${Name}</h2><p>${Phone}</p></div>"
            });
            
            //Get
            var itemTemplate = $(".selector").igListView("option", "itemTemplate");

  • itemTheme

    Type:
    string
    Default:
    null

    The swatch applied to list items. If null, it is determined from the parent(s) or defaults to 'c'.

    Code Sample

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

  • listDividerTheme

    Type:
    string
    Default:
    b

    The swatch to apply to list dividers.

    Code Sample

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

  • localSchemaTransform

    Type:
    bool
    Default:
    true

    If this option is set to false, the data to which the list is bound will be used "as is" with no additional transformations based on bindings.

    Code Sample

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

  • numberedList

    Type:
    bool
    Default:
    false

    Indicates if an ol or ul should be used as the main element for a databound list.

    Code Sample

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

  • responseDataKey

    Type:
    string
    Default:
    null

    See $.ig.DataSource. This is basically the property in the responses where data records are held, if the response is wrapped.

    Code Sample

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

  • responseDataType

    Type:
    string
    Default:
    null

    Explicitly set response type (such as "json"). Please refer to the documentation of $.ig.DataSource and its type property.

  • responseTotalRecCountKey

    Type:
    string
    Default:
    null

    See $.ig.DataSource. property in the response specifying the total number of records on the server.

    Code Sample

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

  • searchFooterTheme

    Type:
    string
    Default:
    d

    The swatch to apply to the search (filter/sort) tray footer.

    Code Sample

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

  • searchTheme

    Type:
    string
    Default:
    c

    The swatch to apply to the search (filter/sort) tray.

    Code Sample

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

  • searchTrayExpandLabel

    Type:
    string
    Default:
    null

    The text displayed in the search tray footer when it is collapsed and all the states are default.
    If null, uses $.ig.mobileListView.locale.searchTrayExpandLabel.

    Code Sample

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

  • showCount

    Type:
    bool
    Default:
    true

    Whether to show a count bubble.

    Code Sample

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

  • subPageHeaderTheme

    Type:
    string
    Default:
    b

    The swatch applied to the headers of sub pages.

    Code Sample

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

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

  • dataBinding

    Cancellable:
    true

    Event fired before data binding takes place.
    Return false in order to cancel data binding.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igList.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistdatabinding", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
            });

            //Initialize
            $(".selector").igListView({
                dataBinding : function (evt, ui) {...}
            });

  • dataBound

    Cancellable:
    false

    Event fired after data binding is complete.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igList.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistdatabound", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
            });

            //Initialize
            $(".selector").igListView({
                dataBound : function (evt, ui) {...}
            });

  • dataRendered

    Cancellable:
    false

    Event fired before after the list is completely rendered.
    Use ui.owner to get reference to igList.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistdatarendered", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
            });

            //Initialize
            $(".selector").igListView({
                dataRendered : function (evt, ui) {...}
            });

  • dataRendering

    Cancellable:
    true

    Event fired before cleaning up the UL/OL and rendering new items.
    Use ui.owner to get reference to igList.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistdatarendering", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
            });

            //Initialize
            $(".selector").igListView({
                dataRendering : function (evt, ui) {...}
            });

  • footerRendered

    Cancellable:
    false

    Event fired after list view footer has been rendered.
    Use ui.owner to get reference to igList.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistfooterrendered", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
            });

            //Initialize
            $(".selector").igListView({
                footerRendered : function (evt, ui) {...}
            });

  • footerRendering

    Cancellable:
    true

    Event fired before footer is rendered to the list. Use to add contents to footer.
    Use ui.owner to get reference to igList.
    Use ui.footerContents to get reference to the footerContents (initially empty).

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistfooterrendering", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //return reference to footer contents
                ui.footerContents;
            });

            //Initialize
            $(".selector").igListView({
                footerRendering : function (evt, ui) {...}
            });

  • itemRendered

    Cancellable:
    false

    Event fired after html-string which represents list item was generated.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igList.
    Use ui.item to get reference to list item defined by dataSource.
    Use ui.index to get the index of item.
    Use ui.bindings to get reference to bindings used by rendering.
    Use ui.html to get the html of list item. That member can be modified and custom value will be used instead of original html.

  • itemRendering

    Cancellable:
    true

    Event fired before new list item is rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igList.
    Use ui.item to get reference to list item defined by dataSource. Members of that object can be modified and rendering will use custom values.
    Use ui.index to get the index of item.
    Use ui.bindings to get reference to bindings used by rendering.

  • itemsRendered

    Cancellable:
    false

    Event fired after list items have been created and added to the DOM.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igList.
    Use ui.hasSubPages to get boolean indicating if any list item has sub pages.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistitemsrendered", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //return boolean indicating if any list item has sub pages
                ui.hasSubPages;
            });

            //Initialize
            $(".selector").igListView({
                itemsRendered : function (evt, ui) {...}
            });

  • itemsRendering

    Cancellable:
    true

    Event fired before new list items are rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igList.
    Use ui.items to get reference to string representing html that will be rendered at end.
    Use ui.index to get/set the index in the data view where rendering should begin.
    Use ui.dataView to get reference to the data view that is being used for rendering.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistitemsrendering", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //return reference to string representing html that will be rendered at end
                ui.items;
                //get or set the index in the data view where rendering should begin
                ui.index;
                //return reference to the data view that is being used for rendering
                ui.dataView;
            });

            //Initialize
            $(".selector").igListView({
                itemsRendering: function (evt, ui) {...}
            });

  • renderedTray

    Cancellable:
    false

    Event fired after the search tray is rendered for the list.
    Use ui.owner to get reference to igList.
    Use ui.tray to get reference to the actual tray .
    Use ui.needTray to set whether a tray is needed. 1 for persestent tray. 2 for tray with footer to collapse/expand
    Use ui.css to get/set the reference to the css class that will be assigned to the tray once rendered.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistrenderedtray", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //return reference to the actual tray
                ui.tray;
                //set whether a tray is needed
                // 1 for persistent tray
                // 2 for tray with footer to collapse/expand
                ui.needTray;
                // get or set the reference to the css class that will be assigned to the tray once rendered
                ui.css;
            });

            //Initialize
            $(".selector").igListView({
                renderedTray: function (evt, ui) {...}
            });

  • renderedTrayFooterBar

    Cancellable:
    false

    Event fired after the search tray footer bar is rendered for the list.
    Use ui.owner to get reference to igList.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistrenderedtrayfooterbar", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
            });

            //Initialize
            $(".selector").igListView({
                renderedTrayFooterBar: function (evt, ui) {...}
            });

  • renderingTray

    Cancellable:
    true

    Event fired before the search tray is rendered for the list.
    Use ui.owner to get reference to igList.
    Use ui.tray to get reference to the actual tray (null initially and needs to be set).
    Use ui.needTray to set whether a tray is needed. 1 for persestent tray. 2 for tray with footer to collapse/expand
    Use ui.css to get/set the reference to the css class that will be assigned to the tray once rendered.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistrenderingtray", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //return reference to the actual tray
                ui.tray;
                //set whether a tray is needed
                // 1 for persistent tray
                // 2 for tray with footer to collapse/expand
                ui.needTray;
                // get or set the reference to the css class that will be assigned to the tray once rendered
                ui.css;
            });

            //Initialize
            $(".selector").igListView({
                renderingTray: function (evt, ui) {...}
            });

  • renderingTrayFooterBar

    Cancellable:
    true

    Event fired before the search tray footer bar is rendered for the list.
    Use ui.owner to get reference to igList.
    Use ui.trayFooter to get reference to the the div that will be the tray footer bar.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistrenderingtrayfooterbar", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //return reference to the div that will be the tray footer bar
                ui.trayFooter;
            });

            //Initialize
            $(".selector").igListView({
                renderingTrayFooterBar: function (evt, ui) {...}
            });

  • requestError

    Cancellable:
    false

    Event fired if there is an error in the request, when the list is doing a remote operation,
    such as data binding, load on demand, sorting, etc.
    use ui.owner to get a reference to the igList
    use ui.message to get the error message coming from the server.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistrequesterror", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //return error message coming from the server
                ui.message;
            });

            //Initialize
            $(".selector").igListView({
                requestError: function (evt, ui) {...}
            });

  • schemaGenerated

    Cancellable:
    false

    Event fired after $.ig.DataSource schema has been generated, in case it needs to be modified.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igList.
    Use ui.schema to get reference to data source schema.
    Use ui.dataSource to get reference to data source.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistschemagenerated", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //return reference to the data source schema
                ui.schema;
                //return reference to the data source
                ui.dataSource;
            });

            //Initialize
            $(".selector").igListView({
                schemaGenerated: function (evt, ui) {...}
            });

  • subPageCreated

    Cancellable:
    false

    Event fired after page when child list and/or details is created.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igList that made a sub page.
    Use ui.subPage to get refrerence to the new 'Page' object that will be navigated to.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistsubpagecreated", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //return reference to the new 'Page' object that will be navigated to
                ui.subPage;
            });

            //Initialize
            $(".selector").igListView({
                subPageCreated: function (evt, ui) {...}
            });

  • subPageCreating

    Cancellable:
    true

    Event fired before page for child list and/or details is created.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igList that is making a sub page.
    Use ui.subPageTitle to get/set the title that will be displayed in the sub page.
    Use ui.extraContents to get/set any extra contents that should be displayed after details and child list.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistsubpagecreating", function (evt, ui) {
                //return reference to igListView object
                ui.owner;
                //get or set the title that will be displayed in the sub page
                ui.subPageTitle;
                //get or set any extra contents that should be displayed after details and child list
                ui.extraContents;
            });

            //Initialize
            $(".selector").igListView({
                subPageCreating: function (evt, ui) {...}
            });

  • container

    .container( );
    Return Type:
    domelement

    Returns the DIV that is the topmost container of the list widget.

    Code Sample

     
      var container = $(".selector").igListView("container");

  • dataBind

    .dataBind( );

    Data binds the list.

    Code Sample

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

  • destroy

    .destroy( );

    Destroys the list by removing attributes and css class from the element, destroying features, and emptying the list element.

    Code Sample

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

  • toggleSearchArea

    .toggleSearchArea( );

    This will toggle the visibility of the search tray (if there is one), by triggering a click on it's footer.

    Code Sample

     $(".selector").igListView("toggleSearchArea");

  • ui-listview

    Class assigned to the list element holding the items.

  • ui-li ui-btn ui-btn-up-{0}

    Class assigned to a list item element.

  • ui-li-count ui-btn-up-{0} ui-btn-corner-all

    Class assigned to count bubbles in list items.

  • ui-iglist-details

    The class to apply to the container of the item details template.

  • ig-listview

    Class assigned to the main element indicating its an igList.

  • ui-li-icon ui-li-thumb

    Class assigned to image element in a list item when it is an icon.

  • ui-li-thumb

    Class assigned to image element in a list item when it is a thumbnail.

  • ui-listview-inset ui-corner-all ui-shadow

    Class assigned to the list element when the list is inset.

  • ui-listview-filter-inset

    Class assigned to the search area form element when the list is inset.

  • ui-listview-filter-inset

    Class assigned to the div holding search options when the list is inset.

  • ui-iglist-tray-footer-inset

    Class assigned to search area footer when the list is inset.

  • ui-li-last

    The classes applied to the last li in a non-inset list.

  • ui-li-has-count

    Class assigned to a list item element when it has a count bubble.

  • ui-li-has-icon

    Class assigned to a list item element when it has an icon image.

  • ui-li-has-thumb

    Class assigned to a list item element when it has a thumbnail image.

  • ui-btn-icon-right ui-li-has-arrow

    Class assigned to a list item element when it has an icon to the right (a child or url).

  • ui-li ui-li-divider ui-btn ui-bar-{0} ui-li-has-count

    The classes applied to divider items. {0} is replaced by listDividerTheme.

  • ui-li ui-li-static ui-body-{0}

    Class assigned to a list item element when it is read only.

  • ui-listview-filter ui-bar-{0}

    Class assigned to the form element holding the search area. {0} is replaced by searchTheme.

  • ui-iglist-tray

    Class assigned to the div in the search area holding presets and input for keyword search.

  • ui-iglist-tray-collapse ui-bar-{0}

    Class assigned to the collapse area of the search tray. Holds a collapse button.

  • ui-iglist-tray-collapsed

    Class assigned to the search area when it is collapsed.

  • ui-icon ui-icon-arrow-u

    Class assigned to the icon to collapse the search tray.

  • ui-iglist-tray-collapse-open

    Class assigned to the collapse area of the search tray when the tray is open.

  • ui-icon ui-icon-arrow-d ui-iglist-tray-footer-empty-icon

    Class assigned to the icon to expand the search tray.

  • ui-iglist-tray-footer-empty

    Class assigned to element holding text in the footer that is displayed when no sort/filter conditions are applied.

  • ui-iglist-tray-footer ui-bar-{0}

    Class assigned to footer element of the search tray. Displays text describing search conditions.<br/> {0} is replaced by searchFooterTheme.

  • ui-iglist-tray-footer-collapsed

    Class assigned to footer element of the search tray when the tray is collapsed.

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

#