---
title: Customize grid columns via the modal popup
summary: Lets a user pick visible grid columns and page size in a modal popup, then applies or saves the choice.
status: draft
owner: SAIF Doc Gen
last_reviewed: 2026-08-17
library: SAIF.Presentation.Web.Controls.AJAX.Infragistics111
reference_type: package
operation_id: OP-AJAX-09
trigger: User clicks the customizer image, then OK / Apply / Save as Default
---

# Customize grid columns via the modal popup

This operation renders the modal popup body (column checkbox list and optional page-size editor), reacts to the user's OK/Apply/Save-as-Default choice, and rebinds or persists the resulting grid state.

| Field | Value |
| --- | --- |
| **Operation ID** | OP-AJAX-09 |
| **Trigger** | User clicks the customizer image, then OK / Apply / Save as Default |
| **Inputs** | Column checkbox selections, page-size value |
| **Outputs** | Grid rebound with new columns/page size; optionally persisted to `clsPreferences` |
| **Primary components** | `GridCustomizationPanel` events → `ModalGridCustomizer` handlers |
| **Entry point** | `SAIF.Presentation.Web.Controls.AJAX.Infragistics111/GridCustomizationPanel.vb` |

## Steps

1. `GridCustomizationPanel.CreateChildControls` builds the popup table (title, column checkbox list with hover help, optional page-size `SAIFWebMaskEdit` masked `###`, and the button row), registers `/Resources/Scripts/SAIFAJAXControls.js` with a fresh GUID key, wires the Select-All / Deselect-All link buttons to the client function, and raises `AfterRender`. ([BR-AJAX-029](../business-rules.md#br-ajax-029-the-page-size-editor-accepts-at-most-three-digits), [BR-AJAX-030](../business-rules.md#br-ajax-030-select-all-deselect-all-operate-entirely-on-the-client), [BR-AJAX-031](../business-rules.md#br-ajax-031-the-client-script-is-registered-from-a-fixed-application-path))
2. `ModalGridCustomizer.CustomizationPanel_AfterRender` calls `Initialize` with the customizer's `ListItems` and current page size, then wires the `ModalPopupExtender` (`TargetControlID` = the image, `PopupControlID` = the panel, `CancelControlID`, `OkControlID`, drag handle = the title row) and sets `OnOkScript` to a `__doPostBack` against the panel's OK button.
3. `ListItems` builds one `ListItem` per column, skipping `AlwaysHidden` columns, using the column header caption with `<br>` replaced by a space or — when no caption exists — the column key run through `PadCapitalLettersFormat`; the item is pre-checked when the column is visible and disabled when the column is `AlwaysVisible`. ([BR-AJAX-032](../business-rules.md#br-ajax-032-always-hidden-columns-are-not-offered-to-the-user), [BR-AJAX-033](../business-rules.md#br-ajax-033-a-column-with-no-header-caption-is-labeled-from-its-key), [BR-AJAX-034](../business-rules.md#br-ajax-034-always-visible-columns-appear-checked-but-disabled))
4. The checkbox list's `RepeatColumns` is computed as `ceil(itemCount / 10)` unless explicitly overridden. ([BR-AJAX-035](../business-rules.md#br-ajax-035-the-checkbox-list-is-laid-out-to-keep-at-most-ten-items-per-column))
5. The Apply button is rendered only when a `LinkedRefreshControlID` (a WARP) was supplied; otherwise only OK and Cancel are available. ([BR-AJAX-036](../business-rules.md#br-ajax-036-the-apply-button-is-offered-only-when-an-async-refresh-target-is-configured))
6. On OK/Apply the panel raises `OKButtonClicked` then `BindGrid`. The handler calls `GridCustomizer.Update` with the checkbox selections and the page-size value, then `ManipulateGrid`. ([BR-AJAX-037](../business-rules.md#br-ajax-037-confirming-the-popup-applies-choices-for-the-session-only))
   - See [Apply column and page settings to the grid](apply-column-and-page-settings-to-the-grid.md) for the detailed `ManipulateGrid` logic invoked here.
7. `CustomizationPanel_BindGrid` rebinds according to `BindingBehavior`: `ObjectBinder` → `clsObjectBindManager.ObjectToControl(grid)`; `DataBind` → `grid.DataBind()`; `Custom` → re-raise `BindGrid` for the page to handle. ([BR-AJAX-038](../business-rules.md#br-ajax-038-the-rebind-strategy-after-customization-is-chosen-by-the-consumer))
   - `ObjectBinder` mode delegates to `SAIF.Presentation.Web.Binding.clsObjectBindManager`, a sibling packaged library's object binder, to repopulate the grid from the model.

> **Origin**: This sub-step delegates to `clsObjectBindManager.ObjectToControl` implemented in `SAIF.Presentation.Web.Binding.Infragistics111` and executed on behalf of this operation.
8. "Save as Default" raises `OnSavePreferences`, whose handler calls `Update` then `SavePreferences` — writing the column-selection string and page size into `clsPreferences` and calling `Preferences.Save()`. ([BR-AJAX-039](../business-rules.md#br-ajax-039-only-save-as-default-persists-grid-preferences))

## Process flow

The following diagram visualizes this operation's control flow.

```mermaid
flowchart TD
	Start([User clicks customizer image]) --> Popup[ModalPopupExtender shows GridCustomizationPanel]
	Popup --> Render[Render checkbox list + page-size editor]
	Render --> Choice{User action}
	Choice -->|OK / Apply| Update[GridCustomizer.Update selections + page size]
	Choice -->|Save as Default| SaveUpdate[GridCustomizer.Update]
	Choice -->|Cancel| EndCancel([No change])
	Update --> Manipulate[ManipulateGrid applies state]
	Manipulate --> Rebind[Rebind grid per BindingBehavior]
	Rebind --> EndSession([Session-only customization])
	SaveUpdate --> ManipulateSave[ManipulateGrid applies state]
	ManipulateSave --> Persist[SavePreferences writes clsPreferences]
	Persist --> EndSaved([Preferences persisted])
```

## Failure and edge-case behavior
- Confirming OK/Apply applies choices for the current session only; only "Save as Default" persists them. ([BR-AJAX-037](../business-rules.md#br-ajax-037-confirming-the-popup-applies-choices-for-the-session-only), [BR-AJAX-039](../business-rules.md#br-ajax-039-only-save-as-default-persists-grid-preferences))
- The Apply button does not appear at all when no `LinkedRefreshControlID` was configured, so only OK/Cancel are available. ([BR-AJAX-036](../business-rules.md#br-ajax-036-the-apply-button-is-offered-only-when-an-async-refresh-target-is-configured))
- `BindingBehavior = Custom` re-raises `BindGrid` for the hosting page to handle rebinding itself; if the page does not handle it, the grid is not rebound. ([BR-AJAX-038](../business-rules.md#br-ajax-038-the-rebind-strategy-after-customization-is-chosen-by-the-consumer))

## Related documentation
- [Operations and processes](../operations-processes.md)
- [Business rules](../business-rules.md)
- [SQL catalog](../sql/index.md)
- [Database tables](../database-tables.md)

## Sources
- `SAIF.Presentation.Web.Controls.AJAX.Infragistics111/GridCustomizationPanel.vb`
- `SAIF.Presentation.Web.Controls.AJAX.Infragistics111/ModalGridCustomizer.vb`
- `SAIF.Presentation.Web.Controls.AJAX.Infragistics111/InfragisticsGridCustomizer.vb`