Ignite UI™ API Documentation

mobile.igListViewSorting

Overview
Options
Events
Methods
Theming

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

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

groupingSettings

Type:: object
Default:: {}

A group of setting that controls how grouping appears for default fields and all presets.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        groupingSettings: {
                            enableCollapsibleDividers: true,
                            collapsedCueText: "Collapsed Group: {0}",
                            collapsedIcon: "arrow-r",
                            expandedCueText: "Expanded Group: {0}",
                            expandedIcon: "arrow-l",
                            initialExpandedState: "collapsed",
                            showCountBubble: true
                        }
                    }
                ]
            });
          
            //Get
            var groupingSettings = $(".selector").igListViewSorting("option", "groupingSettings");

collapsedCueText

Type:: string
Default:: null

The string to use as the cue text when the group is collapsed. {0} is replaced by the group name.

Code Sample

                     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        groupingSettings: {
                            collapsedCueText: "Collapsed Group: {0}"
                        }
                    }
                ]
            });
          
            //Get
            var groupingSettings = $(".selector").igListViewSorting("option", "groupingSettings");
            var collapsedCueText = groupingSettings.collapsedCueText;

collapsedIcon

Type:: string
Default:: "plus"

The icon to use for collapsible group dividers when it is collapsed.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        groupingSettings: {
                            collapsedIcon: "arrow-r"
                        }
                    }
                ]
            });
          
            //Get
            var groupingSettings = $(".selector").igListViewSorting("option", "groupingSettings");
            var collapsedIcon = groupingSettings.collapsedIcon;

enableCollapsibleDividers

Type:: bool
Default:: false

Whether group dividers should be rendered as collapsible.

Code Sample

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

expandedCueText

Type:: string
Default:: null

The string to use as the cue text when the group is expanded. {0} is replaced by the group name.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        groupingSettings: {
                            expandedCueText: "Expanded Group: {0}"
                        }
                    }
                ]
            });
          
            //Get
            var groupingSettings = $(".selector").igListViewSorting("option", "groupingSettings");
            var expandedCueText = groupingSettings.expandedCueText;

expandedIcon

Type:: string
Default:: "minus"

The icon to use for collapsible group dividers when it is expanded.

Code Sample

 
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Sorting",
                        groupingSettings: {
                            expandedIcon: "arrow-l"
                        }
                    }
                ]
            });
          
            //Get
            var groupingSettings = $(".selector").igListViewSorting("option", "groupingSettings");
            var expandedIcon = groupingSettings.expandedIcon;

initialExpandedState

Type:: enumeration
Default:: expanded

Whether the group dividers will show initially as expanded or collapsed.

Members

collapsed
Type:string
expanded
Type:string

Code Sample

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

showCountBubble

Type:: bool
Default:: true

When dividers are not templated, whether to show the count bubble.

Code Sample

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

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 for the given field.

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 for the given field.

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

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

Show Details

destroy

.destroy( );
Destroys the igListViewSorting feature by removing all elements in the tray.
Code Sample
```
 
      $(".selector").igListViewSorting("destroy");
      
```
group

.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
- An array of sorted field definitions where each object is a key/value pair expecting 'fieldName' and optional 'direction'.
- 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

.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
- An array of sorted field definitions where each object is a key/value pair expecting 'fieldName' and optional 'direction'.
- 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-has-count

The class to apply to the group divider when it is collapsible.
ui-li-count ui-btn-up-{0} ui-btn-corner-all ui-btn

The classes applied to the count bubble in dividers. {0} is replaced by countTheme.
ui-iglist-collapsible

The class to apply to the first div turned into a collapsible divider.
ui-corner-bottom

The extra classes to apply to the bottom item of a group when the listView is inset.
ui-corner-all

The extra classes to apply to a divider when the listView is inset.
ui-corner-top

The extra classes to apply to the top item of a group when the listView is inset.
ui-li ui-li-divider ui-btn ui-bar-{0} ui-li-has-count

The classes applied to divider element used to display group headers. {0} is replaced by listDividerTheme.
ui-btn-inline ui-iglist-preset ui-btn

The classes applied to the element to select a preset in the search area.
ui-iglist-tray-footer-item ig-tray-sort-preset

The classes applied to the element to select a preset in the search area.
ui-iglist-preset-hidden

The classes applied to the preset element when it is partially scrolled out of view horizontally.
ui-iglist-preset-selected

The classes applied to the preset element when it is selected and applied.
ui-iglist-tray-footer-sep

The classes applied to the element in the search tray footer holding the bullet (between items) and the 'sorted by' label.
ui-iglist-sort-presets

The classes applied to the element holding all of the sort preset options.

Ignite UI | Samples

mobile.igListViewSorting

Code Sample

Related Samples

Related Topics

Dependencies

autoGenerateSortPresets

Code Sample

caseSensitive

Code Sample

countTheme

Code Sample

customSortFunction

Code Sample

dividerTemplate

Code Sample

groupComparerFunction

Code Sample

groupingSettings

Code Sample

collapsedCueText

Code Sample

collapsedIcon

Code Sample

enableCollapsibleDividers

Code Sample

expandedCueText

Code Sample

expandedIcon

Code Sample

initialExpandedState

Members

Code Sample

showCountBubble

Code Sample

groupNameFunction

Code Sample

listDividerTheme

Code Sample

presets

Code Sample

groupComparerFunction

Code Sample

groupNameFunction

Code Sample

showGrouping

Code Sample

sortedFields

Code Sample

direction

Members

Code Sample

fieldName

Code Sample

text

Code Sample

presetTheme

Code Sample

showGrouping

Code Sample

sortedFields

Code Sample

direction

Members

Code Sample

fieldName

Code Sample

sortPresetsLabel

Code Sample

sortState

Code Sample

sortUrlKey

Code Sample

sortUrlKeyAscValue

Code Sample

sortUrlKeyDescValue

Code Sample

type

Members

Code Sample