Ignite UI API Reference

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

Get sets settings for individual columns such as whether the grid is grouped by that column or grouping is allowed for that column.

 
        //Initialize
        $(".selector").igGrid({
            features: [
                {
                    name: "GroupBy",
                    columnSettings: [
                        { columnKey: "Name", isGroupBy: true },
						{ columnKey: "BoxArt", allowGrouping: false }
                    ]
                }
            ]
        });
        
        //Get
        var arrayOfColumnSettings = $(".selector").igGridGroupBy("option", "columnSettings");
        
        //Set
        $(".selector").igGridGroupBy("option", "columnSettings", arrayOfColumnSettings);
      

• allowGrouping

  Type:

  bool

  Default:

  true

  Enables/disables a column to participate in grouping. 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;
  				
  			      //Set
  			      //get the array of column settings
  			      var groupBySettings = $(".selector").igGridGroupBy("option", "columnSettings");	
  			      //set new value for the first column
  			      groupBySettings[0].allowGrouping = false;
  			      $(".selector").igGridGroupBy("option", "columnSettings", groupBySettings);
            

• groupComparerFunction

  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.

  Code Sample

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

• groupLabelFormatter

  Type:

  function

  Default:

  null

  Reference to a 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.

  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 if a column should be grouped by default.

  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.

  Code Sample

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

  • customSummary

    Type:

    object

    Default:

    null

    Specifies a custom summary function, which is called for each group, accepts an array of cell values for the specific column and returns the custom summary result.

    Code Sample

    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "GroupBy",
    							columnSettings: [
    								{ 
    									columnKey: "Color", 
    									isGroupBy: true
    								},
    								{
    									columnKey: "ListPrice",
    									allowGrouping: false,
    									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(valuesList) {
    												//	Initialize minmum and maximum values with the first element
    												var min = valuesList[1], max = valuesList[1];
    												//	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 .

    Members

    • avg
    • Type:string
    • average.
    • min
    • Type:string
    • minimal.
    • max
    • Type:string
    • maximal.
    • sum
    • Type:string
    • sum.
    • count
    • Type:string
    • count.
    • custom
    • Type:string
    • custom summary.

    Code Sample

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

  • text

    Type:

    object

    Default:

    null

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

    Code Sample

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

default sort order - asc or desc.

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

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

            //	Set
            $(".selector").igGridGroupBy("option", "defaultSortingDirection", "desc");
      

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

        //	Set
        $(".selector").igGridGroupBy("option", "emptyGroupByAreaContent", "Put here columns to group by");
         

Text of link(on click shows modal dialog with columns which could be group/ungroup by) that will be shown in the GroupBy area when there are no grouped columns.

 
        //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 button which opens 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");
        

Specifies the text in feature chooser.

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

        //	Get
        var text = $(".selector").igGridGroupBy("option", "featureChooserText");
        
        //	Set
        $(".selector").igGridGroupBy("option", "featureChooserText", "Text");
      

Specifies hide text in feature chooser.

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

        //	Get
        var text = $(".selector").igGridGroupBy("option", "featureChooserTextHide");
        
        //	Set
        $(".selector").igGridGroupBy("option", "featureChooserTextHide", "Hide"); 

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

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 how groupBy expressions will be encoded in the URL. The OData conventions for sorting params are used if the grid is bound to an OData service. ex: ?groupby(col1)=asc.

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

URL param value for ascending type of grouping. The OData conventions for sorting params are used if the grid is bound to an OData service. Example: ?groupBy(col1)=asc.

 
      //Initialize
      $(".selector").igGrid({
          features : [
              {
                  name : "GroupBy",
                  groupByUrlKey: "myCustomGroupBy",
                  groupByUrlKeyAscValue : "myAsc"
              }
          ]
      });
 
      //Get
      var groupByAsc = $(".selector").igGridGroupBy("option", "groupByUrlKeyAscValue");
 
      //Set
      $(".selector").igGridGroupBy("option", "groupByUrlKeyAscValue", "myAsc");
      

URL param value for descending type of grouping. The OData conventions for sorting params are used if the grid is bound to an OData service. Example: ?groupBy(col1)=desc.

 
       //Initialize
      $(".selector").igGrid({
          features : [
              {
                  name : "GroupBy",
                  groupByUrlKey: "myCustomGroupBy",
                  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
			    groupedColumns.col
			
			    //	Get the sort order for this column
			    groupedColumns.dir
			
			    //	Get the key of the grouped column
			    groupedColumns.key
			
			    //	Get the key of the columnLayour if this is hierarchical view
			    groupedColumns.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
  				      groupedColumns.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
  				      groupedColumns.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
  				      groupedColumns.layout
  			      }
            

Template for the grouped row's text, follows jQuery's templating guidelines. 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);
		  

Specifies if after grouping, the grouped rows will be initially expanded or collapsed. This option can be set only at initialization.

         
		    //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 modal 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 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 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 height of layouts dropdown in 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 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 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 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");
            

Specifies whether on click in groupby dialog to be immediately grouped/ungrouped columns. When it is false then it is shown Apply button in the groupby dialog.

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

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

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

Specifies height of 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 groupby dialog.

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

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

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

Enables / disables groupby persistence between states.

    //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 response. This option can be set only at initialization.

		    //	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, in case they are rendered inline in the grouped row.

  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

  By default, two digits are shown after the decimal place.

  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[i].formatter or igGrid format.

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

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

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