Ignite UI API Reference

ui.igTreeGridColumnFixing

ui.igTreeGridColumnFixing_image

The igTreeGrid includes column fixing which 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.

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 employees = [
                    { "employeeId": 0, "supervisorId": -1, "firstName": "Andrew", "lastName": "Fuller" },
                    { "employeeId": 1, "supervisorId": -1, "firstName": "Jonathan", "lastName": "Smith" },
                    { "employeeId": 2, "supervisorId": -1, "firstName": "Nancy", "lastName": "Davolio" },
                    { "employeeId": 3, "supervisorId": -1, "firstName": "Steven", "lastName": "Buchanan" },

                    // Andrew Fuller's direct reports
                    { "employeeId": 4, "supervisorId": 0, "firstName": "Janet", "lastName": "Leverling" },
                    { "employeeId": 5, "supervisorId": 0, "firstName": "Laura", "lastName": "Callahan" },
                    { "employeeId": 6, "supervisorId": 0, "firstName": "Margaret", "lastName": "Peacock" },
                    { "employeeId": 7, "supervisorId": 0, "firstName": "Michael", "lastName": "Suyama" },

                    // Janet Leverling's direct reports
                    { "employeeId": 8, "supervisorId": 4, "firstName": "Anne", "lastName": "Dodsworth" },
                    { "employeeId": 9, "supervisorId": 4, "firstName": "Danielle", "lastName": "Davis" },
                    { "employeeId": 10, "supervisorId": 4, "firstName": "Robert", "lastName": "King" },

                    // Nancy Davolio's direct reports
                    { "employeeId": 11, "supervisorId": 2, "firstName": "Peter", "lastName": "Lewis" },
                    { "employeeId": 12, "supervisorId": 2, "firstName": "Ryder", "lastName": "Zenaida" },
                    { "employeeId": 13, "supervisorId": 2, "firstName": "Wang", "lastName": "Mercedes" },

                    // Steve Buchanan's direct reports
                    { "employeeId": 14, "supervisorId": 3, "firstName": "Theodore", "lastName": "Zia" },
                    { "employeeId": 15, "supervisorId": 3, "firstName": "Lacota", "lastName": "Mufutau" },

                    // Lacota Mufutau's direct reports
                    { "employeeId": 16, "supervisorId": 15, "firstName": "Jin", "lastName": "Elliott" },
                    { "employeeId": 17, "supervisorId": 15, "firstName": "Armand", "lastName": "Ross" },
                    { "employeeId": 18, "supervisorId": 15, "firstName": "Dane", "lastName": "Rodriquez" },

                    // Dane Rodriquez's direct reports
                    { "employeeId": 19, "supervisorId": 18, "firstName": "Declan", "lastName": "Lester" },
                    { "employeeId": 20, "supervisorId": 18, "firstName": "Bernard", "lastName": "Jarvis" },

                    // Bernard Jarvis' direct report
                    { "employeeId": 21, "supervisorId": 20, "firstName": "Jeremy", "lastName": "Donaldson" }
                ];

               $(function () {
                   $("#treegrid").igTreeGrid({
                       dataSource: employees,
                       primaryKey: "employeeId",
                       foreignKey: "supervisorId",
                       autoGenerateColumns: false,
                       columns: [
                           { headerText: "ID", key: "employeeId", width: "150px", dataType: "number" },
                           { headerText: "First", key: "firstName", width: "150px", dataType: "string" },
                           { headerText: "Last", key: "lastName", width: "150px", dataType: "string" }
                       ],
                       features: [
                           {
                               name: "ColumnFixing"
                           }
                       ]
                   });
               });
            </script>
        </head>
        <body>
            <div id="treegrid"></div>
        </body>
        </html>
    

Related Topics

Dependencies

jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.ui.treegrid.js
infragistics.util.js
infragistics.ui.grid.framework.js
infragistics.ui.grid.columnfixing.js

Inherits

  • &nbspcolumnSettings

    Type:
    array
    Default:
    []
    Elements Type:
    object

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

    Code Sample

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

      Type:
      bool
      Default:
      true

      Specifies whether the column allows to be fixed or not.

      Code Sample

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

      Type:
      number
      Default:
      null

      Specifies column index. Either key or index must be set in every column setting.

      Code Sample

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

      Type:
      string
      Default:
      null

      Specifies column key. Either key or index must be set in every column setting.

      Code Sample

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

      Type:
      bool
      Default:
      false

      Specifies whether the column to be fixed or not.

      Code Sample

       //Initialize
              $(".selector").igTreeGrid({
                  features : [
                      {
                          name : "ColumnFixing",
                          columnSettings: [
                              {
                                  columnKey: "firstName",
                                  allowFixing: false,
                                  isFixed: true
                              }
                          ]
                      }
                  ]
              });
              
              //Get
              var columnSettings = $(".selector").igTreeGridColumnFixing("option", "columnSettings"); 
  • &nbspfeatureChooserTextFixedColumn

    Type:
    string
    Default:
    ""

    Feature chooser text of the fixed column.

    Code Sample

      //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        featureChooserTextFixedColumn: "Fix column"
                    }
                ]
            });
            
            //Get
            var featureChooserTextFixedColumn = $(".selector").igTreeGridColumnFixing("option", "featureChooserTextFixedColumn"); 
  • &nbspfeatureChooserTextUnfixedColumn

    Type:
    string
    Default:
    ""

    Feature chooser text of the unfixed column.

    Code Sample

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        featureChooserTextUnfixedColumn: "Unfix column"
                    }
                ]
            });
            
            //Get
            var featureChooserTextUnfixedColumn = $(".selector").igTreeGridColumnFixing("option", "featureChooserTextUnfixedColumn"); 
  • &nbspfixingDirection

    Type:
    enumeration
    Default:
    left

    configure on which side to render fixed area.

    Members

    • left
    • Type:string
    • fixed column are rendered on the left side of the main grid.
    • right
    • Type:string
    • fixed column are rendered on the right side of the main grid.

    Code Sample

    //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        fixingDirection: "right"
                    }
                ]
            });
            
            //Get
            var fixingDirection = $(".selector").igTreeGridColumnFixing("option", "fixingDirection");  
  • &nbspfixNondataColumns

    Type:
    bool
    Default:
    true

    Specify initial fixing of non data columns(like specific rowSelectors columns on the left side of the grid) when fixingDirection is left.

    Code Sample

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        fixNondataColumns: true
                    }
                ]
            });
            
            //Get
            var fixNondataColumns = $(".selector").igTreeGridColumnFixing("option", "fixNondataColumns"); 
  • &nbspheaderFixButtonText

    Type:
    string
    Default:
    ""

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

    Code Sample

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        headerFixButtonText: "Click to fix this column"
                    }
                ]
            });
            
            //Get
            var headerFixButtonText = $(".selector").igTreeGridColumnFixing("option", "headerFixButtonText"); 
  • &nbspheaderUnfixButtonText

    Type:
    string
    Default:
    ""

    Specifies altering text on column fixing header icon when column is fixed.

    Code Sample

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        headerUnfixButtonText: "Click to unfix this column"
                    }
                ]
            });
            
            //Get
            var headerUnfixButtonText = $(".selector").igTreeGridColumnFixing("option", "headerUnfixButtonText"); 
  • &nbspminimalVisibleAreaWidth

    Type:
    enumeration
    Default:
    30

    minimal visible area for unfixed columns. For instance if you fix a column(or columns) and the width of the fixed columns is such that the width of visible are of unfixed columns is less than this option then fixing will be canceled.

    Members

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

    Code Sample

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        minimalVisibleAreaWidth: 100
                    }
                ]
            });
            
            //Get
            var minimalVisibleAreaWidth = $(".selector").igTreeGridColumnFixing("option", "minimalVisibleAreaWidth"); 
  • &nbsppopulateDataRowsAttributes

    Type:
    bool
    Default:
    true

    If true then on column fixing when creating table rows all row attributes for the unfixed rows will be set in fixed rows too. Because of performance issue you can set this option to false.

    Code Sample

     
            //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        populateDataRowsAttributes: false
                    }
                ]
            });
            
            //Get
            var populateDataRowsAttributes = $(".selector").igTreeGridColumnFixing("option", "populateDataRowsAttributes");
            
  • &nbspscrollDelta

    Type:
    number
    Default:
    40

    Option to configure scroll delta when scrolling with mouse wheel or keyboard in fixed columns area.

    Code Sample

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        scrollDelta: 100
                    }
                ]
            });
            
            //Get
            var scrollDelta = $(".selector").igTreeGridColumnFixing("option", "scrollDelta");  
  • &nbspshowFixButtons

    Type:
    bool
    Default:
    true

    Option to show column fixing buttons in header cells/feature chooser.

    Code Sample

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        showFixButtons: false
                    }
                ]
            });
            
            //Get
            var showFixButtons = $(".selector").igTreeGridColumnFixing("option", "showFixButtons"); 
  • &nbspsyncRowHeights

    Type:
    bool
    Default:
    true

    Option enable syncing heights of rows between fixed/unfixed rows.

    Code Sample

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "ColumnFixing",
                        syncRowHeights: true
                    }
                ]
            });
            
            //Get
            var syncRowHeights = $(".selector").igTreeGridColumnFixing("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
  • &nbspcolumnFixed

    Cancellable:
    false

    Event which is fired when column fixing operation is finished
    use args.columnIdentifier to get columnKey or columnIndex
    use args.isGroupHeader to get whether header cell has children(use this argument ONLY when multi-column-headers are enabled)
    use args.owner to get a reference to the widget.

    Code Sample

    //Bind after initialization
            $(document).delegate(".selector", "igtreegridcolumnfixingcolumnfixed", 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").igTreeGrid({
                features: [
                    {
                        name: "ColumnFixing",
                        columnFixed: function (evt, args) { ... }
                    }
                ]
            });  
  • &nbspcolumnFixing

    Cancellable:
    true

    Event which is fired when column fixing operation is initiated
    use args.columnIdentifier to get columnKey or columnIndex
    use args.isGroupHeader to get whether header cell has children(use this argument ONLY when multi-column-headers are enabled)
    use args.owner to get a reference to the widget.

    Code Sample

     //Bind after initialization
            $(document).delegate(".selector", "igtreegridcolumnfixingcolumnfixing", 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").igTreeGrid({
                features: [
                    {
                        name: "ColumnFixing",
                        columnFixing: function (evt, args) { ... }
                    }
                ]
            }); 
  • &nbspcolumnFixingRefused

    Cancellable:
    false

    Event which is fired when column fixing operation is initiated but sum of the width of the fixed columns container and width of the column to be fixed exceeds the grid width
    use args.columnIdentifier to get columnKey or columnIndex
    use args.isGroupHeader to get whether header cell has children(use this argument ONLY when multi-column-headers are enabled)
    use args.owner to get a reference to the grid widget.

    Code Sample

     //Bind after initialization
            $(document).delegate(".selector", "igtreegridcolumnfixingcolumnfixingrefused", 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 a reference to the widget
                args.owner
            });
            
            //Initialize
            $(".selector").igTreeGrid({
                features: [
                    {
                        name: "ColumnFixing",
                        columnFixingRefused: function (evt, args) { ... }
                    }
                ]
            }); 
  • &nbspcolumnUnfixed

    Cancellable:
    false

    Event which is fired when column unfixing operation is done
    use args.columnIdentifier to get columnKey or columnIndex
    use args.isGroupHeader to get whether header cell has children(use this argument ONLY when multi-column-headers are enabled)
    use args.owner to get a reference to the widget.

    Code Sample

    //Bind after initialization
            $(document).delegate(".selector", "igtreegridcolumnfixingcolumnunfixed", 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").igTreeGrid({
                features: [
                    {
                        name: "ColumnFixing",
                        columnUnfixed: function (evt, args) { ... }
                    }
                ]
            });  
  • &nbspcolumnUnfixing

    Cancellable:
    true

    Event which is fired when column unfixing operation is initiated
    use args.columnIdentifier to get columnKey or columnIndex
    use args.isGroupHeader to get whether header cell has children(use this argument ONLY when multi-column-headers are enabled)
    use args.owner to get a reference to the widget.

    Code Sample

     //Bind after initialization
            $(document).delegate(".selector", "igtreegridcolumnfixingcolumnunfixing", 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").igTreeGrid({
                features: [
                    {
                        name: "ColumnFixing",
                        columnUnfixing: function (evt, args) { ... }
                    }
                ]
            }); 
  • &nbspcolumnUnfixingRefused

    Cancellable:
    false

    Event which is fired when column unfixing operation is initiated but it is not allowed unfixing - e.g. there is only one fixed visible column and at least one fixed hidden column
    use args.columnIdentifier to get columnKey or columnIndex
    use args.isGroupHeader to get whether header cell has children(use this argument ONLY when multi-column-headers are enabled)
    use args.owner to get a reference to the grid widget.

  • &nbspcheckFixingAllowed

    .igTreeGridColumnFixing( "checkFixingAllowed", columns:array );
    Return Type:
    bool
    Return Type Description:
    returns whether it is allowed fixing for the specified columns.

    Check whether fixing is allowed for the passed argument - columns. It should not be allowed if there is only one visible column in unfixed area and there are hidden unfixed columns.

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

    Code Sample

     $(".selector").igTreeGridColumnFixing("checkFixingAllowed", [0]); 
  • &nbspcheckUnfixingAllowed

    .igTreeGridColumnFixing( "checkUnfixingAllowed", columns:array );
    Return Type:
    bool
    Return Type Description:
    returns whether it is allowed unfixing for the specified columns.

    Check whether unfixing is allowed for the passed argument - columns. It should not be allowed if there is only one visible column in fixed area and there are hidden fixed columns.

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

    Code Sample

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

    .igTreeGridColumnFixing( "destroy" );

    Code Sample

      $(".selector").igTreeGridColumnFixing("destroy"); 
  • &nbspfixColumn

    .igTreeGridColumnFixing( "fixColumn", colIdentifier:object, [isGroupHeader:bool], [target:string], [after:bool] );

    Fix 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.
    • isGroupHeader
    • Type:bool
    • Optional
    • when true indicates that the column is multi-column header.
    • 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").igTreeGridColumnFixing("fixColumn", "firstName", false);  
  • &nbspfixDataSkippedColumns

    .igTreeGridColumnFixing( "fixDataSkippedColumns" );

    Fix data skipped columns(like row selectors) if any when fixing direction is left. If already fixed nothing is done.

    Code Sample

     $(".selector").igTreeGridColumnFixing("fixDataSkippedColumns"); 
  • &nbspsyncRowsHeights

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

    Syncs rows heights between $rows and $anotherRows.

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

    Code Sample

     
            var $fixedRows = $(".selector").igTreeGrid("fixedRows");
            var $unfixedRows = $(".selector").igTreeGrid("rows");
            $(".selector").igTreeGridColumnFixing("syncRowsHeights", $fixedRows, $unfixedRows);
          
  • &nbspunfixAllColumns

    .igTreeGridColumnFixing( "unfixAllColumns" );

    Unfix all columns.

    Code Sample

     $(".selector").igTreeGridColumnFixing("unfixAllColumns"); 
  • &nbspunfixColumn

    .igTreeGridColumnFixing( "unfixColumn", colIdentifier:object, [isGroupHeader:bool], [target:string], [after:bool] );

    Unfix 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.
    • isGroupHeader
    • Type:bool
    • Optional
    • when true indicates that the column is multi-column header.
    • 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 moved after or before the target column. This parameter is disregarded if there is no target column specified.

    Code Sample

     $(".selector").igTreeGridColumnFixing("unfixColumn", "firstName", false); 
  • &nbspunfixDataSkippedColumns

    .igTreeGridColumnFixing( "unfixDataSkippedColumns" );

    Unfix data skipped columns(like row selectors) if any when fixingDirection is left.

    Code Sample

     $(".selector").igTreeGridColumnFixing("unfixDataSkippedColumns"); 
  • 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.

#