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

ui.igGridSorting

ui.igGridSorting_image

Both the igGrid and igHierarchicalGrid controls feature column sorting. This feature allows users to order the rows in the grid according the sort order of a given column. Both ascending and descending sort directions are available. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igGrid control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resouces in NetAdvantage for jQuery and Styling and Theming NetAdvantage for jQuery.

Code Sample

        <!doctype html>
        <html>
        <head>
            <!-- Infragistics Combined CSS -->
            <link href="themes/ig/jquery.ui.custom.css" rel="stylesheet" type="text/css" />
            <link href="themes/base/ig.ui.css" rel="stylesheet" type="text/css" />
            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>
            <!-- jQuery Templates: http://api.jquery.com/category/plugins/templates/ -->
            <script src="js/jquery.tmpl.js" type="text/javascript"></script>
            <!-- Infragistics Combined Scripts -->
            <script src="js/ig.ui.js" type="text/javascript"></script>
	        <script type="text/javascript">
		        var products = [
			        { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
			        { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
			        { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
			        { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
			        { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
			        { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
			        { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
			        { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
			        { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
		        ];

		        $(function () {
			        $("#gridSorting").igGrid({
				        columns: [
					        { headerText: "Product ID", key: "ProductID", dataType: "number" },
					        { headerText: "Product Name", key: "Name", dataType: "string" },
					        { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
				        ],
				        features: [
					        {
						        name: "Sorting",
						        type: "local"
					        }
				        ],
				        width: "500px",
				        dataSource: products
			        });
		        });
	        </script>
        </head>
        <body>
	        <div id="gridSorting"></div>
        </body>
        </html>

Related Samples

Related Topics

Dependencies

jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
ig.ui.grid.framework.js
ig.ui.shared.js
ig.datasource.js
ig.util.js

  • applySortedColumnCss

    Type:
    enumeration
    Default:
    true

    Enables/disables special styling for sorted columns.

    Members

    • true
    • Type:bool
    • false
    • Type:bool
    • sorted column cells will not have any special sort-related styling.

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    applySortedColumnCss : false
                }
            ]
        });
            
        //Get
        var sortCss = $(".selector").igGridSorting("option", "applySortedColumnCss");

        //Set
        $(".selector").igGridSorting("option", "applySortedColumnCss", false);

  • caseSensitive

    Type:
    bool
    Default:
    false

    Case sensitivity of the sorting.

    Code Sample

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

        //Set
        $(".selector").igGridSorting("option", "caseSensitive", true);

  • columnSettings

    Type:
    array
    Default:
    []
    Elements Type:
    object

    A list of custom column settings that specify custom sorting settings for a specific column (whether sorting is enabled / disabled, default sort direction, first sort direction, etc.).

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    columnSettings : [
				        {
                            columnIndex: 0, 
                            allowSorting: true, 
                            firstSortDirection: "ascending", 
                            currentSortDirection: "descending"
                        }
			        ]
                }
            ]
        });

        //Get
        var colSettings = $(".selector").igGridSorting("option", "columnSettings");

        //Set
        var colSettings = [
				{
                    columnKey: "ProductName", 
                    allowSorting: true, 
                    firstSortDirection: "ascending", 
                    currentSortDirection: "descending"
                }
			];
            
        $(".selector").igGridSorting("option", "columnSettings", colSettings);

    • allowSorting

      Type:
      bool
      Default:
      true

      Enables / disables sorting on the specified column. By default all columns are sortable.

      Code Sample

        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    columnSettings : [
                        {
                            columnIndex: 0, 
                            allowSorting: true, 
                            firstSortDirection: "ascending", 
                            currentSortDirection: "descending"
                        }
                    ]
                }
            ]
        });

    • columnIndex

      Type:
      number
      Default:
      null

      Column index. Either key or index must be set in every column setting.

      Code Sample

        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    columnSettings : [
                        {
                            columnIndex: 0, 
                            allowSorting: true, 
                            firstSortDirection: "ascending", 
                            currentSortDirection: "descending"
                        }
                    ]
                }
            ]
        });

    • columnKey

      Type:
      string
      Default:
      null

      Column key. Either key or index must be set in every column setting.

      Code Sample

        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    columnSettings : [
                        {
                            columnKey: "ProductID",
                            allowSorting: true, 
                            firstSortDirection: "ascending", 
                            currentSortDirection: "descending"
                        }
                    ]
                }
            ]
        });

    • currentSortDirection

      Type:
      enumeration
      Default:
      null

      The current (or default) sort direction. If this setting is specified, the column will be rendered sorted according to this option. .

      Members

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

      Code Sample

        
            //Initialize
            $(".selector").igGrid({
                features : [
                    {
                        name : "Sorting",
                        columnSettings : [
                            {
                                columnIndex: 0, 
                                allowSorting: true, 
                                firstSortDirection: "ascending", 
                                currentSortDirection: "descending"
                            }
                        ]
                    }
                ]
            });

    • firstSortDirection

      Type:
      enumeration
      Default:
      null

      This will be the first sort direction when the column hasn't been sorted before .

      Members

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

      Code Sample

        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    columnSettings : [
                        {
                            columnIndex: 0, 
                            allowSorting: true, 
                            firstSortDirection: "ascending", 
                            currentSortDirection: "descending"
                        }
                    ]
                }
            ]
        });

  • 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").igGrid({
        features : [
            {
                name : "Sorting",
                customSortFunction : myCustomFunc
            }
        ]
    });
    
    //Get
    var sortFunc = $(".selector").igGridSorting("option", "customSortFunction");
 
    //Set
    $(".selector").igGridSorting("option", "customSortFunction", myCustomFunc);

  • firstSortDirection

    Type:
    enumeration
    Default:
    ascending

    Specifies which direction to use on the first click / keydown, if the column hasn't been sorted before .

    Members

    • ascending
    • Type:string
    • descending
    • Type:string

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    firstSortDirection : "descending"
                }
            ]
        });

        //Get
        var direction = $(".selector").igGridSorting("option", "firstSortDirection");

        //Set
        $(".selector").igGridSorting("option", "firstSortDirection", "descending");

  • mode

    Type:
    enumeration
    Default:
    single

    Defines single column sorting or multiple column sorting.

    Members

    • single
    • Type:string
    • multi
    • Type:string
    • if enabled, previous sorted state for columns won't be cleared.

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    mode : "multi" 
                }
            ]
        });

        //Get
        var mode = $(".selector").igGridSorting("option", "mode");

        //Set
        $(".selector").igGridSorting("option", "mode", "multi");

  • sortedColumnTooltip

    Type:
    string
    Default:
    ""

    Custom sorted column tooltip in jQuery templating format.

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    sortedColumnTooltip : "Sorted"
                }
            ]
        });

        //Get
        var tooltip = $(".selector").igGridSorting("option", "sortedColumnTooltip");

        //Set
        $(".selector").igGridSorting("option", "sortedColumnTooltip", "Sorted");

  • 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").igGrid({
        features : [
            {
                name : "Sorting",
                sortUrlKey: "myCustomSort"
            }
        ]
    });

    //Get
    var sortKey = $(".selector").igGridSorting("option", "sortUrlKey");
 
    //Set
    $(".selector").igGridSorting("option", "sortUrlKey", "myCustomSort");

  • sortUrlKeyAscValue

    Type:
    string
    Default:
    null

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

    Code Sample

      
    //Initialize
    $(".selector").igGrid({
        features : [
            {
                name : "Sorting",
                sortUrlKey: "myCustomSort",
			    sortUrlKeyAscValue: "myAsc"
            }
        ]
    });

    //Get
    var sortKeyAsc = $(".selector").igGridSorting("option", "sortUrlKeyAscValue");
 
    //Set
    $(".selector").igGridSorting("option", "sortUrlKeyAscValue", "myAsc");

  • sortUrlKeyDescValue

    Type:
    string
    Default:
    null

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

    Code Sample

      
    //Initialize
    $(".selector").igGrid({
        features : [
            {
                name : "Sorting",
                sortUrlKey: "myCustomSort",
			    sortUrlKeyDescValue: "myDesc"
            }
        ]
    });

    //Get
    var sortKeyDesc = $(".selector").igGridSorting("option", "sortUrlKeyDescValue");
 
    //Set
    $(".selector").igGridSorting("option", "sortUrlKeyDescValue", "myDesc");

  • type

    Type:
    enumeration
    Default:
    null

    Defines local or remote sorting.

    Members

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

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    type : "remote"
                }
            ]
        });

        //Get
        var sortType = $(".selector").igGridSorting("option", "type");

        //Set
        $(".selector").igGridSorting("option", "type", "remote");

  • unsortedColumnTooltip

    Type:
    string
    Default:
    ""

    Custom unsorted column tooltip in jQuery templating format.

    Code Sample

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Sorting",
                    unsortedColumnTooltip : "Unsorted"
                }
            ]
        });
        
        //Get
        var tooltip = $(".selector").igGridSorting("option", "unsortedColumnTooltip");
        
        //Set
        $(".selector").igGridSorting("option", "unsortedColumnTooltip", "Unsorted");

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

Show Details

  • columnSorted

    Cancellable:
    false

    Event fired after the column has already been sorted and data - re-rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridSorting.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.columnKey to get column key.
    Use ui.direction to get sorting direction.

    Code Sample

     
			//Delegate
			$(document).delegate(".selector", "iggridsortingcolumnsorted", function (evt, ui) {
				//return reference to igGridSorting object
				ui.owner;
				//return reference igGrid object
				ui.owner.grid;
				//return column key
				ui.columnKey;
				//return sort direction
				ui.direction;
			});

			//Initialize
            $(".selector").igGrid({
				features: [{
					name: "Sorting",
					type: "local",
					columnSorted: function (evt, ui) {...}
				}]
			});

  • columnSorting

    Cancellable:
    true

    Event fired before sorting is invoked for a certain column.
    Return false in order to cancel column sorting.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridSorting.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.columnKey to get column key.
    Use ui.direction to get sorting direction.

    Code Sample

      
			//Delegate
			$(document).delegate(".selector", "iggridsortingcolumnsorting", function (evt, ui) {
				//return reference to igGridSorting object
				ui.owner;
				//return reference igGrid object
				ui.owner.grid;
				//return column key
				ui.columnKey;
				//return sort direction
				ui.direction;
			});

			//Initialize
            $(".selector").igGrid({
				features: [{
					name: "Sorting",
					type: "local",
					columnSorting: function (evt, ui) {...}
				}]
			});

  • destroy

    .igGridSorting( "destroy" );

    Code Sample

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

  • sortColumn

    .igGridSorting( "sortColumn", index:object, direction:object );

    Sorts a grid column and updates the UI.

    • index
    • Type:object
    • Column key (string) or index (number). Specifies the column which we want to sort. If the mode is multiple, previous sorting states are not cleared. .
    • direction
    • Type:object
    • Specifies sorting direction (ascending or descending) .

    Code Sample

     
      $(".selector").igGridSorting("sortColumn", 1, "descending");

  • ui-iggrid-colasc ui-state-highlight

    Classes applied to a column's cells when it's sorted ascending.

  • ui-iggrid-colheaderasc

    Classes applied to a column header when it's sorted ascending.

  • ui-iggrid-coldesc ui-state-highlight

    Classes applied to a column's cells when it's sorted descending.

  • ui-iggrid-colheaderdesc

    Classes applied to a column header when it's sorted descending.

  • ui-iggrid-sortableheader ui-state-default

    Classes applied to a sortable column header.

  • ui-iggrid-sortableheaderactive ui-state-active

    Classes appied to a sortable header when it's active (navigated with keyboard / clicked).

  • ui-iggrid-sortableheaderfocus ui-state-focus

    Classes applied to the sortable column header when it has focus.

  • ui-iggrid-sortableheaderhover ui-state-hover

    Classes applied to a sortable column header when it is hovered.

  • ui-iggrid-colindicator

    Classes applied to the sorting indicator SPAN rendered inside the column header.

  • ui-iggrid-colindicator-asc ui-icon ui-icon-arrowthick-1-n

    Classes applied to the sorting indicator span when it's in ascending state.

  • ui-iggrid-colindicator-desc ui-icon ui-icon-arrowthick-1-s

    Classes applied to the sorting indicator span when it's in descending state.