Create the best Web experiences in browsers and devices with our user interface controls designed expressly for jQuery, ASP.NET MVC, HTML 5 and CSS 3. You’ll be building on a solid and proven foundation without any plug-ins or extensions, just real world best practices and the most forward-thinking, robust Web technology.

Infragistics NetAdvantage jQuery API Reference

ui.igGridHiding

ui.igGridHiding_image

Both the igGrid and igHierarchicalGrid controls feature column hiding in the grid. The column hiding feature 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.

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

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

Code Sample

 
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="themes/ig/jquery.ui.custom.css" rel="stylesheet" type="text/css" />
    <link href="themes/base/ig.ui.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>
    <!-- jQuery Templates: http://api.jquery.com/category/plugins/templates/ -->
    <script src="js/jquery.tmpl.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/ig.ui.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var ds = [
    	        { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
    	        { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
    	        { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
    	        { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
    	        { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
    	        { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
    	        { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
    	        { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
    	        { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
            ];

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

Related Samples

Related Topics

Dependencies

jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
ig.ui.grid.framework.js
ig.ui.shared.js
ig.datasource.js
ig.util.js

  • columnChooserCaptionText

    Type:
    string
    Default:
    ""

    The caption of the column chooser dialog.

    Code Sample

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

  • 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").igGrid({
            features : [
                {
                    name : "Hiding",
                    columnChooserDisplayText: "New Text"
                }
            ]
        });
        //Get
        var columnChooserDisplayText = $(".selector").igGridHiding("option", "columnChooserDisplayText");

  • columnChooserHeight

    Type:
    number
    Default:
    200

    The default column chooser height in pixels.

    Code Sample

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

  • columnChooserWidth

    Type:
    number
    Default:
    250

    The default column chooser width in pixels.

    Code Sample

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

  • columnHideText

    Type:
    string
    Default:
    ""

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

    Code Sample

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

  • columnSettings

    Type:
    array
    Default:
    []
    Elements Type:
    object

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

    Code Sample

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

    • allowHiding

      Type:
      bool
      Default:
      true

      Allows the column to be hidden.

      Code Sample

      		   //Initialize
			$(".selector").igGrid({
				features: [
					{
						name: "Hiding",
						columnSettings: [
							{ columnIndex: 0, allowHiding: true },
						]
					}
				]
			});	
			//Get
				var accessibility = $(".selector").igGridHiding("option", "allowHiding");
				var allowHiding = accessibility[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").igGrid({
				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").igGrid({
				features: [
					{
						name: "Hiding",
						columnSettings: [
							{ columnKey: "ProductID", allowHiding: true },
						]
					}
				]
			});

    • hidden

      Type:
      bool
      Default:
      false

      Sets the initial visibility of the column.

      Code Sample

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

  • dropDownAnimationDuration

    Type:
    number
    Default:
    500

    The duration of the dropdown animation in milliseconds.

    Code Sample

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

  • hiddenColumnIndicatorHeaderWidth

    Type:
    number
    Default:
    7

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

    Code Sample

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

  • hiddenColumnIndicatorTooltipText

    Type:
    string
    Default:
    ""

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

    Code Sample

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

For more information on how to interact with the NetAdvantage for jQuery controls events, refer to
Using Events in NetAdvantage for jQuery

Show Details

  • columnChooserClosed

    Cancellable:
    false

    Event fired after the column chooser has been closed.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnChooserElement to get a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

    	    //Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnchooserclosed", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // reference to the Column Chooser jQuery element.
            ui.columnChooserElement;
                      
            // reference to the igGridHiding widget
            ui.owner;  
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnChooserClosed: function(evt, ui){ ... }
                }
            ]
        });

  • columnChooserClosing

    Cancellable:
    true

    Event fired before the column chooser is closed.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnChooserElement to get a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

    	    //Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnchooserclosing", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // reference to the Column Chooser jQuery element.
            ui.columnChooserElement;
                      
            // reference to the igGridHiding widget
            ui.owner;    
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnChooserClosing: function(evt, ui){ ... }
                }
            ]
        });

  • columnChooserContentsRendered

    Cancellable:
    false

    Event fired after the contents of the column chooser are rendered.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnChooserElement to get a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

    		//Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnchoosercontentsrendered", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // reference to the Column Chooser jQuery element.
            ui.columnChooserElement;
                      
            // reference to the igGridHiding widget
            ui.owner;
        
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnChooserContentsRendered: function(evt, ui){ ... }
                }
            ]
        });

  • columnChooserContentsRendering

    Cancellable:
    true

    Event fired before the contents of the column chooser are rendered.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnChooserElement to get a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

    		//Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnchoosercontentsrendering", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // reference to the Column Chooser jQuery element.
            ui.columnChooserElement;
                      
            // reference to the igGridHiding widget
            ui.owner;
        
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnChooserContentsRendering: function(evt, ui){ ... }
                }
            ]
        });

  • columnChooserMoving

    Cancellable:
    true

    Event fired every time the column chooser changes its position.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnChooserElement to get a reference to the Column Chooser element. This is a jQuery object.
    Use ui.originalPosition to get the original position of the column chooser div as { top, left } object, relative to the page.
    Use ui.position to get the current position of the column chooser div as { top, left } object, relative to the page.

    Code Sample

    		//Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnchoosermoving", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // reference to the Column Chooser jQuery element.
            ui.columnChooserElement;
                      
            // reference to the igGridHiding widget
            ui.owner;
            
            // current postion
            ui.position
            
            // previous position
            ui.originalPosition
        
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnChooserMoving: function(evt, ui){ ... }
                }
            ]
        });

  • columnChooserOpened

    Cancellable:
    false

    Event fired after the column chooser is already opened.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnChooserElement to get a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

    	    //Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnchooseropened", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // reference to the Column Chooser jQuery element.
            ui.columnChooserElement;
                      
            // reference to the igGridHiding widget
            ui.owner;   
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnChooserOpened: function(evt, ui){ ... }
                }
            ]
        });

  • columnChooserOpening

    Cancellable:
    true

    Event fired before the column chooser is opened.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnChooserElement to get a reference to the Column Chooser element. This is a jQuery object.

    Code Sample

    		//Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnchooseropening", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // reference to the Column Chooser jQuery element.
            ui.columnChooserElement;
                      
            // reference to the igGridHiding widget
            ui.owner;
        
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnChooserOpening: function(evt, ui){ ... }
                }
            ]
        });

  • columnHidden

    Cancellable:
    false

    Event fired after the hiding has been executed and results are rendered.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnIndex to get the hidden column index.
    Use ui.columnKey to get the hidden column key.

    Code Sample

    		//Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnhidden", 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 igGridHiding widget
            ui.owner;
        
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnHidden: function(evt, ui){ ... }
                }
            ]
        });

  • columnHiding

    Cancellable:
    true

    Event fired before a hiding operation is executed.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnIndex to get the hidden column index.
    Use ui.columnKey to get the hidden column key.

    Code Sample

    		
		//Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnhiding", 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 igGridHiding widget
            ui.owner;
        
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnHiding: function(evt, ui){ ... }
                }
            ]
        });

  • columnShowing

    Cancellable:
    true

    Event fired before a showing operation is executed.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnIndex to get the shown column index.
    Use ui.columnKey to get the shown column key.

    Code Sample

    		//Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnshowing", 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 igGridHiding widget
            ui.owner;
        
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnShowing: function(evt, ui){ ... }
                }
            ]
        });

  • columnShown

    Cancellable:
    false

    Event fired after the showing has been executed and results are rendered.
    The handler function takes arguments evt and ui.
    Use ui.owner to get the reference to the igGridHiding widget.
    Use ui.owner.grid to get the reference to the igGrid widget.
    Use ui.columnIndex to get the shown column index.
    Use ui.columnKey to get the shown column key.

    Code Sample

    		//Bind after initialization		
		$(document).delegate(".selector", "iggridhidingcolumnshown", 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 igGridHiding widget
            ui.owner;
        
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "Hiding",
					columnShown: function(evt, ui){ ... }
                }
            ]
        });

  • destroy

    .igGridHiding( "destroy" );

    Destroys the resizing widget.

    Code Sample

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

  • hideColumn

    .igGridHiding( "hideColumn", column:object );

    Hides a visible column. If the column is hidden the method does nothing.

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

    Code Sample

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

  • hideColumnChooser

    .igGridHiding( "hideColumnChooser" );

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

    Code Sample

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

  • showColumn

    .igGridHiding( "showColumn", column:object );

    Shows a hidden column. If the column is not hidden the method does nothing.

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

    Code Sample

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

  • showColumnChooser

    .igGridHiding( "showColumnChooser" );

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

    Code Sample

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

  • 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-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-featurechooser-dropdown-dialog ui-widget ui-widget-content ui-corner-all

    Classes applied to the hidden columns dropdown div.

  • ui-iggrid-featurechooserddlistitemicons ui-state-default

    Classes applied to the hidden columns dropdown li.

  • ui-iggrid-featurechooser-listitem-hover ui-state-active ui-state-hover

    Classes applied to the hidden columns dropdown li when hovered.

  • ui-iggrid-featurechooserddlistitemtext

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

  • ui-iggrid-featurechooser-list ui-menu

    Classes applied to the hidden columns dropdown ul.

  • ui-iggrid-hiding-indicator

    Classes applied to the hiding header icon.