Ignite UI API Reference
ui.igGridHiding
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 Resources in Ignite UI and Styling and Theming Ignite UI.Code Sample
<!doctype html> <html> <head> <!-- Infragistics Combined CSS --> <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" /> <!-- jQuery Core --> <script src="js/jquery.js" type="text/javascript"></script> <!-- jQuery UI --> <script src="js/jquery-ui.js" type="text/javascript"></script> <!-- Infragistics Combined Scripts --> <script src="js/infragistics.core.js" type="text/javascript"></script> <script src="js/infragistics.lob.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var ds = [ { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" }, { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" }, { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" }, { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" }, { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" }, { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" }, { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" }, { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" }, { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" } ]; $("#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
Inherits
-
columnChooserAnimationDuration
- Type:
- number
- Default:
- 200
Specifies time of milliseconds for animation duration to show/hide modal dialog.
Code Sample
//Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnChooserAnimationDuration: 300 } ] }); //Get var duration = $(".selector").igGridHiding("option", "columnChooserAnimationDuration");
-
columnChooserButtonApplyText
- Type:
- string
- Default:
- ""
Specifies text of button which apply changes in modal dialog.
Code Sample
//Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnChooserButtonApplyText: "Apply" } ] }); //Get var text = $(".selector").igGridHiding("option", "columnChooserButtonApplyText");
-
columnChooserButtonCancelText
- Type:
- string
- Default:
- ""
Specifies text of button which cancel changes in modal dialog.
Code Sample
//Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnChooserButtonCancelText: "Cancel" } ] }); //Get var text = $(".selector").igGridHiding("option", "columnChooserButtonCancelText");
-
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");
-
columnChooserContainment
- 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").igGrid({ features : [ { name : "Hiding", columnChooserContainment: "window" } ] }); //Get var columnChooserContainment = $(".selector").igGridHiding("option", "columnChooserContainment");
-
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:
- ""
The default column chooser height in pixels.
Code Sample
//Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnChooserHeight: 100 } ] }); //Get var columnChooserHeight = $(".selector").igGridHiding("option", "columnChooserHeight");
-
columnChooserHideOnClick
- 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").igGrid({ features : [ { name : "Hiding", columnChooserHideOnClick: true } ] }); //Get var onClick = $(".selector").igGridHiding("option", "columnChooserHideOnClick");
-
columnChooserHideText
- Type:
- string
- Default:
- ""
The text used in the column chooser to hide column.
Code Sample
//Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnChooserHideText: "Hide column" } ] }); //Get var text = $(".selector").igGridHiding("option", "columnChooserHideText");
-
columnChooserResetButtonLabel
- Type:
- string
- Default:
- ""
Text label for reset button.
Code Sample
//Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnChooserResetButtonLabel: "Reset" } ] }); //Get var text = $(".selector").igGridHiding("option", "columnChooserResetButtonLabel");
-
columnChooserShowText
- Type:
- string
- Default:
- ""
The text used in the column chooser to show column.
Code Sample
//Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnChooserShowText: "Show Column" } ] }); //Get var text = $(".selector").igGridHiding("option", "columnChooserShowText");
-
columnChooserWidth
- Type:
- number
- Default:
- 350
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 columnHideText = $(".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 columnSettings = $(".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 columnSettings = $(".selector").igGridHiding("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").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 dropDownAnimationDuration = $(".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 hiddenColumnIndicatorHeaderWidth = $(".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 Ignite UI controls' events, refer to
Using Events in Ignite UI.
-
columnChooserButtonApplyClick
- Cancellable:
- false
Event fired when button Apply in column chooser is clicked
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.columnsToShow to get array of columns identifiers which should be shown
Use ui.columnsToHide to get array of columns identifiers which should be hidden.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridhidingcolumnchooserbuttonapplyclick", function (evt, ui) { //return the triggered event evt; // reference to the igGridHiding 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").igGrid({ features : [ { name : "Hiding", columnChooserButtonApplyClick: function(evt, ui){ ... } } ] });
-
columnChooserButtonResetClick
- Cancellable:
- false
Event fired when button Reset in column chooser is clicked
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", "iggridhidingcolumnchooserbuttonresetclick", function (evt, ui) { //return the triggered event evt; // reference to the igGridHiding widget. ui.owner; // reference to the grid widget. ui.owner.grid; // reference to the Column Chooser jQuery element. ui.columnChooserElement; }); //Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnChooserButtonResetClick: function(evt, ui){ ... } } ] });
-
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. Has a value only if the column's key is a number.
Use ui.columnKey to get the hidden column key. Has a value only if the column's key is a string.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. Has a value only if the column's key is a number.
Use ui.columnKey to get the hidden column key. Has a value only if the column's key is a string.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){ ... } } ] });
-
columnHidingRefused
- Cancellable:
- false
Event fired when trying to hide all columns in fixed or unfixed area.
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.columnKeys array of column keys. Has a value only if the column's key is a string.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridhidingcolumnhidingrefused", function (evt, ui) { //return the triggered event evt; // array of column keys, which are refused to hide ui.columnKeys; // reference to the igGridHiding widget ui.owner; }); //Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnHidingRefused: function(evt, ui){ ... } }, { name: "ColumnFixing" } ] });
-
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){ ... } } ] });
-
columnShowingRefused
- 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.
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.columnKeys array of column keys. Has a value only if the column's key is a string.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridshowingcolumnhidingrefused", function (evt, ui) { //return the triggered event evt; // array of column keys, which are refused to show ui.columnKeys; // reference to the igGridHiding widget ui.owner; }); //Initialize $(".selector").igGrid({ features : [ { name : "Hiding", columnShowingRefused: function(evt, ui){ ... } }, { name: "ColumnFixing" } ] });
-
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){ ... } } ] });
-
multiColumnHiding
- 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.columnKeys to get array of the hidden column keys. In case when click on Reset button in column chooser then this is an array of column keys.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridhidingmulticolumnhiding", function (evt, ui) { //return the triggered event evt; // reference to the igGridHiding widget ui.owner; // reference to the igGrid widget ui.owner.grid; // array of the hidden column keys ui.columnKeys; }); //Initialize $(".selector").igGrid({ features : [ { name : "Hiding", multiColumnHiding: function(evt, ui){ ... } } ] });
-
destroy
- .igGridHiding( "destroy" );
Destroys the hiding widget.
Code Sample
$(".selector").igGridHiding("destroy");
-
hideColumn
- .igGridHiding( "hideColumn", column:object, [isMultiColumnHeader:bool] );
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.
- isMultiColumnHeader
- Type:bool
- Optional
- If it is true then the column is of type multicolumnheader. An identifier for the column should be of type string.
Code Sample
//Hide column with columnIndex 0 $(".selector").igGridHiding("hideColumn", 0); //Hide multicolumnheader with key 'Root' $(".selector").igGridHiding("hideColumn", 'Root', true);
-
hideColumnChooser
- .igGridHiding( "hideColumnChooser" );
Hides the Column Chooser dialog. If it is not visible the method does nothing.
Code Sample
$(".selector").igGridHiding("hideColumnChooser");
-
hideMultiColumns
- .igGridHiding( "hideMultiColumns", columns:array );
Hides visible columns specified by the array. If the column is hidden the method does nothing.
- 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.
Code Sample
// the parameter is an array of the column keys $(".selector").igGridHiding("hideMultiColumns", ['FirstName', 'Address', 'PhoneNumber'] ); // the parameter is an array of the column index $(".selector").igGridHiding("hideMultiColumns", [1, 3, 4] );
-
isToRenderButtonReset
- .igGridHiding( "isToRenderButtonReset" );
Code Sample
$(".selector").igGridHiding("isToRenderButtonReset");
-
removeColumnChooserResetButton
- .igGridHiding( "removeColumnChooserResetButton" );
Remove Reset button in column chooser modal dialog.
Code Sample
$(".selector").igGridHiding("removeColumnChooserResetButton");
-
renderColumnChooserResetButton
- .igGridHiding( "renderColumnChooserResetButton" );
Code Sample
$(".selector").igGridHiding("renderColumnChooserResetButton");
-
resetHidingColumnChooser
- .igGridHiding( "resetHidingColumnChooser" );
Reset hidden/shown column to initial state of dialog(when it is opened).
Code Sample
$(".selector").igGridHiding("resetHidingColumnChooser");
-
showColumn
- .igGridHiding( "showColumn", column:object, [isMultiColumnHeader:bool] );
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.
- isMultiColumnHeader
- Type:bool
- Optional
- If it is true then the column is of type multicolumnheader. An identifier for the column should be of type string.
Code Sample
//Show column with columnIndex 0 $(".selector").igGridHiding("showColumn", 0); //Show multicolumnheader with key 'Root' $(".selector").igGridHiding("showColumn", 'Root', true);
-
showColumnChooser
- .igGridHiding( "showColumnChooser" );
Shows the Column Chooser dialog. If it is visible the method does nothing.
Code Sample
$(".selector").igGridHiding("showColumnChooser");
-
showMultiColumns
- .igGridHiding( "showMultiColumns", columns:array );
Show visible columns specified by the array. If the column is shown the method does nothing.
- 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.
Code Sample
// the parameter is an array of the column keys $(".selector").igGridHiding("showMultiColumns", ['FirstName', 'Address', 'PhoneNumber'] ); // the parameter is an array of the column index $(".selector").igGridHiding("showMultiColumns", [1, 3, 4] );
-
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.