ui.igGridColumnFixing

ui.igGridColumnFixing_image

The igGrid control feature column fixing in the grid. The column fixing feature allows you to pin the columns on the left or the right of the grid so that they are always visible.

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 with column fixing feature.

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">
        var products = [
            { "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" }
        ];
 
        $(function () {
            $("#gridColumnFixing").igGrid({
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "200px" },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "250px" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "250px" }
                ],
                features:[
                    {
                        name: "ColumnFixing",
                        columnSettings: [
                            {
                                columnKey: "Name",
                                isFixed: true
                            }
                        ]
                    }
                ],
                width: "500px",
                dataSource: products
            });
        });
    </script>
</head>
<body>
    <table id="gridColumnFixing"></table>
</body>
</html>
    

Related Samples

Related Topics

Dependencies

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

Inherits

  • columnSettings

    Type:
    array
    Default:
    []
    Elements Type:
    object

    List of column settings that specifies custom column fixing options on a per column basis.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							columnSettings: [
    								{
    									columnKey: "Name",
    									allowFixing: false,
    									isFixed: true
    								}
    							]
    						}
    					]
    				});
    
    				//Get
    				var columnSettings = $(".selector").igGridColumnFixing("option", "columnSettings");
    			 
    • allowFixing

      Type:
      bool
      Default:
      true

      Specifies whether the column can be fixed or not. If allow fixing is false, then the fixing pin will not be rendered for the column.

      Code Sample

       
      						//Initialize
      						$(".selector").igGrid({
      							features : [
      								{
      									name : "ColumnFixing",
      									columnSettings: [
      										{
      											columnKey: "Name",
      											allowFixing: false,
      											isFixed: true
      										}
      									]
      								}
      							]
      						});
      
      						//Get
      						var columnSettings = $(".selector").igGridColumnFixing("option", "columnSettings");
      					 
    • columnIndex

      Type:
      number
      Default:
      null

      Identifies the grid column by index. Either key or index must be set in every column setting.

      Code Sample

       
      						//Initialize
      						$(".selector").igGrid({
      							features : [
      								{
      									name : "ColumnFixing",
      									columnSettings: [
      										{
      											columnIndex: 2,
      											allowFixing: false,
      											isFixed: true
      										}
      									]
      								}
      							]
      						});
      
      						//Get
      						var columnSettings = $(".selector").igGridColumnFixing("option", "columnSettings");
      					 
    • columnKey

      Type:
      string
      Default:
      null

      Identifies the grid column by key. Either key or index must be set in every column setting.

      Code Sample

       
      						//Initialize
      						$(".selector").igGrid({
      							features : [
      								{
      									name : "ColumnFixing",
      									columnSettings: [
      										{
      											columnKey: "Name",
      											allowFixing: false,
      											isFixed: true
      										}
      									]
      								}
      							]
      						});
      
      						//Get
      						var columnSettings = $(".selector").igGridColumnFixing("option", "columnSettings");
      					 
    • isFixed

      Type:
      bool
      Default:
      false

      Specifies whether the column is initially fixed or not. Check this topic out for more information.

      Code Sample

       
      						//Initialize
      						$(".selector").igGrid({
      							features : [
      								{
      									name : "ColumnFixing",
      									columnSettings: [
      										{
      											columnKey: "Name",
      											allowFixing: false,
      											isFixed: true
      										}
      									]
      								}
      							]
      						});
      
      						//Get
      						var columnSettings = $(".selector").igGridColumnFixing("option", "columnSettings");
      					 
  • featureChooserTextFixedColumn
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    Text of the feature chooser button for unfixing a currently fixed column. Use option locale.featureChooserTextFixedColumn.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							featureChooserTextFixedColumn: "Fix column"
    						}
    					]
    				});
    
    				//Get
    				var featureChooserTextFixedColumn = $(".selector").igGridColumnFixing("option", "featureChooserTextFixedColumn");
    			 
  • featureChooserTextUnfixedColumn
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    Text of the feature chooser button for unfixing a currently fixed column. Use option locale.featureChooserTextUnfixedColumn.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							featureChooserTextUnfixedColumn: "Unfix column"
    						}
    					]
    				});
    
    				//Get
    				var featureChooserTextUnfixedColumn = $(".selector").igGridColumnFixing("option", "featureChooserTextUnfixedColumn");
    			 
  • fixingDirection

    Type:
    enumeration
    Default:
    left

    Configures which side the fixed columns of the grid will be rendered on. Check this topic out of more information.

    Members

    • left
    • Type:string
    • Fixed columns are rendered on the left side of the main grid.
    • right
    • Type:string
    • Fixed columns are rendered on the right side of the main grid.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							fixingDirection: "right"
    						}
    					]
    				});
    				//Get
    				var fixingDirection = $(".selector").igGridColumnFixing("option", "fixingDirection");
    			 
  • fixNondataColumns

    Type:
    bool
    Default:
    true

    Specify initial fixing of all non data columns. Non-data columns are columns in the grid rendered for specific features, like the row selectors feature. The column containing the row numbering is such a column. This option is applicable when fixingDirection is set to left. For a full column fixing configuration summary please refer to this topic.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							fixNondataColumns: true
    						}
    					]
    				});
    
    				//Get
    				var fixNondataColumns = $(".selector").igGridColumnFixing("option", "fixNondataColumns");
    			 
  • headerFixButtonText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    Specifies the tooltip text on the column fixing header icon when column is not fixed. Use option locale.headerFixButtonText.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							headerFixButtonText: "Click to fix this column"
    						}
    					]
    				});
    
    				//Get
    				var headerFixButtonText = $(".selector").igGridColumnFixing("option", "headerFixButtonText");
    			 
  • headerUnfixButtonText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    Specifies the tooltip text on the column fixing header icon when column is fixed. Use option locale.headerUnfixButtonText.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							headerUnfixButtonText: "Click to unfix this column"
    						}
    					]
    				});
    
    				//Get
    				var headerUnfixButtonText = $(".selector").igGridColumnFixing("option", "headerUnfixButtonText");
    			 
  • language
    Inherited

    Type:
    string
    Default:
    "en"

    Set/Get the locale language setting for the widget.

    Code Sample

     
    					//Initialize
    				$(".selector").igGridColumnFixing({
    					language: "ja"
    				});
    
    				// Get
    				var language = $(".selector").igGridColumnFixing("option", "language");
    
    				// Set
    				$(".selector").igGridColumnFixing("option", "language", "ja");
    			 
  • locale

    Type:
    object
    Default:
    {}

    • featureChooserTextFixedColumn

      Type:
      string
      Default:
      ""

      Text of the feature chooser button for fixing a currently unfixed column.

      Code Sample

       
                          //Initialize
                          $(".selector").igGrid({
                              features : [
                                  {
                                      name : "ColumnFixing",
                                      locale: {
                                          featureChooserTextFixedColumn: "Fix column"
                                      }
                                  }
                              ]
                          });
                          //Get
                          var featureChooserTextFixedColumn = $(".selector").igGridColumnFixing("option", "locale").featureChooserTextFixedColumn;
      
                         //Set
                          $(".selector").igGridColumnFixing("option", "locale", { featureChooserTextFixedColumn : "Fix column"});
                       
    • featureChooserTextUnfixedColumn

      Type:
      string
      Default:
      ""

      Text of the feature chooser button for unfixing a currently fixed column.

      Code Sample

       
                          //Initialize
                          $(".selector").igGrid({
                              features : [
                                  {
                                      name : "ColumnFixing",
                                      locale:{
                                          featureChooserTextUnfixedColumn: "Unfix column"
                                      }
                                  }
                              ]
                          });
                          //Get
                          var featureChooserTextUnfixedColumn = $(".selector").igGridColumnFixing("option", "locale").featureChooserTextUnfixedColumn;
                           //Set
                          $(".selector").igGridColumnFixing("option", "locale", { featureChooserTextUnfixedColumn : "Unfix column"});
                       
    • headerFixButtonText

      Type:
      string
      Default:
      ""

      Specifies the tooltip text on the column fixing header icon when column is not fixed.

      Code Sample

       
      				//Initialize
      				$(".selector").igGrid({
      					features: [
      						{
      							name : "ColumnFixing",
                                  locale: { headerFixButtonText : "Click to fix this column"}
      						}
      					]
      				});
                      //Get
      				var headerFixButtonText = $(".selector").igGridColumnFixing("option", "locale").headerFixButtonText;
      
                      //Set
                      $(".selector").igGridColumnFixing("option", "locale", { headerFixButtonText : "Click to fix this column"});
      				 
    • headerUnfixButtonText

      Type:
      string
      Default:
      ""

      Specifies the tooltip text on the column fixing header icon when column is not fixed.

      Code Sample

       
                      //Initialize
                      $(".selector").igGrid({
                          features: [
                              {
                                  name : "ColumnFixing",
                                  locale: { headerUnfixButtonText : "Click to unfix this column"}
                              }
                          ]
                      });
      
                      //Get
                      var headerUnfixButtonText = $(".selector").igGridColumnFixing("option", "locale").headerUnfixButtonText;
      
                      //Set
                      $(".selector").igGridColumnFixing("option", "locale", { headerUnfixButtonText : "Click to unfix this column"});
      				 
  • minimalVisibleAreaWidth

    Type:
    enumeration
    Default:
    30

    Minimal visible area in pixels for the unfixed columns. If the end user tries to fix a column(or columns), which causes the width of the fixed columns to grow such that the width of visible area of unfixed columns is less than this option then fixing will be canceled. Check this topic out for more information.

    Members

    • string
    • Type:string
    • The width can be set in pixels (px) and percentage (%).
    • number
    • Type:number
    • The width can be set in pixels as a number.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							minimalVisibleAreaWidth: 100
    						}
    					]
    				});
    				//Get
    				var minimalVisibleAreaWidth = $(".selector").igGridColumnFixing("option", "minimalVisibleAreaWidth");
    			 
  • populateDataRowsAttributes
    Deprecated

    Type:
    bool
    Default:
    true

    When true all the TR DOM attributes of the unfixed row will be copied to the fixed row. Note that when enabled this option negatively affects performance when fixing a column.

    Code Sample

     
          //Initialize
            $(".selector").igGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        populateDataRowsAttributes: false
                    }
                ]
            });
            
            //Get
            var populateDataRowsAttributes = $(".selector").igGridColumnFixing("option", "populateDataRowsAttributes");
          
  • regional
    Inherited

    Type:
    enumeration
    Default:
    en-US

    Set/Get the regional setting for the widget.

    Code Sample

     
    				//Initialize
    				$(".selector").igGridColumnFixing({
    					regional: "ja"
    				});
    				// Get
    				var regional = $(".selector").igGridColumnFixing("option", "regional");
    				// Set
    				$(".selector").igGridColumnFixing("option", "regional", "ja");
    			 
  • scrollDelta

    Type:
    number
    Default:
    40

    Scroll delta in pixels when scrolling with the mouse wheel or the keyboard in the fixed columns area of the grid.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							scrollDelta: 100
    						}
    					]
    				});
    
    				//Get
    				var scrollDelta = $(".selector").igGridColumnFixing("option", "scrollDelta");
    			 
  • showFixButtons

    Type:
    bool
    Default:
    true

    Specifies whether to show the column fixing buttons in header cells/feature chooser.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							showFixButtons: false
    						}
    					]
    				});
    
    				//Get
    				var showFixButtons = $(".selector").igGridColumnFixing("option", "showFixButtons");
    			 
  • syncRowHeights

    Type:
    bool
    Default:
    true

    Enable row height sync for the fixed and unfixed portion of the grid. If you're observing row misalignment, please refer to this article.

    Code Sample

     
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "ColumnFixing",
    							syncRowHeights: true
    						}
    					]
    				});
    
    				//Get
    				var syncRowHeights = $(".selector").igGridColumnFixing("option", "syncRowHeights");
    			 

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
  • columnFixed

    Cancellable:
    false

    Event which is fired when column fixing operation is finished.

    • evt
      Type: Event

      JQuery event object.

    • args
      Type: Object

        • columnIdentifier
          Type: Object

          Gets the columnKey or the columnIndex.

        • isGroupHeader
          Type: Bool

          Gets whether header cell has children(use this argument ONLY when multi-column-headers are enabled).

        • owner
          Type: Object

          Gets a reference to the widget.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("iggridcolumnfixingcolumnfixed", ".selector", function (evt, args) {
    					//Get the column key of the fixed column
    					args.columnKey
    					//Get the column index of the fixed column
    					args.columnIndex
    					//Get a reference to the widget
    					args.owner
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "ColumnFixing",
    							columnFixed: function (evt, args) { ... }
    						}
    					]
    				});
    			 
  • columnFixing

    Cancellable:
    true

    Event which is fired when column fixing operation is initiated.

    • evt
      Type: Event

      JQuery event object.

    • args
      Type: Object

        • columnIdentifier
          Type: Object

          Gets the columnKey or the columnIndex.

        • isGroupHeader
          Type: Bool

          Gets whether the header cell has children(use this argument ONLY when multi-column-headers are enabled).

        • owner
          Type: Object

          Gets a reference to the widget.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("iggridcolumnfixingcolumnfixing", ".selector", function (evt, args) {
    					//Get the column key of the fixed column
    					args.columnKey
    					//Get the column index of the fixed column
    					args.columnIndex
    					//Get a reference to the widget
    					args.owner
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "ColumnFixing",
    							columnFixing: function (evt, args) { ... }
    						}
    					]
    				});
    			 
  • columnFixingRefused

    Cancellable:
    false

    Event which is fired when column fixing operation has failed - e.g. sum of the width of the fixed columns container and width of the column to be fixed exceeds the grid width.

    • evt
      Type: Event

      JQuery event object.

    • args
      Type: Object

        • columnIdentifier
          Type: Object

          Gets the columnKey or the columnIndex.

        • isGroupHeader
          Type: Bool

          Gets whether header cell has children(use this argument ONLY when multi-column-headers are enabled).

        • errorMessage
          Type: String

          Gets the error message describing the reason fixing has failed.

        • owner
          Type: Object

          Gets a reference to the widget.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("iggridcolumnfixingcolumnfixingrefused", ".selector", function (evt, args) {
    					//Get the column key of the column to be fixed
    					args.columnKey
    					//Get whether header cell is of type multi-column (when multi-column headers are defined)
    					args.isGroupHeader
    					//Get error message describing the reason fixing has failed
    					args.errorMessage
    					//Get a reference to the widget
    					args.owner
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "ColumnFixing",
    							columnFixingRefused: function (evt, args) { ... }
    						}
    					]
    				});
    			 
  • columnUnfixed

    Cancellable:
    false

    Event which is fired when column unfixing operation is done.

    • evt
      Type: Event

      JQuery event object.

    • args
      Type: Object

        • columnIdentifier
          Type: Object

          Gets the columnKey or the columnIndex.

        • isGroupHeader
          Type: Bool

          Gets whether header cell has children(use this argument ONLY when multi-column-headers are enabled).

        • owner
          Type: Object

          Gets a reference to the widget.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("iggridcolumnfixingcolumnunfixed", ".selector", function (evt, args) {
    					//Get the column key of the column to be fixed
    					args.columnKey
    					//Get the column index of the unfixed column
    					args.columnIndex
    					//Get a reference to the widget
    					args.owner
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "ColumnFixing",
    							columnUnfixed: function (evt, args) { ... }
    						}
    					]
    				});
    			 
  • columnUnfixing

    Cancellable:
    true

    Event which is fired when column unfixing operation is initiated.

    • evt
      Type: Event

      JQuery event object.

    • args
      Type: Object

        • columnIdentifier
          Type: Object

          Gets the columnKey or the columnIndex.

        • isGroupHeader
          Type: Bool

          Gets whether header cell has children(use this argument ONLY when multi-column-headers are enabled).

        • owner
          Type: Object

          Gets a reference to the widget.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("iggridcolumnfixingcolumnunfixing", ".selector", function (evt, args) {
    					//Get the column key of the column to be fixed
    					args.columnKey
    					//Get the column index of the unfixed column
    					args.columnIndex
    					//Get a reference to the widget
    					args.owner
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "ColumnFixing",
    							columnUnfixing: function (evt, args) { ... }
    						}
    					]
    				});
    			 
  • columnUnfixingRefused

    Cancellable:
    false

    Event which is fired when column unfixing operation has failed - e.g.: there is only one fixed visible column(and tries to unfix it) and at least one fixed hidden column.

    • evt
      Type: Event

      JQuery event object.

    • args
      Type: Object

        • columnIdentifier
          Type: Object

          Gets the columnKey or the columnIndex.

        • isGroupHeader
          Type: Bool

          Gets whether header cell has children(use this argument ONLY when multi-column-headers are enabled).

        • errorMessage
          Type: String

          Gets the error message describing the reason fixing has failed.

        • owner
          Type: Object

          Gets a reference to the widget.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("iggridcolumnfixingcolumnunfixingrefused", ".selector", function (evt, args) {
    					//Get a reference to the grid widget
    					args.owner
    					//Get the columnKey or columnIndex
    					args.columnIdentifier
    					//Get whether header cell has children
    					args.isGroupHeader
    					//Get error message describing the reason unfixing has failed
    					args.errorMessage
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features: [
    						{
    							name: "ColumnFixing",
    							columnUnfixingRefused: function (evt, args) { ... }
    						}
    					]
    				});
    			 
  • changeLocale

    .igGridColumnFixing( "changeLocale" );

    Changes the all locales into the widget element to the language specified in options.language
    Note that this method is for rare scenarios, see language or locale option setter.

    Code Sample

     
    				$(".selector").igGridColumnFixing("changeLocale");
    			 
  • checkAndSyncHeights

    .igGridColumnFixing( "checkAndSyncHeights" );

    Checks whether the heights of fixed and unfixed tables are equal - if not sync them. Similar check is made for heights of table rows.

    Code Sample

     
    				$(".selector").igGridColumnFixing("checkAndSyncHeights");
    			 
  • checkFixingAllowed

    .igGridColumnFixing( "checkFixingAllowed", columns:array );
    Return Type:
    bool
    Return Type Description:
    Returns whether column fixing can be performed for the specified columns.

    Checks whether column fixing is allowed for the specified columns. It should not be allowed if there is only one visible column in the unfixed area.

    • columns
    • Type:array
    • Array of columns and/or column identifiers - could be column indexes, column keys, column object or mixed.

    Code Sample

     
    				$(".selector").igGridColumnFixing("checkFixingAllowed", columns[0]);
    			 
  • checkUnfixingAllowed

    .igGridColumnFixing( "checkUnfixingAllowed", columns:array );
    Return Type:
    bool
    Return Type Description:
    Returns whether column unfixing can be performed for the specified columns.

    Checks whether unfixing is allowed for the specified columns. It should not be allowed if there is only one visible column in the fixed area.

    • columns
    • Type:array
    • Array of columns and/or column identifiers - could be column indexes, column keys, column object or mixed.

    Code Sample

     
    				$(".selector").igGridColumnFixing("checkUnfixingAllowed", columns[0]);
    			 
  • destroy

    .igGridColumnFixing( "destroy" );

    Destroys the column fixing widget.

    Code Sample

     
    				$(".selector").igGridColumnFixing("destroy");
    			 
  • fixColumn

    .igGridColumnFixing( "fixColumn", colIdentifier:object, [target:string], [after:bool] );
    Return Type:
    object
    Return Type Description:
    Object description: { result: indicates whether fixing is successful, error: error message describing the reason fixing has failed, col: reference to the column object(if column identifier is not valid - then its value is null) }.

    Fixes a column by specified column identifier - column index or column key.

    • colIdentifier
    • Type:object
    • An identifier of the column to be fixed - column index or column key.
    • target
    • Type:string
    • Optional
    • Key of the column where the fixed column should move to.
    • after
    • Type:bool
    • Optional
    • Specifies where the fixed column should be moved after or before the target column. This parameter is disregarded if there is no target column specified.

    Code Sample

     
    				$(".selector").igGridColumnFixing("fixColumn", "Name", false);
    			 
  • fixDataSkippedColumns
    Deprecated

    .igGridColumnFixing( "fixDataSkippedColumns" );

    This function is deprecated - use function fixNonDataColumns.

  • fixNonDataColumns

    .igGridColumnFixing( "fixNonDataColumns" );

    Fixes non-data columns (such as the row numbering column of row selectors) if any and if fixingDirection is left. Does nothing if the non-data columns are already fixed.

    Code Sample

     
    				$(".selector").igGridColumnFixing("fixNonDataColumns");
    			 
  • getWidthOfFixedColumns

    .igGridColumnFixing( "getWidthOfFixedColumns", [fCols:array], [excludeNonDataColumns:bool], [includeHidden:bool] );
    Return Type:
    number
    Return Type Description:
    Returns the total width of the columns.

    Calculates widths of the fixed columns.

    • fCols
    • Type:array
    • Optional
    • Array of grid columns. If not set then the total width of the fixed columns are returned.
    • excludeNonDataColumns
    • Type:bool
    • Optional
    • If set to true do not calculate the width of non-data fixed columns (like the row selector row numbering column).
    • includeHidden
    • Type:bool
    • Optional
    • If set to true calculates width of the hidden fixed columns (their initial width before hiding).

    Code Sample

     
    				$(".selector").igGridColumnFixing("getWidthOfFixedColumns", [$(".selector").igGrid("option", "columns")[1]], true, false);
    			 
  • isGroupHeader

    .igGridColumnFixing( "isGroupHeader", colKey:string );
    Return Type:
    bool
    Return Type Description:
    Returns whether the column is a group header.

    Returns whether the column with the specified key is a column group header, when the multi-column headers feature is used.

    • colKey
    • Type:string
    • The key of the column to perform the check for.

    Code Sample

     
    				$(".selector").igGridColumnFixing("isGroupHeader", "Name");
    			 
  • syncHeights

    .igGridColumnFixing( "syncHeights", [check:bool], [clearRowsHeights:bool] );

    If the 'check' argument is set to true, checks whether the heights of fixed and unfixed tables are equal, if not sync them. Similar check is made for heights of table rows. If the clearRowsHeights argument is set to true, clears rows heights before syncing them.

    • check
    • Type:bool
    • Optional
    • If set to true, checks whether the heights of fixed and unfixed tables are equal, if not sync them. If this argument is set to false sync is performed regardless of the current heights.
    • clearRowsHeights
    • Type:bool
    • Optional
    • Clears row heigths for all visible rows.

    Code Sample

     
                    $(".selector").igGridColumnFixing("syncHeights", true, true);
                 
  • syncRowsHeights

    .igGridColumnFixing( "syncRowsHeights", $trs:array, $anotherRows:array );

    Syncs rows heights between two collections of rows.

    • $trs
    • Type:array
    • An array of rows of the first(fixed/unfixed) container.
    • $anotherRows
    • Type:array
    • An array of rows of the second(fixed/unfixed) container.

    Code Sample

     
    				var $fixedRows = $(".selector").igGrid("fixedRows");
    				var $unfixedRows = $(".selector").igGrid("rows");
    				$(".selector").igGridColumnFixing("syncRowsHeights", $fixedRows, $unfixedRows);
    			 
  • unfixAllColumns

    .igGridColumnFixing( "unfixAllColumns" );

    Unfixes all fixed columns.

    Code Sample

     
    				$(".selector").igGridColumnFixing("unfixAllColumns");
    			 
  • unfixColumn

    .igGridColumnFixing( "unfixColumn", colIdentifier:object, [target:string], [after:bool] );
    Return Type:
    object
    Return Type Description:
    Object description: { result: indicates whether unfixing is successful, error: error message describing the reason unfixing has failed, col: reference to the column object(if column identifier is not valid - then its value is null) }.

    Unfixes a column by specified column identifier - column key or column index.

    • colIdentifier
    • Type:object
    • An identifier of the column to be unfixed - column index or column key.
    • target
    • Type:string
    • Optional
    • Key of the column where the unfixed column should move to.
    • after
    • Type:bool
    • Optional
    • Specifies where the unfixed column should be rendered after or before the target column. This parameter is disregarded if there is no target column specified.

    Code Sample

     
    				$(".selector").igGridColumnFixing("unfixColumn", "Name", false);
    			 
  • unfixDataSkippedColumns
    Deprecated

    .igGridColumnFixing( "unfixDataSkippedColumns" );

    This function is deprecated - use function unfixNonDataColumns.

  • unfixNonDataColumns

    .igGridColumnFixing( "unfixNonDataColumns" );

    Unfixes non-data columns (such as the row numbering column of row selectors) if any and if fixingDirection is left. Does nothing if the non-data columns are already fixed.

    Code Sample

     
    				$(".selector").igGridColumnFixing("unfixNonDataColumns");
    			 
  • ui-icon ui-iggrid-icon-unfix

    Classes applied in feature chooser icon when column is not fixed.
  • ui-icon ui-iggrid-icon-fix

    Classes applied in feature chooser icon when column is fixed.
  • ui-iggrid-fixedcontainer

    Classes applied to the main fixed container.
  • ui-icon ui-corner-all ui-icon-pin-w

    Classes applied to header cell button for fixing column.
  • ui-iggrid-fixcolumn-headerbuttoncontainer

    Classes applied to the container div of header button(which holds button for fixing/unfixing).
  • ui-icon ui-corner-all ui-icon-pin-s

    Classes applied to header cell button for unfixing column.
  • ui-iggrid-fixedcontainer-left

    Classes applied to the left side container.
  • ui-iggrid-fixedcontainer-right

    Classes applied right side fixed container.
  • ui-iggrid-unfixed-table-left

    Classes applied in unfixed table when fixing direction is left.
  • ui-iggrid-unfixed-table-right

    Classes applied in unfixed table when fixing direction is right.

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