Specifies the collapse indicator tooltip for grouped rows.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							collapseTooltip: "Collapse group"
						}
					]
				});

				//Get
				var opValue = $(".selector").igGridGroupBy("option", "collapseTooltip");

				//Set
				$(".selector").igGridGroupBy("option", "collapseTooltip", "Collapse group");
			 

Configures individual column settings.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
			columnSettings: [
								{ columnKey: "Name", isGroupBy: true },
								{ columnKey: "BoxArt", allowGrouping: false }
							]
						}
					]
				});

				//Get
				var arrayOfColumnSettings = $(".selector").igGridGroupBy("option", "columnSettings");
			 

• allowGrouping

  Type:

  bool

  Default:

  true

  Enables/disables grouping a column from the UI. By default all columns can be grouped.

  Code Sample

   
  						//Initialize
  						$(".selector").igGrid({
  							features: [
  								{
  									name: "GroupBy",
  									columnSettings: [
  										{ columnKey: "Name", allowGrouping: false }
  									]
  								}
  							]
  						});
  
  						//Get
  						var groupBySettings = $(".selector").igGridGroupBy("option", "columnSettings");
  						var allowGroupingFirstColumn = groupBySettings[0].allowGrouping;
  					 

• compareFunc

  Type:

  enumeration

  Default:

  null

  Reference/name of 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 - 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

   
  						//Initialize
  						$(".selector").igGrid({
  							features: [
  								{
  									name: "GroupBy",
  									columnSettings: [
  										{
  											columnKey: "ProductID",
  											isGroupBy: true,
  											compareFunc: function(val1, val2, recordsData) {
  												return val1 > val2 ? 1 : val1 < val2 ? -1 : 0;
  											}
  										}
  								]
  								}
  							]
  						});
  					 

• dir

  Type:

  enumeration

  Default:

  asc

  Specifies the sort order - ascending or descending when the column is initially grouped (isGroupBy = true).

  Code Sample

   
  						//Initialize
  						$(".selector").igGrid({
  							features: [
  								{
  									name: "GroupBy",
  									columnSettings: [
  										{ columnKey: "Name", isGroupBy: true, dir: "desc" }
  									]
  								}
  							]
  						});
  					 

• groupComparerFunction

  Deprecated

  Type:

  function

  Default:

  null

  Specifies a custom group by function, which accepts the column setting, the first and the second value to compare and returns bool. This option is deprecated - please use option compareFunc instead.

  Code Sample

               
            //Initialize
  			    $(".selector").igGrid({
  				    features: [
  					    {
  						    name: "GroupBy",
  						    columnSettings: [{ 
  							    columnKey: "Name", 
  							    groupComparerFunction: function (columnSetting, val1, val2) {
  								    return (val1 === val2);
  							    } 
  						    }]
  					    }
  				    ]
  			    });          
          

• groupLabelFormatter

  Type:

  enumeration

  Default:

  null

  Reference/name of a function (string or function) which will be used for formatting the cell values. The function should accept a value from the grouped column and return the new formatted value in the label of the row.

  Members

  • string
  • Type:string
  • the name of the function as a string located in the global window object.
  • function
  • Type:function
  • which will be used for formatting the cell values.

  Code Sample

   
  						//Initialize
  						$(".selector").igGrid({
  							features: [
  								{
  									name: "GroupBy",
  									columnSettings: [{
  										columnKey: "Name",
  										groupLabelFormatter: function(val) {return (val === 1)? "Yes" : "No";}
  									}]
  								}
  							]
  						});
  						//Get
  						var groupBySettings = $(".selector").igGridGroupBy("option", "columnSettings");
  						var labelFormatterFirstColumn = groupBySettings[0].groupLabelFormatter;
  					 

• isGroupBy

  Type:

  bool

  Default:

  false

  Specifies the initial column grouped state.

  Code Sample

   
  						//Initialize
  						$(".selector").igGrid({
  							features: [
  								{
  									name: "GroupBy",
  									columnSettings: [
  										{ columnKey: "Name", isGroupBy: true }
  									]
  								}
  							]
  						});
  					 

• summaries

  Type:

  object

  Default:

  []

  A list of aggregation functions to calculate on the column values for each group. When not specified the default aggregate function is "count".

  Code Sample

   
  						//Initialize
  						$(".selector").igGrid({
  							features: [
  								{
  									name: "GroupBy",
  									columnSettings: [
  										//	The code in this example specifies that data must be grouped by
  										//	the ListPrice column and the average, the minimum and the maximum
  										//	must be calculated and displayed for each group.
  										{
  											columnKey: "ListPrice",
  											isGroupBy: true,
  					summaries: [
  						{
  													summaryFunction: "avg", text: " Average:"
  												},
  												{
  													summaryFunction: "min", text: " Minimum:"
  												},
  												{
  													summaryFunction: "max", text: " Maximum:"
  												}
  											]
  										}
  									]
  								}
  							]
  						});
  					 

  • customSummary

    Type:

    enumeration

    Default:

    null

    Specifies a custom summary function, which is called for each group, it should return the custom summary result. It takes as argument object with the following signature: {dataRecords: [], array: [], key: "", allGroupData: []} where,
    dataRecords - array of grouped (for the data view) data records,
    array - array of cell values for the specified column,
    key - key of the grouped column,
    allGroupData - array of data records for the group(for the whole data source - not only for the data view).

    Members

    • string
    • Type:string
    • the name of the function as a string located in the global window object.
    • function
    • Type:function
    • which will be used for calculating the summary value.

    Code Sample

     
    								//Initialize
    								$(".selector").igGrid({
    									features: [
    										{
    											name: "GroupBy",
    											columnSettings: [
    												{
    													columnKey: "Color",
    													isGroupBy: true
    												},
    												{
    													columnKey: "ListPrice",
    													isGroupBy: true,
    													summaries: [
    														{
    															//	Set average price summary value
    															summaryFunction: "avg", text: " Average:"
    														},
    														{
    															//	Set a custom function to calculate the difference between
    															//	the minimum and the maximum values in the group
    															summaryFunction: "custom",
    															text: " Delta:",
    															customSummary: function(data) {
    																//	Initialize minmum and maximum values with the first element
    																var valuesList = data.array, min = valuesList[0], max = valuesList[0];
    																//	Iterate all values in the list and find minimum and maximum
    																for(i = 1; i < valuesList.length; i++) {
    																	if(valuesList[i] < min)	min = valuesList[i];
    																	if(valuesList[i] > max)	max = valuesList[i];
    																}
    																//	Return difference between minimum and maximum
    																return (max - min);
    															}
    														}
    													]
    												}
    											]
    										}
    									]
    								});
    							 

  • summaryFunction

    Type:

    enumeration

    Default:

    avg

    the summary function key.

    Members

    • avg
    • Type:string
    • average summary function.
    • min
    • Type:string
    • minimum summary function.
    • max
    • Type:string
    • maximum summary function.
    • sum
    • Type:string
    • sum summary function.
    • count
    • Type:string
    • count summary function.
    • custom
    • Type:string
    • custom summary summary function.

    Code Sample

     
    								//Initialize
    								$(".selector").igGrid({
    									features: [{
    										name: "GroupBy",
    										columnSettings: [{
    											columnKey: "ListPrice",
    											summaries: [{
    												summaryFunction: "avg"
    											}]
    										}]
    									}]
    								});
    							 

  • text

    Type:

    string

    Default:

    null

    Specifies the summary text that will be shown before the value.

    Code Sample

     
    								//Initialize
    								$(".selector").igGrid({
    									features: [{
    										name: "GroupBy",
    										columnSettings: [{
    											columnKey: "ListPrice",
    											summaries: [{
    												summaryFunction: "Avg",
    												text: "Average:"
    											}]
    										}]
    									}]
    								});
    							 

default sort order - ascending or descending.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							defaultSortingDirection: "desc"
						}
					]
				});
				//	Get
				var defaultDireciton = $(".selector").igGridGroupBy("option", "defaultSortingDirection");
				//	Set
				$(".selector").igGridGroupBy("option", "defaultSortingDirection", "desc");
			 

Name of the dialog widget to be used. It should inherit from $.ui.igGridModalDialog. Checkout the Extending igGrid Modal Dialog topic for details.

 
				//create dialog widget that inherits from $.ui.igGridModalDialog
				$.widget("ui.CustomDialog", $.ui.igGridModalDialog, {});
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "GroupBy",
						dialogWidget: "CustomDialog"
						}
					]
				});

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

Text that will be shown in the GroupBy area when there are no grouped columns.

 
				//Initialize
				$(".selector").igGrid({
					features: [{
						name: "GroupBy",
						emptyGroupByAreaContent: "Put here columns to group by"
					}]
				});

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "emptyGroupByAreaContent");
			 

Text of the link that opens the GroupBy Dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [{
						name: "GroupBy",
						emptyGroupByAreaContentSelectColumns: "Select Columns to Group By"
					}]
				});

				//	Get
				var text = $(".selector").igGridGroupBy("option", "emptyGroupByAreaContentSelectColumns");

				//	Set
				$(".selector").igGridGroupBy("option", "emptyGroupByAreaContentSelectColumns", "Select Columns to Group By");
			 

Specifies caption for the hyperlink which opens the GroupBy Dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [{
						name: "GroupBy",
						emptyGroupByAreaContentSelectColumnsCaption: "Select Columns to Group By"
					}]
				});

				//	Get
				var text = $(".selector").igGridGroupBy("option", "emptyGroupByAreaContentSelectColumnsCaption");

				//	Set
				$(".selector").igGridGroupBy("option", "emptyGroupByAreaContentSelectColumnsCaption", "Select Columns to Group By");
			 

Specifies the expand indicator tooltip for grouped rows.

 
				//Initialize
				$(".selector").igGrid({
					features: [{
						name: "GroupBy",
						expandTooltip: "Custom expand tooltip"
					}]
				});

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "expandTooltip");

				//	Set
				$(".selector").igGridGroupBy("option", "expandTooltip", "Custom expand tooltip");
			 

Specifies if grouped rows will have an expander image that will allow end users to expand and collapse them. This option can be set only at initialization.

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

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "expansionIndicatorVisibility");
			 

Sets the place in the grid where the GroupBy area will be.

 
				//Initialize
				$(".selector").igGrid({
					features: [{
						name: "GroupBy",
						groupByAreaVisibility: "bottom"
					}]
				});
				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "groupByAreaVisibility");
				//	Set
				$(".selector").igGridGroupBy("option", "groupByAreaVisibility", "hidden");
			 

Controls containment behavior for the GroupBy Dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "GroupBy",
							groupByDialogContainment : "window"
						}
					]
				});
				//Get
				var groupByDialogContainment = $(".selector").igGridGroupBy("option", "groupByDialogContainment");
			 

By default, the column width for the header is taken. If this is specified it's used for all headers.

 
				//Initialize
				$(".selector").igGrid({
					features: [{
						name: "GroupBy",
						groupByLabelWidth: 100
					}]
				});

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "groupByLabelWidth");

				//	Set
				$(".selector").igGridGroupBy("option", "groupByLabelWidth", 100);
			 

URL param name which specifies a GroupBy expression. When groupByUrlKey, groupByUrlKeyAscValue and groupByUrlKeyDescValue are set the request looks like: ?<groupByUrlKey>(<columnKey>)=<groupByUrlKeyAscValue/groupByUrlKeyDescValue> (Example: ?groupby(col1)=asc). Otherwise the OData conventions for sorting params are used.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "GroupBy",
							groupByUrlKey: "myCustomGroupBy",
							groupByUrlKeyAscValue : "myAsc",
							groupByUrlKeyDescValue : "myDesc"
						}
					]
				});

				//Get
				var groupByUrlKey = $(".selector").igGridGroupBy("option", "groupByUrlKey");

				//Set
				$(".selector").igGridGroupBy("option", "groupByUrlKey", "myGroupBy");
			 

URL param value denoting ascending grouping. When groupByUrlKey, groupByUrlKeyAscValue and groupByUrlKeyDescValue are set the request looks like: ?<groupByUrlKey>(<columnKey>)=<groupByUrlKeyAscValue/groupByUrlKeyDescValue> (Example: ?groupby(col1)=asc). Otherwise the OData conventions for sorting params are used.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "GroupBy",
							groupByUrlKey: "myCustomGroupBy",
							groupByUrlKeyAscValue : "myAsc",
							groupByUrlKeyDescValue : "myDesc"
						}
					]
				});

				//Get
				var groupByAsc = $(".selector").igGridGroupBy("option", "groupByUrlKeyAscValue");

				//Set
				$(".selector").igGridGroupBy("option", "groupByUrlKeyAscValue", "myAsc");
			 

URL param value denoting descending grouping. When groupByUrlKey, groupByUrlKeyAscValue and groupByUrlKeyDescValue are set the request looks like: ?<groupByUrlKey>(<columnKey>)=<groupByUrlKeyAscValue/groupByUrlKeyDescValue> (Example: ?groupby(col1)=asc). Otherwise the OData conventions for sorting params are used.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "GroupBy",
							groupByUrlKey: "myCustomGroupBy",
							groupByUrlKeyAscValue : "myAsc",
							groupByUrlKeyDescValue : "myDesc"
						}
					]
				});

				//Get
				var groupByDesc = $(".selector").igGridGroupBy("option", "groupByUrlKeyDescValue");

				//Set
				$(".selector").igGridGroupBy("option", "groupByUrlKeyDescValue", "myDesc");
			 

Returns the list of currently grouped columns. The option is read-only and cannot be set at initialization or at runtime.

 
				//	Get
				var groupedColumns = $(".selector").igGridGroupBy("option", "groupedColumns");

				//	Enumerates all grouped columns
				for(i = 0; i < groupedColumns.length; i++) {
					//	Get column object
					var col = groupedColumns[i].col;

					//	Get the sort order for this column
					var dir = groupedColumns[i].dir;

					//	Get the key of the grouped column
					var key = groupedColumns[i].key;

					//	Get the key of the columnLayour if this is hierarchical view
					var layout = groupedColumns[i].layout;
				}
			 

• col

  Type:

  object

  Default:

  null

  column object for the column that is grouped.

  Code Sample

   
  						//	Get
  						var groupedColumns = $(".selector").igGridGroupBy("option", "groupedColumns");
  
  						//	Enumerates all grouped columns
  						for(i = 0; i < groupedColumns.length; i++) {
  							//	Get column object
  							var col = groupedColumns[i].col;
  						}
  					 

• dir

  Type:

  enumeration

  Default:

  asc

  sort order - ascending or descending.

  Code Sample

   
  						//	Get
  						var groupedColumns = $(".selector").igGridGroupBy("option", "groupedColumns");
  						//	Enumerates all grouped columns
  						for(i = 0; i < groupedColumns.length; i++) {
  							//	Get the sort order for this column
  							var dir = groupedColumns[i].dir;
  						}
  					 

• key

  Type:

  string

  Default:

  null

  Key of the column that's grouped.

  Code Sample

  			      //	Get
  			      var groupedColumns = $(".selector").igGridGroupBy("option", "groupedColumns");
  			
  			      //	Enumerates all grouped columns
  			      for(i = 0; i < groupedColumns.length; i++) {
  				      //	Get the key of the grouped column
  				      groupedColumns.key
  			      }
            

• layout

  Type:

  string

  Default:

  null

  Key of the columnLayout, if the grid is hierarchical.

  Code Sample

   
  						//	Get
  						var groupedColumns = $(".selector").igGridGroupBy("option", "groupedColumns");
  
  						//	Enumerates all grouped columns
  						for(i = 0; i < groupedColumns.length; i++) {
  							//	Get the key of the columnLayour if this is hierarchical view
  							var layout = groupedColumns[i].layout;
  						}
  					 

Template for the grouped row's text. Variables available for the template are ${key}, ${val} and ${count}.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							groupedRowTextTemplate: "Cost $ ${val} (Count: ${count})"
						}
					]
				});

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "groupedRowTextTemplate");

				//	Set
				$(".selector").igGridGroupBy("option", "groupedRowTextTemplate", "Cost $ ${val} (Count: ${count})");
			 

Specifies the indentation for a grouped row. If several columns are grouped, the total indentation will grow.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							indentation: 50
						}
					]
				});

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "indentation");

				//	Set
				$(".selector").igGridGroupBy("option", "indentation", 50);
			 

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

Specifies if after grouping, the grouped rows will be initially expanded or collapsed.

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

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "initialExpand");

				//	Set
				$(".selector").igGridGroupBy("option", "initialExpand", false);
			 

Specifies the opacity of the drag markup, while a column header is being dragged. The value must be between 0 and 1.

 
				//Initialize
				$(".selector").igGrid({
						features: [
							{
								name: "GroupBy",
								labelDragHelperOpacity: 0.75
							}
						]
				});

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "labelDragHelperOpacity");

				//	Set
				$(".selector").igGridGroupBy("option", "labelDragHelperOpacity", 0.75);
			 

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

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

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

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogAnimationDuration", 200);
			 

Specifies text of button which apply changes in modal dialog.

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

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

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

Specifies text of button which cancel changes in the GroupBy Dialog.

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

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

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

Specifies caption for each ascending sorted column in GroupBy Dialog.

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

				//	Get
				var text = $(".selector").igGridGroupBy("option", "modalDialogCaptionButtonAsc");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogCaptionButtonAsc", "Acsending");
			 

Specifies caption for each descending sorted column in GroupBy Dialog.

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

				//	Get
				var text = $(".selector").igGridGroupBy("option", "modalDialogCaptionButtonDesc");

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

Specifies caption button ungroup in GroupBy Dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							modalDialogCaptionButtonUngroup: "Ungroup"
						}
					]
				});

				//	Get
				var text = $(".selector").igGridGroupBy("option", "modalDialogCaptionButtonUngroup");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogCaptionButtonUngroup", "Ungroup");
			 

Specifies caption text for the GroupBy Dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							modalDialogCaptionText: "Modal Dialog"
						}
					]
				});

				//	Get
				var text = $(".selector").igGridGroupBy("option", "modalDialogCaptionText");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogCaptionText", "Modal Dialog");
			 

Specifies label for "Clear all" button in the GroupBy Dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							modalDialogClearAllButtonLabel: "Clear All"
						}
					]
				});

				//	Get
				var text = $(".selector").igGridGroupBy("option", "modalDialogClearAllButtonLabel");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogClearAllButtonLabel", "Clear All");
			 

Specifies width of layouts dropdown in the GroupBy Dialog.

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

				//	Get
				var width = $(".selector").igGridGroupBy("option", "modalDialogDropDownAreaWidth");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogDropDownAreaWidth", 300);
			 

Specifies caption of layouts dropdown button in the GroupBy Dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							modalDialogDropDownButtonCaption: "Layouts"
						}
					]
				});

				//	Get
				var text = $(".selector").igGridGroupBy("option", "modalDialogDropDownButtonCaption");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogDropDownButtonCaption", "Layouts");
			 

Specifies label for layouts dropdown in the GroupBy Dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							modalDialogDropDownLabel: "Layouts"
						}
					]
				});

				//	Get
				var text = $(".selector").igGridGroupBy("option", "modalDialogDropDownLabel");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogDropDownLabel", "Layouts");
			 

Specifies width of layouts dropdown in the GroupBy Dialog.

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

				//	Get
				var width = $(".selector").igGridGroupBy("option", "modalDialogDropDownWidth");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogDropDownWidth", 300);
			 

Specifies the text of GroupBy button in the GroupBy Dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							modalDialogGroupByButtonText: "Group"
						}
					]
				});

				//	Get
				var text = $(".selector").igGridGroupBy("option", "modalDialogGroupByButtonText");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogGroupByButtonText", "Group");
			 

Enables/disables immediate column grouping/ungrouping. When false operation is delayed until after "Apply" button is clicked by the user.

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

				//	Get
				var onClick = $(".selector").igGridGroupBy("option", "modalDialogGroupByOnClick");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogGroupByOnClick", true);
			 

Specifies height of the GroupBy Dialog.

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

Specifies name of the root layout which is shown layouts tree dialog.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							modalDialogRootLevelHierarchicalGrid: "Root Layout"
						}
					]
				});

				//	Get
				var rootLabel = $(".selector").igGridGroupBy("option", "modalDialogRootLevelHierarchicalGrid");

				//	Set
				$(".selector").igGridGroupBy("option", "modalDialogRootLevelHierarchicalGrid", "Root Layout");
			 

Specifies width of the GroupBy Dialog.

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

Specifies when paging is applied and there is at least one grouped column which records should be included in page processing.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							pagingMode: "dataRecordsOnly"
						}
					]
				});
				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "pagingMode");
			 

Enables / disables GroupBy persistence between states. Checkout the GroupBy Persistence topic for details.

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

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

				//Set
				$(".selector").igGridGroupBy("option", "persist", false);
			 

Specifies the tooltip for the remove button.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							removeButtonTooltip: "Do not group by this column"
						}
					]
				});

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "removeButtonTooltip");

				//	Set
				$(".selector").igGridGroupBy("option", "removeButtonTooltip", "Do not group by this column");
			 

Specifies a key to get group by data from the remote response.

 
				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "resultResponseKey");

				//	Set
				$(".selector").igGridGroupBy("option", "resultResponseKey", "Cost");
			 

Specifies the settings for GroupBy summaries.

 
				//Initialize
				$(".selector").igGrid({
					features: [{
						name: "GroupBy",
			summarySettings: {
							multiSummaryDelimiter: " | ",
							summaryFormat: "#0.00"
						}
					}]
				});

				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "summarySettings");

				//	Set
				$(".selector").igGridGroupBy("option", "summarySettings", {
					multiSummaryDelimiter: " | ",
					summaryFormat: "#0.00"
				});
			 

• multiSummaryDelimiter

  Type:

  string

  Default:

  ","

  Specifies the delimiter for multiple summaries.

  Code Sample

   
  					//Initialize
  					$(".selector").igGrid({
  						features: [{
  							name: "GroupBy",
  							summarySettings: {
  								multiSummaryDelimiter: " | "
  							}
  						}]
  					});
  
  					//	Get
  					var summarySettings = $(".selector").igGridGroupBy("option", "summarySettings");
  					//	Get the value of multiSummaryDelimiter
  					summarySettings.multiSummaryDelimiter
  
  					//	Set
  					//	Get current summary settings and set a new value to multiSummaryDelimiter
  					var summarySettings = $(".selector").igGridGroupBy("option", "summarySettings");
  					summarySettings.multiSummaryDelimiter = " | ";
  					//	Set the new value to the widget
  					$(".selector").igGridGroupBy("option", "summarySettings", summarySettings);
  				 

• summaryFormat

  Type:

  string

  Default:

  "#.00"

  Format of the summary value. By default, two digits are shown after the decimal place. Checkout Formatting Dates, Numbers and Strings for details on the valid formatting specifiers.

  Code Sample

   
  					//Initialize
  					$(".selector").igGrid({
  						features: [{
  							name: "GroupBy",
  							summarySettings: {
  								summaryFormat: "#0.00"
  							}
  						}]
  
  						//	Get
  						var summarySettings = $(".selector").igGridGroupBy("option", "summarySettings");
  						//	Get the value of summaryFormat
  						summarySettings.summaryFormat
  
  						//	Set
  						//	Get current summary settings and set a new value to summaryFormat
  						var summarySettings = $(".selector").igGridGroupBy("option", "summarySettings");
  						summarySettings.summaryFormat = "#0.00";
  						//	Set the new value to the widget
  						$(".selector").igGridGroupBy("option", "summarySettings", summarySettings);
  					});
  				 

Specifies whether the GroupBy operation takes place locally on client-side or remotely on server-side.

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name: "GroupBy",
							type: "local"
						}
					]
				});
				//	Get
				var opValue = $(".selector").igGridGroupBy("option", "type");
				//	Set
				$(".selector").igGridGroupBy("option", "type", "local");
			 

Format grouped column using the formatter set in igGrid.columns.formatter or igGrid.columns.format.

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

				//	Get
				var useGridColumnFormatter = $(".selector").igGridGroupBy("option", "useGridColumnFormatter");

				//	Set
				$(".selector").igGridGroupBy("option", "useGridColumnFormatter", false);