Infragistics(R) NetAdvantage(R) jQuery
Enabling Column Hiding
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview


This demonstrates how to programmatically hide columns in the igGrid™ control.

In this topic

This topic contains the following sections:

Enabling Column Hiding


The column hiding functionality is managed by name property of the igGrid’s features option: just pointing the name property to name: ‘Hiding’ enables column hiding feature.

The example below configures a grid with the hiding feature enabled


Following is a preview of the final result (the red arrow points to the hidden column indicator for the hidden SafetyStockLevel column).


General requirements

Scripting requirements

The following code sample demonstrates the scripts as added to the header code of the HTML file.


<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="ig.ui.min.js"></script>

Database requirements

For the purpose of this example only:

Enabling column hiding in JQuery

  1. Set up the data source.

    The data source used in the following code snipped is for the purpose of this example.

    In HTML:

    <script type="text/javascript">
    source = [
             { "ProductID": 1, "Name": "Adjustable Race", "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000 }, 
             { "ProductID": 2, "Name": "Bearing Ball", "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000 }, 
             { "ProductID": 3, "Name": "BB Ball Bearing", "SafetyStockLevel": 800, "ReorderPoint": 600, "StandardCost": 0.0000 },
             { "ProductID": 4, "Name": "Headset Ball Bearings", "SafetyStockLevel": 800, "ReorderPoint": 600, "StandardCost": 0.0000 }]
  2. Create an igGrid and call its hiding feature.

    Inside the $(document).ready() event handler, you first create an igGrid and then call its hiding feature. In the example code below, the column (SafetyStockLevel) is hidden.

    In Javascript:

        autoGenerateColumns: true,
           dataSource: source,
           features: [
                name: 'Hiding',
                columnSettings: [
                    columnKey: 'SafetyStockLevel', 
                    allowHiding: true, 
                    hidden: true
  3. Save the file.
  4. (Optional) Verify the result.
    1. To verify the result, open the file. The result should look as shown in the Preview above.

Enabling column hiding in MVC

  1. Create an MVC Controller method.

    Create an MVC Controller method to get data from the Model and will call the View.

    In MVC#:

    public ActionResult Default()
        var ds = this.DataRepository.GetDataContext().Products.Take(4);
        return View(ds);
  2. Instantiate the igGrid.

    Instantiate the igGrid with columnHiding feature enabled.

    In ASPX:

        <%= Html.Infragistics().Grid(Model)
            .Features(feature =>{
                feature.Hiding().ColumnSettings(settings => settings.ColumnSetting().ColumnKey("SafetyStockLevel").Hidden(true).AllowHiding(true));

    In Razor:

        @( Html.Infragistics().Grid(Model)
            .Features(feature =>{
                feature.Hiding().ColumnSettings(settings => settings.ColumnSetting().ColumnKey("SafetyStockLevel").Hidden(true).AllowHiding(true));
  3. Save file.
  4. (Optional) Verify the result.
    1. To verify the result, run the MVC project.
    2. To verify the result, open the file. The result should look as shown in the Preview above.

Related Topics

Following are some other topics you may find useful.

Related Samples