ui.igTreeGridHiding

ui.igTreeGridHiding_image

The igTreeGrid includes the column hiding feature that allows users to remove and restore columns from the visible layout of the grid. 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: "Hiding",
                             columnSettings: [
                             {
                                columnKey: "employeeId",
                                allowHiding: true,
                                hidden: true
                             },
                             {
                                columnKey: "lastName",
                                allowHiding: false
                             }
                          ]
                         }
                     ]
                   });
               });
            </script>
        </head>
        <body>
            <table id="treegrid"></table>
        </body>
        </html>

Related Topics

Dependencies

jquery-1.9.1.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.hiding.js

Inherits

  • columnChooserAnimationDuration
    Inherited

    Type:
    number
    Default:
    200

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

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserAnimationDuration: 300
						}
					]
				});
				//Get
				var duration = $(".selector").igTreeGridHiding("option", "columnChooserAnimationDuration");

  • columnChooserButtonApplyText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    Specifies text of button which apply changes in modal dialog. Use option locale.columnChooserButtonApplyText.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserButtonApplyText: "Apply"
						}
					]
				});
				//Get
				var text = $(".selector").igTreeGridHiding("option", "columnChooserButtonApplyText");

  • columnChooserButtonCancelText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    Specifies text of button which cancel changes in modal dialog. Use option locale.columnChooserButtonCancelText.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserButtonCancelText: "Cancel"
						}
					]
				});
				//Get
				var text = $(".selector").igTreeGridHiding("option", "columnChooserButtonCancelText");

  • columnChooserCaptionText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    The caption of the column chooser dialog. Use option locale.columnChooserCaptionText.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserCaptionText: "New Caption"
						}
					]
				});
				//Get
				var columnChooserCaptionText = $(".selector").igTreeGridHiding("option", "columnChooserCaptionText");

  • columnChooserContainment
    Inherited

    Type:
    string
    Default:
    "owner"

    Controls containment behavior.

    owner The column chooser dialog will be draggable only in the grid area
    window The column chooser dialog will be draggable in the whole window area.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserContainment: "window"
						}
					]
				});

				//Get
				var columnChooserContainment = $(".selector").igTreeGridHiding("option", "columnChooserContainment");

  • columnChooserDisplayText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    The text used in the drop down tools menu(Feature Chooser) to launch the column chooser dialog. Use option locale.columnChooserDisplayText.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserDisplayText: "New Text"
						}
					]
				});

				//Get
				var columnChooserDisplayText = $(".selector").igTreeGridHiding("option", "columnChooserDisplayText");

  • columnChooserHeight
    Inherited

    Type:
    string
    Default:
    ""

    The default column chooser height.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserHeight: 100
						}
					]
				});
				//Get
				var columnChooserHeight = $(".selector").igTreeGridHiding("option", "columnChooserHeight");

  • columnChooserHideOnClick
    Inherited

    Type:
    bool
    Default:
    false

    Specifies on click show/hide directly to be shown/hidden columns. If columnChooserHideOnClick is false then Apply and Cancel Buttons are shown on the bottom of modal dialog. Columns are Shown/Hidden after the Apply button is clicked.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserHideOnClick: true
						}
					]
				});
				//Get
				var onClick = $(".selector").igTreeGridHiding("option", "columnChooserHideOnClick");

  • columnChooserHideText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    The text used in the column chooser to hide column. Use option locale.columnChooserHideText.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserHideText: "Hide column"
						}
					]
				});
				//Get
				var text = $(".selector").igTreeGridHiding("option", "columnChooserHideText");

  • columnChooserResetButtonLabel
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    Text label for reset button. Use option locale.columnChooserResetButtonLabel.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserResetButtonLabel: "Reset"
						}
					]
				});
				//Get
				var text = $(".selector").igTreeGridHiding("option", "columnChooserResetButtonLabel");

  • columnChooserShowText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    The text used in the column chooser to show column. Use option locale.columnChooserShowText.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserShowText: "Show Column"
						}
					]
				});
				//Get
				var text = $(".selector").igTreeGridHiding("option", "columnChooserShowText");

  • columnChooserWidth
    Inherited

    Type:
    string
    Default:
    "350"

    The default column chooser width.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserWidth: 100
						}
					]
				});
				//Get
				var columnChooserWidth = $(".selector").igTreeGridHiding("option", "columnChooserWidth");

  • columnHideText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    The text used in the drop down tools menu(Feature Chooser) to hide a column. Use option locale.columnHideText.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnHideText: "Functionallity to hide the column"
						}
					]
				});
				//Get
				var columnHideText = $(".selector").igTreeGridHiding("option", "columnHideText");

  • columnSettings
    Inherited

    Type:
    array
    Default:
    []
    Elements Type:
    object

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

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
			columnSettings: [
								{ columnKey: "ProductID", allowHiding: true },
							]
						}
					]
				});
				//Get
				var columnSettings = $(".selector").igTreeGridHiding("option", "columnSettings");

    • allowHiding

      Type:
      bool
      Default:
      true

      Allows the column to be hidden.

      Code Sample

       
						//Initialize
						$(".selector").igTreeGrid({
							features: [
								{
									name: "Hiding",
									columnSettings: [
										{ columnIndex: 0, allowHiding: true },
									]
								}
							]
						});
						//Get
						var columnSettings = $(".selector").igTreeGridHiding("option", "columnSettings");
						var allowHiding = columnSettings[0].allowHiding;

    • columnIndex

      Type:
      number
      Default:
      null

      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").igTreeGrid({
							features: [
								{
									name: "Hiding",
									columnSettings: [
										{ columnIndex: 0, allowHiding: true },
									]
								}
							]
						});

    • 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").igTreeGrid({
							features: [
								{
									name: "Hiding",
									columnSettings: [
										{ columnKey: "ProductID", allowHiding: true },
									]
								}
							]
						});

    • hidden

      Type:
      bool
      Default:
      false

      Sets the initial visibility of the column.

      Code Sample

       
						//Initialize
						$(".selector").igTreeGrid({
							features: [
								{
									name: "Hiding",
									columnSettings: [
										{ columnKey: "ProductID", hidden: true },
									]
								}
							]
						});

  • dialogWidget
    Inherited

    Type:
    string
    Default:
    "igGridModalDialog"

    Name of the dialog widget to be used. It should inherit from $.ui.igGridModalDialog.

    Code Sample

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

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

  • dropDownAnimationDuration
    Inherited

    Type:
    number
    Default:
    500

    The duration of the dropdown animation in milliseconds.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							dropDownAnimationDuration: 500
						}
					]
				});
				//Get
				var dropDownAnimationDuration = $(".selector").igTreeGridHiding("option", "dropDownAnimationDuration");

  • hiddenColumnIndicatorHeaderWidth
    Inherited

    Type:
    number
    Default:
    7

    The width in pixels of the hidden column indicator in the header.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							hiddenColumnIndicatorHeaderWidth: 15
						}
					]
				});
				//Get
				var hiddenColumnIndicatorHeaderWidth = $(".selector").igTreeGridHiding("option", "hiddenColumnIndicatorHeaderWidth");

  • hiddenColumnIndicatorTooltipText
    Removed

    Type:
    string
    Default:
    ""

    This option has been removed as of 2017.2 Volume release.
    The text displayed in the tooltip of the hidden column indicator. Use option locale.hiddenColumnIndicatorTooltipText.

    Code Sample

     
				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							hiddenColumnIndicatorTooltipText: "New Tooltip Text"
						}
					]
				});
				//Get
				var hiddenColumnIndicatorTooltipText = $(".selector").igTreeGridHiding("option", "hiddenColumnIndicatorTooltipText");

  • locale
    Inherited

    Type:
    object
    Default:
    {}

    • columnChooserButtonApplyText

      Type:
      string
      Default:
      ""

      Specifies the text of the button which applies changes in the modal dialog.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							columnChooserButtonApplyText: "Apply"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserButtonApplyText;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { columnChooserButtonApplyText: "Apply" });

    • columnChooserButtonCancelText

      Type:
      string
      Default:
      ""

      Specifies the text of the button which cancels changes in the modal dialog.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							columnChooserButtonCancelText: "Cancel"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserButtonCancelText;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { columnChooserButtonCancelText: "Cancel" });

    • columnChooserCaptionLabel

      Type:
      string
      Default:
      ""

      The caption of the column chooser dialog.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							columnChooserCaptionLabel: "New Caption"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserCaptionLabel;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { columnChooserCaptionLabel: "New Caption" });

    • columnChooserCloseButtonTooltip

      Type:
      string
      Default:
      ""

      The close button tooltip of the column chooser dialog.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							columnChooserCloseButtonTooltip: "Close"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserCloseButtonTooltip;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { columnChooserCloseButtonTooltip: "Close" });

    • columnChooserDisplayText

      Type:
      string
      Default:
      ""

      The text used in the drop down tools menu(Feature Chooser) to launch the column chooser dialog.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							columnChooserDisplayText: "New Text"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserDisplayText;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { columnChooserDisplayText: "New Text" });

    • columnChooserHideText

      Type:
      string
      Default:
      ""

      The text used in the column chooser to hide column.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							columnChooserHideText: "Hide Column"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserHideText;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { columnChooserHideText: "Hide Column" });

    • columnChooserResetButtonLabel

      Type:
      string
      Default:
      ""

      Text label for reset button.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							columnChooserResetButtonLabel: "Reset"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserResetButtonLabel;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { columnChooserResetButtonLabel: "Reset" });

    • columnChooserShowText

      Type:
      string
      Default:
      ""

      The text used in the column chooser to show column.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							columnChooserShowText: "Show Column"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserShowText;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { columnChooserShowText: "Show Column" });

    • columnHideText

      Type:
      string
      Default:
      ""

      The text used in the drop down tools menu(Feature Chooser) to hide a column.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							columnHideText: "New Tooltip Text"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").columnHideText;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { columnHideText: "New Tooltip Text" });

    • hiddenColumnIndicatorTooltipText

      Type:
      string
      Default:
      ""

      The text displayed in the tooltip of the hidden column indicator.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							hiddenColumnIndicatorTooltipText: "New Tooltip Text"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").hiddenColumnIndicatorTooltipText;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { hiddenColumnIndicatorTooltipText: "New Tooltip Text" });

    • hideColumnIconTooltip

      Type:
      string
      Default:
      ""

      Specifies the hiding column icon tooltip.

      Code Sample

       
				//Initialize
				$(".selector").igTreeGrid({
					features: [{
						name: "Hiding",
						locale: {
							hideColumnIconTooltip: "Hide"
						}
					}]
				});

				//	Get
				var text = $(".selector").igTreeGridHiding("option", "locale").hideColumnIconTooltip;

				//	Set
				$(".selector").igTreeGridHiding("option", "locale", { hideColumnIconTooltip: "Hide" });

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

  • columnChooserButtonApplyClick
    Inherited

    Cancellable:
    false

    Event fired when button Apply in column chooser is clicked.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnChooserElement
          Type: jQuery

          Gets a reference to the Column Chooser element. This is a jQuery object.

        • columnsToShow
          Type: Array

          Gets the array of columns identifiers which should be shown.

        • columnsToHide
          Type: Array

          Gets the array of columns identifiers which should be hidden.

    Code Sample

          //Bind after initialization		
		$(document).delegate(".selector", "igtreegridhidingcolumnchooserbuttonapplyclick", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // reference to the igTreeGridHiding widget.
            ui.owner; 
            
            // reference to the grid widget.
            ui.owner.grid; 
            
            // reference to the Column Chooser jQuery element.
            ui.columnChooserElement;  
            
            // reference to array of columns identifiers which should be shown.
            ui.columnsToShow; 
            
            // reference to array of columns identifiers which should be hidden.
            ui.columnsToHide; 
        });
        
        //Initialize
        $(".selector").igTreeGrid({
            features : [
                {
                    name : "Hiding",
					columnChooserButtonApplyClick: function(evt, ui){ ... }
                }
            ]
        });

  • columnChooserButtonResetClick
    Inherited

    Cancellable:
    false

    Event fired when button Reset in column chooser is clicked.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnChooserElement
          Type: jQuery

          Gets a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnchooserbuttonresetclick", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igTreeGridHiding widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// reference to the Column Chooser jQuery element.
					ui.columnChooserElement;
				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserButtonResetClick: function(evt, ui){ ... }
						}
					]
				});

  • columnChooserClosed
    Inherited

    Cancellable:
    false

    Event fired after the column chooser has been closed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnChooserElement
          Type: jQuery

          Gets a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnchooserclosed", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the Column Chooser jQuery element.
					ui.columnChooserElement;

					// reference to the igTreeGridHiding widget
					ui.owner;
				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserClosed: function(evt, ui){ ... }
						}
					]
				});

  • columnChooserClosing
    Inherited

    Cancellable:
    true

    Event fired before the column chooser is closed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnChooserElement
          Type: jQuery

          Gets a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnchooserclosing", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the Column Chooser jQuery element.
					ui.columnChooserElement;

					// reference to the igTreeGridHiding widget
					ui.owner;
				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserClosing: function(evt, ui){ ... }
						}
					]
				});

  • columnChooserContentsRendered
    Inherited

    Cancellable:
    false

    Event fired after the contents of the column chooser are rendered.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnChooserElement
          Type: jQuery

          Gets a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnchoosercontentsrendered", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the Column Chooser jQuery element.
					ui.columnChooserElement;

					// reference to the igTreeGridHiding widget
					ui.owner;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserContentsRendered: function(evt, ui){ ... }
						}
					]
				});

  • columnChooserContentsRendering
    Inherited

    Cancellable:
    true

    Event fired before the contents of the column chooser are rendered.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnChooserElement
          Type: jQuery

          Gets a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnchoosercontentsrendering", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the Column Chooser jQuery element.
					ui.columnChooserElement;

					// reference to the igTreeGridHiding widget
					ui.owner;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserContentsRendering: function(evt, ui){ ... }
						}
					]
				});

  • columnChooserMoving
    Inherited

    Cancellable:
    true

    Event fired every time the column chooser changes its position.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnChooserElement
          Type: jQuery

          Gets a reference to the Column Chooser element. This is a jQuery object.

        • originalPosition
          Type: Object

          Gets the original position of the column chooser div as { top, left } object, relative to the page.

        • position
          Type: Object

          Gets the current position of the column chooser div as { top, left } object, relative to the page.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnchoosermoving", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the Column Chooser jQuery element.
					ui.columnChooserElement;

					// reference to the igTreeGridHiding widget
					ui.owner;

					// current postion
					ui.position;

					// previous position
					ui.originalPosition;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserMoving: function(evt, ui){ ... }
						}
					]
				});

  • columnChooserOpened
    Inherited

    Cancellable:
    false

    Event fired after the column chooser is already opened.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnChooserElement
          Type: jQuery

          Gets a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnchooseropened", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the Column Chooser jQuery element.
					ui.columnChooserElement;

					// reference to the igTreeGridHiding widget
					ui.owner;
				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserOpened: function(evt, ui){ ... }
						}
					]
				});

  • columnChooserOpening
    Inherited

    Cancellable:
    true

    Event fired before the column chooser is opened.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnChooserElement
          Type: jQuery

          Gets a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnchooseropening", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the Column Chooser jQuery element.
					ui.columnChooserElement;

					// reference to the igTreeGridHiding widget
					ui.owner;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnChooserOpening: function(evt, ui){ ... }
						}
					]
				});

  • columnHidden
    Inherited

    Cancellable:
    false

    Event fired after the hiding has been executed and results are rendered.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnIndex
          Type: Number

          Gets the hidden column index. Has a value only if the column's key is a number.

        • columnKey
          Type: String

          Gets the hidden column key. Has a value only if the column's key is a string.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnhidden", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// the index of the column, which is hidden
					ui.columnIndex;

					// the key of the column, which is hidden
					ui.columnKey;

					// reference to the igTreeGridHiding widget
					ui.owner;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnHidden: function(evt, ui){ ... }
						}
					]
				});

  • columnHiding
    Inherited

    Cancellable:
    true

    Event fired before a hiding operation is executed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnIndex
          Type: Number

          Gets the hidden column index. Has a value only if the column's key is a number.

        • columnKey
          Type: String

          Gets the hidden column key. Has a value only if the column's key is a string.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnhiding", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// the index of the column, which is going to be hidden
					ui.columnIndex;

					// the key of the column, which is going to be hidden
					ui.columnKey;

					// reference to the igTreeGridHiding widget
					ui.owner;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnHiding: function(evt, ui){ ... }
						}
					]
				});

  • columnHidingRefused
    Inherited

    Cancellable:
    false

    Event fired when trying to hide all columns in fixed or unfixed area.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnKeys
          Type: Array

          Array of column keys. Has a value only if the column's key is a string.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnhidingrefused", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// array of column keys, which are refused to hide
					ui.columnKeys;

					// reference to the igTreeGridHiding widget
					ui.owner;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnHidingRefused: function(evt, ui){ ... }
						},
						{
							name: "ColumnFixing"
						}
					]
				});

  • columnShowing
    Inherited

    Cancellable:
    true

    Event fired before a showing operation is executed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnIndex
          Type: Number

          Gets the shown column index.

        • columnKey
          Type: String

          Gets the shown column key.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnshowing", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// the index of the column, which is going to be shown
					ui.columnIndex;

					// the key of the column, which is going to be shown
					ui.columnKey;

					// reference to the igTreeGridHiding widget
					ui.owner;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnShowing: function(evt, ui){ ... }
						}
					]
				});

  • columnShowingRefused
    Inherited

    Cancellable:
    false

    Event fired when trying to show column(s) in fixed area and total width of fixed are will be larger than whole grid width.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnKeys
          Type: Array

          Array of column keys. Has a value only if the column's key is a string.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnshowingrefused", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// array of column keys, which are refused to show
					ui.columnKeys;

					// reference to the igTreeGridHiding widget
					ui.owner;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnShowingRefused: function(evt, ui){ ... }
						},
						{
							name: "ColumnFixing"
						}
					]
				});

  • columnShown
    Inherited

    Cancellable:
    false

    Event fired after the showing has been executed and results are rendered.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnIndex
          Type: Number

          Gets the shown column index.

        • columnKey
          Type: String

          Gets the shown column key.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingcolumnshown", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// the index of the column, which is shown
					ui.columnIndex;

					// the key of the column, which is shown
					ui.columnKey;

					// reference to the igTreeGridHiding widget
					ui.owner;

				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
							columnShown: function(evt, ui){ ... }
						}
					]
				});

  • multiColumnHiding
    Inherited

    Cancellable:
    true

    Event fired before a hiding operation is executed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the GridHiding widget.

        • owner.grid
          Type: Object

          Gets a reference to the grid widget.

        • columnKeys
          Type: Array

          Gets the array of the hidden column keys. Only when you click on Reset button in column chooser there is an array of column keys.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreegridhidingmulticolumnhiding", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igTreeGridHiding widget
					ui.owner;

					// reference to the igTreeGrid widget
					ui.owner.grid;

					// array of the hidden column keys
					ui.columnKeys;
				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "Hiding",
									multiColumnHiding: function(evt, ui){ ... }
						}
					]
				});

  • changeLocale
    Inherited

    .igTreeGridHiding( "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").igTreeGridHiding("changeLocale");

  • destroy

    .igTreeGridHiding( "destroy" );

    Code Sample

     
			$(".selector").igTreeGridHiding("destroy");

  • hideColumn
    Inherited

    .igTreeGridHiding( "hideColumn", column:object, [callback:function] );

    Hides a visible column. If the column is hidden the method does nothing.
    Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

    • column
    • Type:object
    • An identifier for the column. If a number is provided it will be used as a column index else if a strings is provided it will be used as a column key.
    • callback
    • Type:function
    • Optional
    • Specifies a custom function to be called when the column is hidden(optional).

    Code Sample

     
				//Hide column with columnIndex 0
				$(".selector").igTreeGridHiding("hideColumn", 0);

				//Hide multicolumnheader with key 'Root'
				$(".selector").igTreeGridHiding("hideColumn", 'Root', true);

				//Hide column with key 'Name' with a callback function which executes after the column is hidden (hiding column operation is asynchronous)
				$(".selector").igTreeGridHiding("hideColumn", 'Name', false, function () {
					// Custom code which executes after the hide column operation is complete.
				});

  • hideColumnChooser
    Inherited

    .igTreeGridHiding( "hideColumnChooser" );

    Hides the Column Chooser dialog. If it is not visible the method does nothing.

    Code Sample

     
				$(".selector").igTreeGridHiding("hideColumnChooser");

  • hideMultiColumns
    Inherited

    .igTreeGridHiding( "hideMultiColumns", columns:array, [callback:function] );

    Hides visible columns specified by the array. If the column is hidden the method does nothing.
    Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

    • columns
    • Type:array
    • An array of identifiers for the columns. If a number is provided it will be used as a column index else if a strings is provided it will be used as a column key.
    • callback
    • Type:function
    • Optional
    • Specifies a custom function to be called when all columns are hidden(optional).

    Code Sample

     
				// the parameter is an array of the column keys
				$(".selector").igTreeGridHiding("hideMultiColumns", ['FirstName', 'Address', 'PhoneNumber'] );

				// the parameter is an array of the column index
				$(".selector").igTreeGridHiding("hideMultiColumns", [1, 3, 4] );

				// the parameters are an array of column keys and a callback function which executes after the columns are hidden
				$(".selector").igTreeGridHiding("hideMultiColumns", ['FirstName', 'Address', 'PhoneNumber'], function () {
					// Custom code which executes after the hide columns operation is complete.
				});

  • isToRenderButtonReset
    Inherited

    .igTreeGridHiding( "isToRenderButtonReset" );

    Gets whether the reset button in the column chooser dialog is to be rendered or not.

    Code Sample

     
				$(".selector").igTreeGridHiding("isToRenderButtonReset");

  • removeColumnChooserResetButton
    Inherited

    .igTreeGridHiding( "removeColumnChooserResetButton" );

    Remove Reset button in column chooser modal dialog.

    Code Sample

     
				$(".selector").igTreeGridHiding("removeColumnChooserResetButton");

  • renderColumnChooserResetButton
    Inherited

    .igTreeGridHiding( "renderColumnChooserResetButton" );

    Renders the Reset button in the Column Chooser dialog.

    Code Sample

     
				$(".selector").igTreeGridHiding("renderColumnChooserResetButton");

  • resetHidingColumnChooser
    Inherited

    .igTreeGridHiding( "resetHidingColumnChooser" );

    Reset hidden/shown column to initial state of dialog(when it is opened).

    Code Sample

     
				$(".selector").igTreeGridHiding("resetHidingColumnChooser");

  • showColumn
    Inherited

    .igTreeGridHiding( "showColumn", column:object, [callback:function] );

    Shows a hidden column. If the column is not hidden the method does nothing.
    Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

    • column
    • Type:object
    • An identifier for the column. If a number is provided it will be used as a column index else if a strings is provided it will be used as a column key.
    • callback
    • Type:function
    • Optional
    • Specifies a custom function to be called when the column(s) is shown(optional).

    Code Sample

     
				//Show column with columnIndex 0
				$(".selector").igTreeGridHiding("showColumn", 0);

				//Show multicolumnheader with key 'Root'
				$(".selector").igTreeGridHiding("showColumn", 'Root', true);

				//Show column with key 'Name' with a callback function which executes after the column is shown (showing column operation is asynchronous)
				$(".selector").igTreeGridHiding("showColumn", 'Name', false, function () {
					// Custom code which executes after the show column operation is complete.
				});

  • showColumnChooser
    Inherited

    .igTreeGridHiding( "showColumnChooser" );

    Shows the Column Chooser dialog. If it is visible the method does nothing.

    Code Sample

     
				$(".selector").igTreeGridHiding("showColumnChooser");

  • showMultiColumns
    Inherited

    .igTreeGridHiding( "showMultiColumns", columns:array, [callback:function] );

    Show visible columns specified by the array. If the column is shown the method does nothing.
    Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

    • columns
    • Type:array
    • An array of identifiers for the columns. If a number is provided it will be used as a column index else if a strings is provided it will be used as a column key.
    • callback
    • Type:function
    • Optional
    • Specifies a custom function to be called when all columns are shown(optional).

    Code Sample

     
				// the parameter is an array of the column keys
				$(".selector").igTreeGridHiding("showMultiColumns", ['FirstName', 'Address', 'PhoneNumber'] );

				// the parameter is an array of the column index
				$(".selector").igTreeGridHiding("showMultiColumns", [1, 3, 4] );

				// the parameters are an array of column keys and a callback function which executes after the columns are shown
				$(".selector").igTreeGridHiding("showMultiColumns", ['FirstName', 'Address', 'PhoneNumber'], function () {
					// Custom code which executes after the show columns operation is complete.
				});

  • ui-dialog ui-draggable ui-resizable ui-iggrid-dialog ui-widget ui-widget-content ui-corner-all

    Classes applied to the column chooser element.

  • ui-dialog-content ui-iggrid-columnchooser-content

    Classes applied to the column chooser dialog content.

  • ui-iggrid-columnchooser-handlebar

    Classes applied to the column chooser handlebar at the bottom.

  • ui-dialog-titlebar ui-iggrid-columnchooser-caption ui-widget-header ui-corner-top ui-helper-reset ui-helper-clearfix

    Classes applied to the column chooser dialog header caption area.

  • ui-dialog-title ui-iggrid-columnchooser-caption-title

    Classes applied to the column chooser dialog header caption title.

  • ui-iggrid-columnchooser-hidebutton

    Classes applied to hide button in list item(which shows single column) in column chooser.

  • ui-iggrid-columnchooser-item ui-widget-content

    Classes applied to list item(which shows single column) in column chooser.

  • ui-iggrid-columnchooser-itemhidden

    Classes applied to list item(which shows single column) in column chooser when column is hidden.

  • ui-iggrid-dialog-text

    Classes applied to show button in list item(which shows single column) in column chooser.

  • ui-iggrid-columnchooser-listitems

    Classes applied to list(which shows all columns) in column chooser.

  • ui-icon ui-iggrid-icon-hide

    Classes applied to the feature chooser icon for hiding feature.

  • ui-icon ui-iggrid-icon-column-chooser

    Classes applied to the feature chooser icon for column chooser feature.

  • ui-iggrid-hiding-hiddencolumnindicator

    Classes applied to the hidden column indicator in the header.

  • ui-iggrid-hiding-indicator-mouseover

    Classes applied to the hidden column indicator in the header when the mouse is over it.

  • ui-iggrid-hiding-indicator-selected

    Classes applied to the hidden column indicator in the header when it is selected(user has clicked and the dropdown is visible).

  • ui-iggrid-hiding-dropdown-dialog ui-widget ui-widget-content ui-corner-all

    Classes applied to the hidden columns dropdown div.

  • ui-iggrid-hiding-dropdown-ddlistitemicons ui-state-default

    Classes applied to the hidden columns dropdown li.

  • ui-iggrid-hiding-dropdown-listitem-hover ui-state-active ui-state-hover

    Classes applied to the hidden columns dropdown li when hovered.

  • ui-iggrid-hiding-dropdown-ddlistitemtext

    Classes applied to the hidden columns dropdown span inside the li.

  • ui-iggrid-hiding-dropdown-list ui-menu

    Classes applied to the hidden columns dropdown ul.

  • ui-iggrid-hiding-indicator

    Classes applied to the hiding header icon.

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