ui.igGridSummaries

ui.igGridSummaries_image

Both the igGrid and igHierarchicalGrid controls feature column summaries in the grid. Column summaries are available to expose a number of aggregations on a column including minimum, maximum, average and summation values. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

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

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

Code Sample

 
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
	  <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var ds = [
    	        { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
    	        { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
    	        { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
    	        { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
    	        { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
    	        { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
    	        { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
    	        { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
    	        { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
            ];

            $("#gridSummaries").igGrid({
                autoGenerateColumns: false,
                columns: [
			        { headerText: "Product ID", key: "ProductID", dataType: "number" },
			        { headerText: "Product Name", key: "Name", dataType: "string" },
			        { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
		        ],
                dataSource: ds,
                features: [
		        {
		            name: "Summaries",
		            columnSettings: [
				        { columnKey: "ProductID", allowSummaries: true },
				        { columnKey: "Name", allowSummaries: true },
                        { columnKey: "ProductNumber", allowSummaries: false }
			        ]
		        }
	            ]
            });
        });
    </script>
</head>
<body>
	<table id="gridSummaries"></table>
</body>
</html>
    

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.ui.grid.framework.js
infragistics.ui.shared.js
infragistics.datasource.js
infragistics.util.js
infragistics.ui.grid.shared.js
infragistics.ui.grid.featurechooser.js

Inherits

  • calculateRenderMode

    Type:
    enumeration
    Default:
    okcancelbuttons

    Specifies when calculations are made.

    Members

    • onselect
    • Type:string
    • summaries are updated when checkbox is checked/unchecked.
    • okcancelbuttons
    • Type:string
    • summaries are updated only when OK button is clicked.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							calculateRenderMode: "onselect"
    						}
    					]
    				});
    				//Get
    				var calculateRenderMode = $(".selector").igGridSummaries("option", "calculateRenderMode");
    				//Set
    				$(".selector").igGridSummaries("option", "calculateRenderMode", "onselect");
    			 
  • callee

    Type:
    function
    Default:
    null

    Function reference - it is called when data is retrieved from the data source.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							callee: function() {...}
    						}
    					]
    				});
    			 
  • columnSettings

    Type:
    array
    Default:
    []
    Elements Type:
    object

    A list of column settings that specifies custom summaries options per column basis.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							columnSettings: [
    								{ columnKey: "ProductID", allowSummaries: true  },
    							]
    						}
    					]
    				});
    
    				//Get
    				var accessibility = $(".selector").igGridSummaries("option", "columnSettings");
    			 
    • allowSummaries

      Type:
      bool
      Default:
      true

      Enables disables summaries for the column.

      Code Sample

       
      						//Initialize
      						$(".selector").igGrid({
      							features: [
      								{
      									name: "Summaries",
      									columnSettings: [
      										{ columnIndex: 0, allowSummaries: false },
      									]
      								}
      							]
      						});
      
      						//Get
      						var accessibility = $(".selector").igGridSummaries("option", "columnSettings");
      						var allowSummaries = accessibility[0].allowSummaries;
      
      						//Set
      						//get the array of column settings
      						var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
      						//set new value to the column with index 0
      						arrayOfColumnSettings[0].allowSummaries = false;
      						$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);
      					 
    • columnIndex

      Type:
      number
      Default:
      -1

      Column index. Can be used in place of column key. The preferred way of populating a column setting is to always use the column keys as identifiers.

      Code Sample

       
      						//Initialize
      						$(".selector").igGrid({
      							features: [
      								{
      									name: "Summaries",
      									columnSettings: [
      										{ columnIndex: 0, allowSummaries: false },
      									]
      								}
      							]
      						});
      					 
    • columnKey

      Type:
      string
      Default:
      null

      Column key. This is a required property in every column setting if columnIndex is not set.

      Code Sample

       
      						//Initialize
      						$(".selector").igGrid({
      							features: [
      								{
      									name: "Summaries",
      									columnSettings: [
      										{ columnKey: "ProductID", allowSummaries: false },
      									]
      								}
      							]
      						});
      					 
    • summaryOperands

      Type:
      array
      Default:
      []
      Elements Type:
      object

      Check defaultSummaryOperands.

      Code Sample

       
      						//Initialize
      						$(".selector").igGrid({
      							features: [
      								{
      									name: "Summaries",
      									columnSettings: [
      										{ columnKey: "ProductID", allowSummaries: false, summaryOperands:
      											[{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0 }]
      											}
      									]
      								}
      							]
      						});
      
      						//Get
      						var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
      						var firstColumn = arrayOfColumnSettings[0].summaryOperands;
      
      						//Set
      						$(".selector").igGridSummaries("option", "columnSettings", [{ columnKey: "ReorderPoint", allowSummaries: true, summaryOperands:
      						[{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0 }]
      						}]);
      					 
      • active

        Type:
        bool
        Default:
        true

        If it is false the summary operand will be shown in dropdown but it will not be made calculation.

        Code Sample

         
        								//Initialize
        								$(".selector").igGrid({
        									features: [
        										{
        											name: "Summaries",
        											columnSettings: [
        												{ columnKey: "ProductID", allowSummaries: false, summaryOperands:
        													[{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0 }]
        													}
        											]
        										}
        									]
        								});
        
        								//Get
        								var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
        								var firstColumn = arrayOfColumnSettings[0].summaryOperands;
        								var active = firstColumn[0].active;
        								//Set
        
        								var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
        								//Set new value
        								arrayOfColumnSettings[0].summaryOperands[0].active = true;
        								$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);
        							 
      • format

        Type:
        string
        Default:
        ""

        Specifies a format that will be applied to the current summary operant.
        When this option is not set, the format of the column it is in will taken into account.
        When this option and the column format is not set, the regional settings will be taken depending on the autoFormat option.
        If the column type is not specified in the autoFormat option and no format is set for both column and summary operand, no formatting is applied.

        Code Sample

         
        								//Initialize
        								$(".selector").igGrid({
        									features: [
        										{
        											name: "Summaries",
        											columnSettings: [
        												{ columnKey: "ProductID", allowSummaries: false, summaryOperands:
        													[{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0, format: "number" }]
        													}
        											]
        										}
        									]
        								});
        
        								//Get
        								var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
        								var firstColumn = arrayOfColumnSettings[0].summaryOperands;
        								var format = firstColumn[0].format;
        
        								//Set
        								var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
        								//Set new value
        								arrayOfColumnSettings[0].summaryOperands[0].format = "number";
        								$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);
        							 
      • order

        Type:
        number
        Default:
        5

        Specifies the order of elements in dropdown. It is recommended to set order of custom operands and to be greater or equal to 5.

        Code Sample

         
        								//Initialize
        								$(".selector").igGrid({
        									features: [
        										{
        											name: "Summaries",
        											columnSettings: [
        												{ columnKey: "ProductID", allowSummaries: false, summaryOperands:
        													[{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0, order: 6 }]
        													}
        											]
        										}
        									]
        								});
        
        								//Get
        								var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
        								var firstColumn = arrayOfColumnSettings[0].summaryOperands;
        								var order = firstColumn[0].order;
        
        								//Set
        								var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
        								//Set new value
        								arrayOfColumnSettings[0].summaryOperands[0].order = 6;
        								$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);
        							 
      • rowDisplayLabel

        Type:
        string
        Default:
        ""

        Text of the summary method which is shown in summary cell.

        Code Sample

         
        								//Initialize
        								$(".selector").igGrid({
        									features: [
        										{
        											name: "Summaries",
        											columnSettings: [
        												{ columnKey: "ProductID", allowSummaries: false, summaryOperands:
        													[{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0
        													}]
        													}
        											]
        										}
        									]
        								});
        
        								//Get
        								var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
        								var firstColumn = arrayOfColumnSettings[0].summaryOperands;
        								var rowDisplayLabel = firstColumn[0].rowDisplayLabel;
        
        								//Set
        								var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
        								//Set new value
        								arrayOfColumnSettings[0].summaryOperands[0].rowDisplayLabel = "New Label";
        								$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);
        							 
      • summaryCalculator

        Type:
        string
        Default:
        null

        Name of the custom summary function which should be executed when type is custom.

        Code Sample

         
        								$("#grid1").igGrid({
        									autoGenerateColumns: false,
        									columns: [
        										{ headerText: "Product ID", key: "ProductID", dataType: "number", width: 230 },
        										{ headerText: "Product Name", key: "Name", dataType: "string", width: 120 },
        										{ headerText: "Reorder Point", key: "ReorderPoint", dataType: "number", width: 230 },
        										{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: 120 }
        									],
        									dataSource: ds,
        									responseDataKey: "responseKey",
        									features: [
        									{
        										name: "Summaries",
        										showHeaderButton: false,
        										showDropDownButton: true,
        										compactRenderingMode: false,
        										columnSettings: [
        											{ columnKey: "ProductID", allowSummaries: true ,
        															summaryOperands:
        															[
        																{ "rowDisplayLabel": "Avg", "type": "AVG", "active": true},
        																{ "rowDisplayLabel": "Count", "type": "COUNT", "active": true},
        																{ "rowDisplayLabel": "Min", "type": "MIN", "active": true},
        																{ "rowDisplayLabel": "Sum of even numbers", "type": "custom1", "active": true, summaryCalculator: $.proxy(CalculateEvenSum, this), "order": 5},
        																{ "rowDisplayLabel": "Sum of odd numbers", "type": "custom2", "active": true, summaryCalculator: $.proxy(CalculateOddSum, this), "order": 6}
        															]
        											},
        											{ columnKey: "ReorderPoint", allowSummaries: true ,
        															summaryOperands:
        															[
        																{ "rowDisplayLabel": "Avg", "type": "AVG", "active": true },
        																{ "rowDisplayLabel": "Count", "type": "COUNT", "active": true },
        																{ "rowDisplayLabel": "Min", "type": "MIN", "active": true },
        																{ "rowDisplayLabel": "Sum of even numbers", "type": "custom1", "active": true, summaryCalculator: $.proxy(CalculateEvenSum, this), "order": 5},
        																{ "rowDisplayLabel": "Sum of odd numbers", "type": "custom2", "active": true, summaryCalculator: $.proxy(CalculateOddSum, this), "order": 6}
        															]
        															},
        											{ columnKey: "ProductNumber", allowSummaries: true }
        										]
        									}
        									]
        								});
        
        								function CalculateEvenSum (data) {
        									var i, l = data.length, sum = 0;
        
        									for (i = 0; i < l; i++) {
        										elem = data[i];
        										if (elem % 2 === 0) {
        											sum += elem;
        										}
        									}
        									return sum;
        								}
        
        								function CalculateOddSum (data) {
        									var i, l = data.length, sum = 0;
        
        									for (i = 0; i < l; i++) {
        										elem = data[i];
        										if (elem % 2 !== 0) {
        											sum += elem;
        										}
        									}
        									return sum;
        								}
        							 
      • type

        Type:
        enumeration
        Default:
        custom

        Set type of summary operand.

        Members

        • count
        • Type:string
        • calculate count of result rows for the specified column.
        • min
        • Type:string
        • calculate min of result rows for the specified column.
        • max
        • Type:string
        • calculate max of result rows for the specified column.
        • sum
        • Type:string
        • calculate sum of result rows for the specified column.
        • avg
        • Type:string
        • calculate average of result rows for the specified column.
        • custom
        • Type:string
        • calculate custom function (specified by summaryCalculator property) of result rows for the specified column.

        Code Sample

         
        								$("#grid1").igGrid({
        									autoGenerateColumns: false,
        									columns: [
        										{ headerText: "Product ID", key: "ProductID", dataType: "number", width: 230 },
        										{ headerText: "Product Name", key: "Name", dataType: "string", width: 120 },
        										{ headerText: "Reorder Point", key: "ReorderPoint", dataType: "number", width: 230 },
        										{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: 120 }
        									],
        									dataSource: ds,
        									responseDataKey: "responseKey",
        									features: [
        									{
        										name: "Summaries",
        										showHeaderButton: false,
        										showDropDownButton: true,
        										compactRenderingMode: false,
        										columnSettings: [
        											{ columnKey: "ProductID", allowSummaries: true ,
        															summaryOperands:
        															[
        																{ "rowDisplayLabel": "Avg", "type": "AVG", "active": true},
        																{ "rowDisplayLabel": "Count", "type": "COUNT", "active": true},
        																{ "rowDisplayLabel": "Min", "type": "MIN", "active": true},
        																{ "rowDisplayLabel": "Sum of even numbers", "type": "custom1", "active": true, summaryCalculator: $.proxy(CalculateEvenSum, this), "order": 5},
        																{ "rowDisplayLabel": "Sum of odd numbers", "type": "custom2", "active": true, summaryCalculator: $.proxy(CalculateOddSum, this), "order": 6}
        															]
        											},
        											{ columnKey: "ReorderPoint", allowSummaries: true ,
        															summaryOperands:
        															[
        																{ "rowDisplayLabel": "Avg", "type": "AVG", "active": true },
        																{ "rowDisplayLabel": "Count", "type": "COUNT", "active": true },
        																{ "rowDisplayLabel": "Min", "type": "MIN", "active": true },
        																{ "rowDisplayLabel": "Sum of even numbers", "type": "custom1", "active": true, summaryCalculator: $.proxy(CalculateEvenSum, this), "order": 5},
        																{ "rowDisplayLabel": "Sum of odd numbers", "type": "custom2", "active": true, summaryCalculator: $.proxy(CalculateOddSum, this), "order": 6}
        															]
        															},
        											{ columnKey: "ProductNumber", allowSummaries: true }
        										]
        									}
        									]
        								});
        								function CalculateEvenSum (data) {
        									var i, l = data.length, sum = 0;
        									for (i = 0; i < l; i++) {
        										elem = data[i];
        										if (elem % 2 === 0) {
        											sum += elem;
        										}
        									}
        									return sum;
        								}
        								function CalculateOddSum (data) {
        									var i, l = data.length, sum = 0;
        									for (i = 0; i < l; i++) {
        										elem = data[i];
        										if (elem % 2 !== 0) {
        											sum += elem;
        										}
        									}
        									return sum;
        								}
        							 
  • compactRenderingMode

    Type:
    enumeration
    Default:
    true

    Specifies how compact the summaries are rendered. When true indicates that the summaries may be rendered compactly, even mixing different summaries on the same line.
    False ensures that each summary type is occupying a separate line.
    Auto will use True if the maximum number of visible summaries is one or less and False otherwise.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							compactRenderingMode: false
    						}
    					]
    				});
    				//Get
    				var compactRenderingMode = $(".selector").igGridSummaries("option", "compactRenderingMode");
    				//Set
    				$(".selector").igGridSummaries("option", "compactRenderingMode", "auto");
    			 
  • dialogButtonCancelText

    Type:
    string
    Default:
    ""

    Text of the button Cancel in the summaries dropdown.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							dialogButtonCancelText: "New Value"
    						}
    					]
    				});
    				//Get
    				var dialogButtonCancelText = $(".selector").igGridSummaries("option", "dialogButtonCancelText");
    				//Set
    				$(".selector").igGridSummaries("option", "dialogButtonCancelText", "New Value");
    			 
  • dialogButtonOKText

    Type:
    string
    Default:
    ""

    Text of the button OK in the summaries dropdown.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							dialogButtonOKText: "New Value"
    						}
    					]
    				});
    
    				//Get
    				var dialogButtonOKText = $(".selector").igGridSummaries("option", "dialogButtonOKText");
    
    				//Set
    				$(".selector").igGridSummaries("option", "dialogButtonOKText", "New Value");
    			 
  • dropDownDialogAnimationDuration

    Type:
    number
    Default:
    400

    Dropdown animation duration.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							dropDownDialogAnimationDuration: 1000
    						}
    					]
    				});
    
    				//Get
    				var dropDownDialogAnimationDuration = $(".selector").igGridSummaries("option", "dropDownDialogAnimationDuration");
    
    				//Set
    				$(".selector").igGridSummaries("option", "dropDownDialogAnimationDuration", 1500);
    			 
  • dropDownHeight

    Type:
    number
    Default:
    ""

    Height of the dropdown in pixels.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							dropDownHeight: 250
    						}
    					]
    				});
    
    				//Get
    				var dropDownHeight = $(".selector").igGridSummaries("option", "dropDownHeight");
    
    				//Set
    				$(".selector").igGridSummaries("option", "dropDownHeight", 350);
    			 
  • dropDownWidth

    Type:
    number
    Default:
    ""

    Width of the dropdown in pixels.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							dropDownWidth: 250
    						}
    					]
    				});
    
    				//Get
    				var dropDownWidth = $(".selector").igGridSummaries("option", "dropDownWidth");
    
    				//Set
    				$(".selector").igGridSummaries("option", "dropDownWidth", 350);
    			 
  • emptyCellText

    Type:
    string
    Default:
    ""

    Empty text template to be shown for empty cells.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							emptyCellText: "empty cell"
    						}
    					]
    				});
    
    				//Get
    				var emptyCellText = $(".selector").igGridSummaries("option", "emptyCellText");
    
    				//Set
    				$(".selector").igGridSummaries("option", "emptyCellText", "empty cell");
    			 
  • featureChooserText

    Type:
    string
    Default:
    ""

    Get or set text that is shown in the feature chooser dropdown when summaries are hidden.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							featureChooserText: "New Value"
    						}
    					]
    				});
    
    				//Get
    				var featureChooserText = $(".selector").igGridSummaries("option", "featureChooserText");
    
    				//Set
    				$(".selector").igGridSummaries("option", "featureChooserText", "New Value");
    			 
  • featureChooserTextHide

    Type:
    string
    Default:
    ""

    Get or set text that is shown in the feauture chooser dropdown when summaries are shown.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							featureChooserTextHide: "Summaries"
    						}
    					]
    				});
    				//Get
    				var text = $(".selector").igGridSummaries("option", "featureChooserTextHide");
    
    				//Set
    				$(".selector").igGridSummaries("option", "featureChooserTextHide", "Summaries");
    			 
  • inherit

    Type:
    bool
    Default:
    false

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

  • renderSummaryCellFunc

    Type:
    enumeration
    Default:
    null

    a reference or name of a javascript function - renders summary cell in grid footer.(if not set it is used default render function) It takes 3 parameters - methodName(summary method), columnKey, data(summary data which should be rendered).

    Code Sample

     
    				<script type="text/javascript">
    					function renderSummaryCell(methodName, columnKey, data) {
    						var res = data.rowDisplayLabel + " - " + data.result,
    							sContainerId = "#" + this.grid.element[0].id + "_summaries_footer_row_text_container_";
    						this.grid.container()
    							.find(sContainerId + methodName + "_" + columnKey)
    							.html(res);
    					}
    				</script>
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							renderSummaryCellFunc: renderSummaryCell
    							}
    						}
    					]
    				});
    				//Get
    				var showDropDownButton = $(".selector").igGridSummaries("option", "renderSummaryCellFunc");
    				//Set
    				$(".selector").igGridSummaries("option", "renderSummaryCellFunc", renderSummaryCell);
    			 
  • resultTemplate

    Type:
    string
    Default:
    "{0} = {1}"

    Result template for summary result(shown in table cell).

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							resultTemplate: "{0} is {1}"
    						}
    					]
    				});
    
    				//Get
    				var resultTemplate = $(".selector").igGridSummaries("option", "resultTemplate");
    
    				//Set
    				$(".selector").igGridSummaries("option", "resultTemplate", "{0} is {1}");
    			 
  • showDropDownButton

    Type:
    bool
    Default:
    true

    Show/hide footer button(on click show/hide dropdown).

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							showDropDownButton: false
    						}
    					]
    				});
    
    				//Get
    				var showDropDownButton = $(".selector").igGridSummaries("option", "showDropDownButton");
    
    				//Set
    				$(".selector").igGridSummaries("option", "showDropDownButton", false);
    			 
  • showSummariesButton

    Type:
    bool
    Default:
    true

    Show header button icon in the header cell. On click - shows/hides summaries. If false then summary icon should not be shown in the feature chooser(if shown).

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							showSummariesButton: false
    						}
    					]
    				});
    
    				//Get
    				var showSummariesButton = $(".selector").igGridSummaries("option", "showSummariesButton");
    
    				//Set
    				$(".selector").igGridSummaries("option", "showSummariesButton", false);
    			 
  • summariesHeaderButtonTooltip

    Type:
    string
    Default:
    ""

    Tooltip text for header cell button.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							summariesHeaderButtonTooltip: "New ToolTip Text"
    						}
    					]
    				});
    
    				//Get
    				var summariesHeaderButtonTooltip = $(".selector").igGridSummaries("option", "summariesHeaderButtonTooltip");
    
    				//Set
    				$(".selector").igGridSummaries("option", "summariesHeaderButtonTooltip", "New ToolTip Text");
    			 
  • summariesResponseKey

    Type:
    string
    Default:
    "summaries"

    Result key by which we get data from the result returned by remote data source.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							summariesResponseKey: "summaries"
    						}
    					]
    				});
    
    				//Get
    				var summariesResponseKey = $(".selector").igGridSummaries("option", "summariesResponseKey");
    
    				//Set
    				$(".selector").igGridSummaries("option", "summariesResponseKey", "summaries");
    			 
  • summaryExecution

    Type:
    enumeration
    Default:
    afterfilteringbeforepaging

    Determines when the summary values are calculated when type is local.

    Members

    • priortofilteringandpaging
    • Type:string
    • summaries are calculated prior to filtering and paging.
    • afterfilteringbeforepaging
    • Type:string
    • summaries are calculated after filtering and before paging.
    • afterfilteringandpaging
    • Type:string
    • summaries are calculated after filtering and paging.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							summaryExecution: "priortofilteringandpaging"
    						}
    					]
    				});
    				//Get
    				var summaryExecution = $(".selector").igGridSummaries("option", "summaryExecution");
    				//Set
    				$(".selector").igGridSummaries("option", "summaryExecution", "priortofilteringandpaging");
    			 
  • summaryExprUrlKey

    Type:
    string
    Default:
    "summaries"

    Set key in GET Request for summaries - used only when type is remote.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "Summaries",
    							summaryExprUrlKey: "summaries"
    						}
    					]
    				});
    
    				//Get
    				var summaryExprUrlKey = $(".selector").igGridSummaries("option", "summaryExprUrlKey");
    
    				//Set
    				$(".selector").igGridSummaries("option", "summaryExprUrlKey", "summaries");
    			 
  • type

    Type:
    enumeration
    Default:
    null

    type of summaries calculating.

    Members

    • remote
    • Type:string
    • when it is remote summaries calculations are made on the server.
    • local
    • Type:string
    • When it is local calculations are made on the client.

    Code Sample

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

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details
  • dropDownCancelClicked

    Cancellable:
    false

    Event is fired when Cancel button is clicked in drop down.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • columnKey
          Type: String

          Gets the column key for which Cancel button is clicked.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariesdropdowncancelclicked", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get the column key, for which Cancel button is clicked
    					ui.columnKey;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							dropDownCancelClicked: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • dropDownClosed

    Cancellable:
    false

    Event fired after the dropdown for a summary column is closed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • columnKey
          Type: String

          Gets the column key of the column where drop down is closing.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariesdropdownclosed", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get the column key, for which Cancel button is clicked
    					ui.columnKey;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							dropDownClosed: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • dropDownClosing

    Cancellable:
    true

    Event fired before the dropdown for a summary column starts closing
    Return false in order to cancel closing the drop down.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • columnKey
          Type: String

          Gets the column key of the column where drop down is closing.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariesdropdownclosing", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get the column key, for which Cancel button is clicked
    					ui.columnKey;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							dropDownClosing: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • dropDownOKClicked

    Cancellable:
    false

    Event is fired when OK button is clicked in drop down.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • columnKey
          Type: String

          Gets the column key for which OK button is clicked.

        • eventData
          Type: Object

          Gets data for summary methods. Format of event data is {type: "min", active: false};.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariesdropdownokclicked", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get the column key, for which Cancel button is clicked
    					ui.columnKey;
    
    					// get data about which summary methods are(not) selected. Format of event data is {type: "min", active: false};
    					ui.eventData;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							dropDownOKClicked: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • dropDownOpened

    Cancellable:
    false

    Event fired after the summaries dropdown is opened for a specific column.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • columnKey
          Type: String

          Gets the column key of the column where drop down is shown.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariesdropdownopened", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get the column key, for which Cancel button is clicked
    					ui.columnKey;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							dropDownOpened: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • dropDownOpening

    Cancellable:
    true

    Event fired before drop down is opened for a specific column summary
    Return false in order to cancel opening the drop down.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • columnKey
          Type: String

          Gets column key of the column where drop down is opening.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariesdropdownopening", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get the column key, for which Cancel button is clicked
    					ui.columnKey;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							dropDownOpening: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • summariesCalculated

    Cancellable:
    false

    Event fired after summaries calculation are completely made.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • data
          Type: Array

          Gets the data for calculated summaries.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariessummariescalculated", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get data for calculated summaries
    					ui.data;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							summariesCalculated: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • summariesCalculating

    Cancellable:
    true

    Event fired before summaries calculations are made
    Return false in order to cancel calculation of summaries.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariessummariescalculating", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							summariesCalculating: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • summariesMethodSelectionChanged

    Cancellable:
    false

    Event fired when user selects/deselects summary method from checkbox.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • columnKey
          Type: String

          Gets the column key of the column where it is changed selection of summary method.

        • isSelected
          Type: Bool

          Gets whether method is selected or not.

        • methodName
          Type: String

          Gets the summary method name.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariessummariesmethodselectionchanged", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get the column key, for which Cancel button is clicked
    					ui.columnKey;
    
    					// get whether method is selected or not
    					ui.isSelected;
    
    					// get summary method name
    					ui.methodName;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							summariesMethodSelectionChanged: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • summariesToggled

    Cancellable:
    false

    Event is fired after summary rows are toggled.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • isToShow
          Type: Bool

          Gets whether summaries are shown or not.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariessummariestoggled", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get whether summaries are shown or not
    					ui.isToShow;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							summariesToggled: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • summariesToggling

    Cancellable:
    true

    Event is fired bofore summary rows start toggling
    Return false in order to cancel showing/hiding of summaries.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • isToShow
          Type: Bool

          Gets whether summaries are shown or not.

        • owner
          Type: Object

          Gets the igGridSummaries widget object.

    Code Sample

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridsummariessummariestoggling", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// get whether summaries are shown or not
    					ui.isToShow;
    
    					// access the igGridSummaries widget object
    					ui.owner;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "Summaries",
    							summariesToggling: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • calculateSummaries

    .igGridSummaries( "calculateSummaries" );

    Calculate summaries.

    Code Sample

     
    				$("#grid1").igGridSummaries("calculateSummaries");
    			 
  • calculateSummaryColumn

    .igGridSummaries( "calculateSummaryColumn", ck:string, columnMethods:array, data:object, dataType:object );

    Summary calculate the whole data for the specified column key, columnMethods and dataType (used when datasource is remote and dataType is date).

    • ck
    • Type:string
    • ColumnKey.
    • columnMethods
    • Type:array
    • Array of column methods objects.
    • data
    • Type:object
    • Object which represents result
      represents dataType for the current column.
    • dataType
    • Type:object

    Code Sample

     
    				$("#grid1").igGridSummaries("calculateSummaryColumn", "ProductID", [{type: "min", active: true, rowDisplayLabel: "Min", format: "number"}], [{"ProductID": 1}, {"ProductID": 2}], "number");
    			 
  • clearAllFooterIcons

    .igGridSummaries( "clearAllFooterIcons" );

    Remove all summaries dropdown buttons.

    Code Sample

     
    				$("#grid1").igGridSummaries("clearAllFooterIcons");
    			 
  • destroy

    .igGridSummaries( "destroy" );

    Code Sample

    		$("#grid1").igGridSummaries("destroy");
    	  
  • isSummariesRowsHidden

    .igGridSummaries( "isSummariesRowsHidden" );

    Returns whether summaries rows are hidden.

    Code Sample

     
    				$("#grid1").igGridSummaries("isSummariesRowsHidden");
    			 
  • selectCheckBox

    .igGridSummaries( "selectCheckBox", $checkbox:object, isToSelect:bool );

    Select/Unselect specified checkbox.

    • $checkbox
    • Type:object
    • Specifies the jQuery object for checkbox.
    • isToSelect
    • Type:bool
    • Specify whether to select or not checkbox.

    Code Sample

     
    				$("#grid1").igGridSummaries("selectCheckBox", $("#checkboxSelector"), true);
    			 
  • showHideDialog

    .igGridSummaries( "showHideDialog", $dialog:object );

    Show/Hide dialog.

    • $dialog
    • Type:object
    • jQuery object representation of dropdown div element.

    Code Sample

     
    				$("#grid1").igGridSummaries("showHideDialog", $("#dialogSelector"));
    			 
  • summariesFor

    .igGridSummaries( "summariesFor", columnKey:object );

    Return a JQUERY object which holds all summaries for column with the specified column key.

    • columnKey
    • Type:object

    Code Sample

     
    				var summariesResiltByKey = $("#grid1").igGridSummaries("summariesFor", "ProductID");
    			 
  • summaryCollection

    .igGridSummaries( "summaryCollection" );

    Return a JQUERY object which holds all summaries for all columns.

    Code Sample

     
    				var collection = $("#grid1").igGridSummaries("summaryCollection");
    			 
  • toggleCheckstate

    .igGridSummaries( "toggleCheckstate", $checkbox:object );

    Toggles the checkstate of a checkbox if checkboxMode is not set to off, otherwise does nothing.

    • $checkbox
    • Type:object
    • Specifies the jQuery object of the checkbox.

    Code Sample

     
    				$("#grid1").igGridSummaries("toggleCheckstate", $("#checkboxSelector"));
    			 
  • toggleDropDown

    .igGridSummaries( "toggleDropDown", columnKey:string, event:object );

    Toggle drop down.

    • columnKey
    • Type:string
    • toggle drop down for the column with the specified key.
    • event
    • Type:object
    • event object. Its data should contain current columnKey, isAnimating, buttonId.

    Code Sample

     
    				$("#grid1").igGridSummaries("toggleDropDown", null);
    			 
  • toggleSummariesRows

    .igGridSummaries( "toggleSummariesRows", isToShow:bool, isInternalCall:bool );

    Toggle summaries rows.

    • isToShow
    • Type:bool
    • Specifies whether to show or not summaries.
    • isInternalCall
    • Type:bool
    • Optional parameter.Specifies whether this function is called internally by the widget.

    Code Sample

     
    				$("#grid1").igGridSummaries("toggleSummariesRows", true, null);
    			 
  • ui-ie7

    Class for IE7.
  • ui-state-default ui-corner-all ui-igcheckbox-normal

    Classes applied to the checkbox container.
  • ui-state-hover

    Class defining the hover state style of the checkbox.
  • ui-icon ui-icon-check ui-igcheckbox-normal-off

    Classes defining the unchecked state of the checkbox.
  • ui-icon ui-icon-check ui-igcheckbox-normal-on

    Classes defining the checked state of the checkbox.
  • ui-iggrid-summaries-dialog

    Classes applied to dropdown.
  • ui-iggrid-summaries-dropdown-listcontainer ui-widget

    Classes applied to container which holds all checkboxes in dropdown.
  • ui-iggrid-summaries-dialog-listitem

    Classes applied to list item in the dropdown.
  • ui-icon ui-iggrid-icon-summaries

    Classes for icon to be showin in the feature chooser.
  • ui-icon ui-icon-calculator ui-iggrid-icon-summaries

    Classes applied to footer button icon(which show/hide dropdown).
  • ui-iggrid-filterbuttonactive ui-state-active

    Classes applied to footer button icon when selected(the dropdown is opened).
  • ui-iggrid-filterbuttonhover ui-state-hover

    Classes applied to footer button icon when hovered (button show/hide dropdown).
  • ui-iggrid-summaries-footer-dialog-buttons-container

    Classes applied to the container of OK/Cancel button in dropdown.
  • ui-widget-footer ui-state-default

    Classes applied to footer row cell.
  • ui-state-hover

    Classes applied to footer row cell when it is hovered.
  • ui-corner-all ui-iggrid-summaries-footer-icon-container

    Classes applied to DOM element which contains text for icon in the summary cell.
  • ui-iggrid-summaries-footer-icon-container-empty

    Classes applied to DOM element when showSummariesButton is false.
  • ui-iggrid-summaries-footer-text-container

    Classes applied to DOM element in the summary cell which contains text for summaries result.
  • ui-iggrid-summaries-footer-text-container-empty

    Classes applied to DOM element in the summary cell which contains text for summaries result when showSummariesButton is false.
  • ui-iggrid-summaries-headerbuttoncontainer ui-corner-all

    Classes applied to the container div of header button(which shows/hides summaries).
  • ui-iggrid-summaries-header-icon ui-corner-all ui-icon ui-icon-calculator ui-icon-summaries

    Classes applied to the header button(which shows/hides summaries).
  • ui-iggrid-summaries-header-icon-hover ui-state-hover

    Classes applied to the header button when hovered(which shows/hides summaries).

Copyright © 1996 - 2018 Infragistics, Inc. All rights reserved.