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

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

• 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

   
            function myCompareFunc(a, b, recordsData) { 
             var countryX = recordsData.recordX["Country"];
             var countryY = recordsData.recordY["Country"];
             return countryX > countryY ? 1 : countryX < countryY ? -1 : 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
  • 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"
                          }
                      ]
                  }
              ]
          });
            

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

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 text in feature chooser.

     
        //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 hasn't been sorted before.

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

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 cancel changes in 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 in 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 : true
                }
            ]
        });

        //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 between states.

 
        //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 jQuery templating 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
    $(".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
    $(".selector").igGridSorting("option", "sortUrlKeyAscValue", "myAsc");
      

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

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

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

Defines local or remote sorting.

 
        //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 jQuery templating format.

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