Enables/disables special styling for sorted columns. If false, sorted column cells will not have any special sort-related styling.

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

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

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

Enables or disables the case sensitivity of the sorting. Works only for local sorting.

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

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

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

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

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

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

• 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

  Identifies the grid column by 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"
  										}
  									]
  								}
  							]
  						});
  
  						// Get
  						var colSettings = $(".selector").igGridSorting("option", "columnSettings");
  						var colIndex = colSettings[0].columnIndex;
  					 

• columnKey

  Type:

  string

  Default:

  null

  Identifies the grid column by 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"
  										}
  									]
  								}
  							]
  						});
  
  						//Get
  						var colSettings = $(".selector").igGridSorting("option", "columnSettings");
  						var colKey = colSettings[0].columnKey;
  					 

• compareFunc

  Type:

  enumeration

  Default:

  null

  Reference to a function (string or function) used for custom comparison. The function accepts the following arguments:
  val1 - the first value to compare,
  val2 - the second value to compare,
  recordsData (optional) - an object having three properties: fieldName - the name of the sorted field; record1 - first record to compare; record2 - second record to compare.
  The function returns the following numeric value:
  0 - indicating that values are equal,
  1 - indicating that val1 > val2,
  -1 - indicating that val1 < val2.

  Members

  • string
  • Type:string
  • The name of the function as a string located in the global window object.
  • function
  • Type:function
  • Function which will be used for custom comparison.

  Code Sample

   
  						var myCompareFunc = function (fields, schema, reverse, convertf) {
  							return function (val1, val2) {
  								if (val1.Price > val2.Price) {
  									return 1;
  								}
  								if (val1.Price < val2.Price) {
  									return -1;
  								}
  								return 0;
  							}
  						}
  						// Initialize
  						$(".selector").igGrid({
  							features : [
  								{
  									name : "Sorting",
  									columnSettings: [
  										{
  											columnIndex: 0,
  											allowSorting: true,
  											firstSortDirection: "ascending",
  											compareFunc: "myCompareFunc"
  										}
  									]
  								}
  							]
  						});
  					 

• 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
  • The initial sort of the column data will be in ascending order.
  • desc
  • Type:string
  • The initial sort of the column data will be in descending order.

  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
  • The first sort of the column data will be in ascending order.
  • desc
  • Type:string
  • The first sort of the column data will be in descending order.

  Code Sample

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

Custom sort function(or name of the function as a string) 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.

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

Name of the dialog widget to be used. It should inherit from $.ui.igGridModalDialog.

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

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

Specifies the text shown in the feature chooser item for sorting in ascending order (displayed only on touch environment).

 
				// Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Sorting",
							featureChooserSortAsc : "Sort A to Z"
						}
					]
				});

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

Specifies the text shown in the feature chooser item for sorting in descending order (displayed only on touch environment).

 
				// Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Sorting",
							featureChooserSortDesc : "Sort Z to A"
						}
					]
				});

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

Specifies the text of the feature chooser sorting button.

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

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

				// Set
				$(".selector").igGridSorting("option", "featureChooserText", "Sorting");
			 

Specifies which direction to use on the first click / keydown, if the column is sorted for the first time.

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

Enables/disables feature inheritance for the child layouts. NOTE: It only applies for igHierarchicalGrid.

 
				// Initialize
				$(".selector").igHierarchicalGrid({
					features: [
						{
							name: "Sorting",
							inherit: true
						}
					]
				});

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

Specifies time of milliseconds for animation duration to show/hide modal dialog.

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

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

				// Set
				$(".selector").igGridSorting("option", "modalDialogAnimationDuration", 300);
			 

Specifies text of button which apply changes in modal dialog.

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

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

				// Set
				$(".selector").igGridSorting("option", "modalDialogButtonApplyText", "Apply");
			 

Specifies text of button which cancels the changes in the advanced sorting modal dialog.

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

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

				//Set
				$(".selector").igGridSorting("option", "modalDialogButtonCancelText", "Cancel");
			 

Specifies caption for each ascending sorted column in multiple sorting dialog.

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

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

				// Set
				$(".selector").igGridSorting("option", "modalDialogCaptionButtonAsc", "Ascending");
			 

Specifies caption for each descending sorted column in multiple sorting dialog.

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

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

				// Set
				$(".selector").igGridSorting("option", "modalDialogCaptionButtonDesc", "Descending");
			 

Specifies caption for unsort button in multiple sorting dialog.

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

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

				// Set
				$(".selector").igGridSorting("option", "modalDialogCaptionButtonUnsort", "Unsort");
			 

Specifies caption text for multiple sorting dialog.

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

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

				// Set
				$(".selector").igGridSorting("option", "modalDialogCaptionText", "Multiple Sorting");
			 

Specifies height of multiple sorting dialog.

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

Specifies sortby button label for each unsorted column in multiple sorting dialog.

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

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

				// Set
				$(".selector").igGridSorting("option", "modalDialogResetButtonLabel", "Reset");
			 

Specifies sortby button text for each unsorted column in multiple sorting dialog.

 
				// Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Sorting",
							modalDialogSortByButtonText : "Sort By"
						}
					]
				});

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

				// Set
				$(".selector").igGridSorting("option", "modalDialogSortByButtonText", "Sort By");
			 

Specifies whether sorting to be applied immediately when click sort/unsort columns when using the multiple sorting dialog. When it is false Apply button shows and sorting is applied when the button is clicked.

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

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

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

Specifies width of multiple sorting dialog.

 
				// Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Sorting",
							modalDialogWidth : 400
						}
					]
				});
				// Get
				var width = $(".selector").igGridSorting("option", "modalDialogWidth");
				// Set
				$(".selector").igGridSorting("option", "modalDialogWidth", 300);
			 

Defines single column sorting or multiple column sorting.

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

Enables/disables sorting persistence when the grid is rebound.

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

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

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

Custom sorted column tooltip in igTemplating format.

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

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

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

Controls containment behavior of multiple sorting dialog.

owner The multi sorting dialog will be draggable only in the grid area
window The multi sorting dialog will be draggable in the whole window area.

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

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

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

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

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

				// Set
				// Results in the following URL "?myCustomSort(col1)=asc"
				$(".selector").igGridSorting("option", "sortUrlKey", "myCustomSort");
			 

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

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

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

				// Set
				// Results in the following URL "?sort(col1)=myAsc"
				$(".selector").igGridSorting("option", "sortUrlKeyAscValue", "myAsc");
			 

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

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

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

				// Set
				// Results in the following URL "?sort(col1)=myDesc"
				$(".selector").igGridSorting("option", "sortUrlKeyDescValue", "myDesc");
			 

Defines local or remote sorting operations.

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

Custom unsorted column tooltip in igTemplating format.

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

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

				// Set
				$(".selector").igGridSorting("option", "unsortedColumnTooltip", "Unsorted");