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

Related Topics

Dependencies

jquery-1.7.2.js
jquery.mobile-1.2.0.js
infragistics.mobileui.list.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.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");
          
  • 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) {...}
                    }]
                });
          
  • 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.

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