Configuring Column Hiding (igGrid)

Topic Overview

Purpose

This topic explains how to configure in code the columns of the igGrid™ control.

In this topic

This topic contains the following sections:

• Column Configuration Overview
• Example: Hiding a Column by Default
  • Property settings
  • Code
• Example: Hiding a Column Completely
  • Preview
  • Property settings
  • Code
• Example: Canceling Column Hiding
  • Overview
  • Steps
• Example: Configuring the Column Chooser
  • Preview
  • Property settings
  • Code
• Related Content
  • Topics

Required Background

The table bellows lists the required background you need for fully understanding the information in this topic.

• Topics
  • You need to first read the Enabling Column Hiding topic.
• External Resources
  • You need to first read the following article:
  • jQuery on() API

Column Configuration Overview

The table below lists the configurable behaviors of the igGrid control columns. These behaviors are managed through the properties of the columnSettings option of the control. For some of the behaviors/features, detailed explanations and examples are provided in the blocks following the chart.

Note: In the following table, the propertis and methods specific to the Hiding Column Chooser are not listed. They are available in the Hiding Column Chooser topic.

Example: Hiding a Column by Default

In the picture below, the Reorder Point column is hidden on initialization.

Property settings

The table below maps the desired configurations to property settings. The properties are accessed through the igGridHiding options.

Code

In JavaScript:

<script type="text/javascript">
$(function () {
    $("#grid1").igGrid({
        autoGenerateColumns: true,
        dataSource: adventureWorks,
        responseDataKey: 'Records',
        features: [
        {
            name: 'Hiding',
            columnSettings: [
                {columnKey: 'ReorderPoint', allowHiding: true, hidden: true}
            ]
        }
    });
});
</script>

In Razor:

@(Html.Infragistics().Grid(Model)
    .AutoGenerateColumns(true)
    .Features(feature =>{
        feature.Hiding().ColumnSettings(settings =>    settings.ColumnSetting()
        .ColumnKey("ReorderPoint")
        .AllowHiding(true)
        .Hidden(true));
    }).DataBind().Render()
)

Example: Hiding a Column Completely

Preview

The following picture displays a grid with two columns – Address and BirthDate – hidden completely. There are no indications about these columns, so the user cannot realize the columns are hidden.

Property settings

The table below maps the desired configurations to property settings. The properties are accessed through the igGridHiding options.

Code

In JavaScript:

<script type="text/javascript">
$(function () {
    $("#grid1").igGrid({
        autoGenerateColumns: true,
        dataSource: adventureWorks,
        responseDataKey: 'Records',
        features: [
        {
            name: 'Hiding',
            columnSettings: [
                {columnKey: 'Address', allowHiding: false, hidden: true}
                {columnKey: 'BirthDate', allowHiding: false, hidden: true}
            ]
        }
    });
});
</script>

In Razor:

@(Html.Infragistics().Grid(Model)
    .AutoGenerateColumns(true)
    .Features(feature =>{
        feature.Hiding().
        .ColumnSettings(settings =>
        {
            settings.ColumnSetting().ColumnKey("Address").Hidden(true).AllowHiding(false);
            settings.ColumnSetting().ColumnKey("BirthDate").Hidden(true).AllowHiding(false);
        })
    ).DataBind().Render()
)

Canceling Column Hiding

Canceling column hiding is done by canceling the columnHiding event. The purpose of this is to prevent hiding the column if the columnHiding has been fired.

Overview

Following is a conceptual overview of the process:

1. Handling the columnHiding event
2. Canceling the event

Steps

1. Handle the columnHiding event.

   1. Define a handler function.

      Define a function that will be called when the columnHiding event fires.

      In JavaScript:

      <script type="text/javascript">
          function gridColumnHiding (evt, ui) {
      
          };
      </script>
      

   2. Set the handler to the columnHiding event of the igGrid.

      Once you have a handler defined, it has to be set as the handler for the columnHiding event. In jQuery, this can be done when the widget is instantiated. In ASP.NET MVC, the event must be attached using the jQuery on API. Using the on API is an option for attaching the event in a pure jQuery implementation as well. The type for this event is iggridhidingcolumnhiding.

      In JavaScript:

       $(function () {
           $("#grid1").igGrid({
               autoGenerateColumns: true,
               dataSource: adventureWorks,
               responseDataKey: 'Records',
               features: [
               {
                    name: 'Hiding',
                    columnHiding: gridColumnHiding
               }
               ]
           });
       });
      

      In JavaScript:

       $("# grid1").on("iggridhidingcolumnhiding", comboSelectionChanging);
      

2. Cancel the event.

   To cancel the event, return false.

   In JavaScript:

   <script type="text/javascript">
       function gridColumnHiding (evt, ui) {
          if (conditionNotMet)
             return false;
        };
   </script>
   

For detailed information about these events, refer to their listing in the property reference section:

• igGridColumnHiding Events

Example: Configuring the Column Chooser

In this example, the Column Chooser is configured with the following settings:

• width – 300 pixels
• height – 300 pixels
• caption saying New caption text
• Chooser button saying New caption text

Preview

Following is a preview of the final result.

Property settings

The table below maps the desired configurations to property settings. The properties are accessed through the igGridHiding options.

Code

In JavaScript:

<script type="text/javascript">
$(function () {
    $("#grid").igGrid({
          autoGenerateColumns: true,
          dataSource: source,
              features: [
              {
                  name: 'Hiding',
                  columnChooserWidth: 300,
                  columnChooserHeight: 300,
                  columnChooserCaptionText: 'New Caption Text',
                  columnChooserDisplayText: 'New Chooser Text'
              }]
    });
});
</script>

In Razor:

@(Html.Infragistics().Grid(Model)
    .AutoGenerateColumns(true)
    .Features(feature =>{
            feature.Hiding()
            .ColumnChooserHeight(300)
            .ColumnChooserWidth(300)
            .ColumnChooserCaptionText("New Caption Text")
            .ColumnChooserDisplayText("New Chooser Text");
        }).DataBind().Render()
)

Related Content

Topics

The following topics provide additional information related to this topic.

• Enabling Column Hiding
• Column Hiding Events API