Create the best Web experiences in browsers and devices with our user interface controls designed expressly for jQuery, ASP.NET MVC, HTML 5 and CSS 3. You’ll be building on a solid and proven foundation without any plug-ins or extensions, just real world best practices and the most forward-thinking, robust Web technology.

Infragistics NetAdvantage jQuery API Reference

mobile.igListViewSorting

mobile.igListViewSorting_image

The igListView control features built-in sorting functionality defined by presets. Presets can be auto generated or manually defined. Sorting works in concert with where you can apply grouping for individual preset or a global preset for the entire igListView control. Sorting can be configured to operate local to the page or remote on the server.

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 with sorting feature enabled.

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 Resouces in NetAdvantage for jQuery and Styling and Theming NetAdvantage for jQuery.

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.Sorting",
                    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"
                data-sorting="true" 
                data-sorting-type="local"
                data-sorting-sort-presets-label="Sorting Contact Name" 
                data-sorting-auto-generate-sort-presets="false"
                data-sorting-sort-state="0"
                data-sorting-presets='[ {"text":"Ascending","sortedFields":[ {"fieldName":"Name","direction":"asc"} ]}, {"text":"Descending", "sortedFields":[ {"fieldName":"Name","direction":"desc"} ]} ]'>
            </ul>
        </body>
        </html>

Related Samples

Related Topics

Dependencies

jquery-1.6.4.js
jquery.ui.core.js
ig.mobileui.list.js
ig.datasource.js
ig.ui.shared.js
ig.util.js

  • autoGenerateSortPresets

    Type:
    bool
    Default:
    true

    When true, and presets array is null, a preset will be generated for every binding.

    Code Sample

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

  • caseSensitive

    Type:
    bool
    Default:
    false

    Case sensitivity of the sorting.

    Code Sample

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

  • countTheme

    Type:
    string
    Default:
    c

    The swatch to apply to count bubbles in list dividers.

    Code Sample

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

  • customSortFunction

    Type:
    function
    Default:
    null

    Custom sort function accepting three parameters - the data to be sorted, an array of data source field definitions, and the direction to sort with (optional). The function should return the sorted data array.

    Code Sample

     
            var myCustomFunc = function(data, fields, direction) {
                function myCompareFunc(obj1, obj2) {
                    if (direction == "descending")
                    {
                        return obj2[fields[0].fieldName] - obj1[fields[0].fieldName];
                    }
                    return obj1[fields[0].fieldName] - obj2[fields[0].fieldName];
                }
                var result = data.sort(myCompareFunc);
                return result;
            }
            
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        customSortFunction: myCustomFunc
                    }
                ]
            });
            
            //Get
            var customSortFunction = $(".selector").igListViewSorting("option", "customSortFunction");

  • dividerTemplate

    Type:
    string
    Default:
    null

    IG style template that will be used to render list dividers. Renders with a data object containg 'Count' and 'Name' key/value pairs.

    Code Sample

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        dividerTemplate: "<div>${Name} - ${Count} {{if ${Count} == 1}}Item{{else}}Items{{/if}}</div>"
                    }
                ]
            });
            
            //Get
            var dividerTemplate = $(".selector").igListViewSorting("option", "dividerTemplate");

  • groupComparerFunction

    Type:
    function
    Default:
    null

    Specifies a custom group by function, which accepts the first and the second value to compare and returns bool if they are in the same group.

    Code Sample

     
            //Logic to sort by first letter
            function byFirstLetter(val1, val2) {
                if (val1 === null && val2 === null)
                    return true;
                if (val1 === null || val2 === null)
                    return false;
                return typeof val1 === "string" &&
            typeof val2 === "string" &&
            val1.toUpperCase().charCodeAt(0) === val2.toUpperCase().charCodeAt(0);
            }
            
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        groupComparerFunction: byFirstLetter
                    }
                ]
            });
            
            //Get
            var groupComparerFunction = $(".selector").igListViewSorting("option", "groupComparerFunction");

  • groupNameFunction

    Type:
    function
    Default:
    null

    Specifies a custom group name function, which accepts a value of the group and returns the name that should be displayed.

    Code Sample

     
            //Logic determines group names
            function returnFirstLetter(val) {
                if (!val || val.length === 0)
                    return "Empty";
                return val.toUpperCase()[0];
            }
            
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        groupNameFunction: returnFirstLetter
                    }
                ]
            });
            
            //Get
            var groupNameFunction = $(".selector").igListViewSorting("option", "groupNameFunction");

  • listDividerTheme

    Type:
    string
    Default:
    b

    The swatch to apply to list dividers (from grouping).

    Code Sample

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

  • presets

    Type:
    array
    Default:
    []
    Elements Type:
    object

    A list of preset sorting options.

    Code Sample

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        presets: [
                            {
                                text: "Category",
                                showGrouping: false,
                                sortedFields: [
                                    {
                                        fieldName: "CategoryName",
                                        direction: "asc"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewSorting("option", "presets");

    • groupComparerFunction

      Type:
      function
      Default:
      null

      Specifies a custom group by function, which accepts the first and the second value to compare and returns bool if they are in the same group.

      Code Sample

       
            //Logic to sort by first letter
            function byFirstLetter(val1, val2) {
                if (val1 === null && val2 === null)
                    return true;
                if (val1 === null || val2 === null)
                    return false;
                return typeof val1 === "string" &&
                typeof val2 === "string" &&
                val1.toUpperCase().charCodeAt(0) === val2.toUpperCase().charCodeAt(0);
            }
            
            //Logic determines group names
            function returnFirstLetter(val) {
                if (!val || val.length === 0)
                    return "Empty";
                return val.toUpperCase()[0];
            }
            
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        presets: [
                            {
                                text: "Category",
                                showGrouping: false,
                                groupComparerFunction: byFirstLetter,
                                groupNameFunction: returnFirstLetter,
                                sortedFields: [
                                    {
                                        fieldName: "CategoryName",
                                        direction: "asc"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewSorting("option", "presets");

    • groupNameFunction

      Type:
      function
      Default:
      null

      Specifies a custom group name functiona value a returns the group name that should be displayed.

      Code Sample

       
            //Logic to sort by first letter
            function byFirstLetter(val1, val2) {
                if (val1 === null && val2 === null)
                    return true;
                if (val1 === null || val2 === null)
                    return false;
                return typeof val1 === "string" &&
                typeof val2 === "string" &&
                val1.toUpperCase().charCodeAt(0) === val2.toUpperCase().charCodeAt(0);
            }
            
            //Logic determines group names
            function returnFirstLetter(val) {
                if (!val || val.length === 0)
                    return "Empty";
                return val.toUpperCase()[0];
            }
            
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        presets: [
                            {
                                text: "Category",
                                showGrouping: false,
                                groupComparerFunction: byFirstLetter,
                                groupNameFunction: returnFirstLetter,
                                sortedFields: [
                                    {
                                        fieldName: "CategoryName",
                                        direction: "asc"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewSorting("option", "presets");

    • showGrouping

      Type:
      bool
      Default:
      false

      Whether the first sorted field will have groups inserted into the list for this preset.

      Code Sample

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        presets: [
                            {
                                text: "Category",
                                showGrouping: false,
                                sortedFields: [
                                    {
                                        fieldName: "CategoryName",
                                        direction: "asc"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewSorting("option", "presets");

    • sortedFields

      Type:
      array
      Default:
      []
      Elements Type:
      object

      A list of key/value pairs (fieldName and direction) representing the sorted fields and their direction.

      Code Sample

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        presets: [
                            {
                                text: "Category",
                                showGrouping: false,
                                sortedFields: [
                                    {
                                        fieldName: "CategoryName",
                                        direction: "asc"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewSorting("option", "presets");

      • direction

        Type:
        enumeration
        Default:
        ""

        Sorting direction .

        Members

        • none
        • Type:string
        • asc
        • Type:string
        • desc
        • Type:string

        Code Sample

         
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        presets: [
                            {
                                text: "Category",
                                showGrouping: false,
                                sortedFields: [
                                    {
                                        fieldName: "CategoryName",
                                        direction: "asc"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewSorting("option", "presets");

      • fieldName

        Type:
        string
        Default:
        ""

        The name of the field to sort by.

        Code Sample

         
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        presets: [
                            {
                                text: "Category",
                                showGrouping: false,
                                sortedFields: [
                                    {
                                        fieldName: "CategoryName",
                                        direction: "asc"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewSorting("option", "presets");

    • text

      Type:
      string
      Default:
      ""

      The text to display in the sort preset.

      Code Sample

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        presets: [
                            {
                                text: "Category",
                                showGrouping: false,
                                sortedFields: [
                                    {
                                        fieldName: "CategoryName",
                                        direction: "asc"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewSorting("option", "presets");

  • presetTheme

    Type:
    string
    Default:
    c

    The swatch to apply to the sort preset.

    Code Sample

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

  • showGrouping

    Type:
    bool
    Default:
    false

    Whether the first sorted field will have groups inserted into the list.

    Code Sample

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

  • sortedFields

    Type:
    array
    Default:
    []
    Elements Type:
    object

    A list of key/value pairs (fieldName and direction) representing the sorted fields and their direction.

    Code Sample

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        sortedFields: [
                            {
                                fieldName: "Name",
                                direction: "asc"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var sortedFields = $(".selector").igListViewSorting("option", "sortedFields");

    • direction

      Type:
      enumeration
      Default:
      ""

      Sorting direction .

      Members

      • none
      • Type:string
      • asc
      • Type:string
      • desc
      • Type:string

      Code Sample

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        sortedFields: [
                            {
                                fieldName: "Name",
                                direction: "asc"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var sortedFields = $(".selector").igListViewSorting("option", "sortedFields");

    • fieldName

      Type:
      string
      Default:
      ""

      The name of the field to sort by.

      Code Sample

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        sortedFields: [
                            {
                                fieldName: "Name",
                                direction: "asc"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var sortedFields = $(".selector").igListViewSorting("option", "sortedFields");

  • sortPresetsLabel

    Type:
    string
    Default:
    null

    The text that is displayed above the sort presets.

    Code Sample

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

  • sortState

    Type:
    string
    Default:
    default

    The number of the preset to start with selected; "default" for default (no preset chosen). Set to "custom" when sort through api.

    Code Sample

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

  • sortUrlKey

    Type:
    string
    Default:
    null

    URL param name which specifies how sorting expressions will be encoded in the URL. Uses OData conventions. ex: ?sort(col1)=asc.

    Code Sample

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

  • sortUrlKeyAscValue

    Type:
    string
    Default:
    null

    URL param value for ascending type of sorting. Uses OData conventions. Example: ?sort(col1)=asc.

    Code Sample

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

  • sortUrlKeyDescValue

    Type:
    string
    Default:
    null

    URL param value for descending type of sorting. Uses OData conventions.

    Code Sample

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

  • type

    Type:
    enumeration
    Default:
    null

    Defines local or remote sorting.

    Members

    • remote
    • Type:string
    • local
    • Type:string

    Code Sample

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

For more information on how to interact with the NetAdvantage for jQuery controls events, refer to
Using Events in NetAdvantage for jQuery

Show Details

  • presetChanged

    Cancellable:
    false

    Event fired after the preset has been changed and the data rerendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igListViewSorting.
    Use ui.owner.list to get reference to igList.
    Use ui.state to get new sortState.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistviewsortingpresetchanged", function (evt, ui) {
                //return reference to igListViewSorting object
                ui.owner;
                //return reference to igList object
                ui.owner.list;
                //return the new sortState setting
                ui.state;
            });

            //Initialize
            $(".selector").igListView({
                features: [{
                    name: "Sorting",
                    presetChanged: function (evt, ui) {...}
                }]
            });

  • presetChanging

    Cancellable:
    true

    Event fired before sort preset is changed in the filter.
    Return false in order to cancel changing of sort preset.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igListViewSorting.
    Use ui.owner.list to get reference to igList.
    Use ui.state to get new sortState.

    Code Sample

     
            //Delegate
            $(document).delegate(".selector", "iglistviewsortingpresetchanging", function (evt, ui) {
                //return reference to igListViewSorting object
                ui.owner;
                //return reference to igList object
                ui.owner.list;
                //return the new sortState setting
                ui.state;
            });

            //Initialize
            $(".selector").igListView({
                features: [{
                    name: "Sorting",
                    presetChanging: function (evt, ui) {...}
                }]
            });

  • destroy

    mobile.igListViewSorting( "destroy" );

    Destroys the igListViewSorting feature by removing all elements in the tray.

    Code Sample

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

  • group

    mobile.igListViewSorting( "group", fields:object, defaultDirection:object, trayText:string, groupComparerFunction:function, groupNameFunction:function );

    Sorts and groups the list, optionally giving custom group comparer and name functions
    .

    • fields
    • Type:object
    • a list of sorted field definitions.
    • defaultDirection
    • Type:object
    • Whether to assume ascending or descending for each sorted field if no direction is defined on it.
    • trayText
    • Type:string
    • The text to put in the search tray footer (if it exists) .
    • groupComparerFunction
    • Type:function
    • A function (or function name) to use as a custom group comparer function.
    • groupNameFunction
    • Type:function
    • A function (or function name) to use as a custom group name function.

    Code Sample

     
            $(".selector").igListViewSorting("group", [{fieldName: "CategoryName", direction: "asc"}], "asc", "Grouped by 'CategoryName'");

  • sort

    mobile.igListViewSorting( "sort", fields:object, defaultDirection:object, trayText:string );

    Sorts the list with optional default direction and text to insert in the search tray footer
    .

    • fields
    • Type:object
    • a list of sorted field definitions.
    • defaultDirection
    • Type:object
    • Whether to assume ascending or descending for each sorted field if no direction is defined on it.
    • trayText
    • Type:string
    • The text to put in the search tray footer (if it exists).

    Code Sample

     
            $(".selector").igListViewSorting("sort", [{fieldName: "CategoryName", direction: "asc"}], "asc", "Sorted by 'CategoryName'");

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

  • ui-corner-bottom

  • ui-corner-all

  • ui-corner-top

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

  • ui-btn-inline ui-iglist-preset

  • ui-iglist-tray-footer-item ig-tray-sort-preset

  • ui-iglist-preset-hidden

  • ui-iglist-preset-selected

  • ui-iglist-tray-footer-sep

  • ui-iglist-sort-presets