---
title: Cascading dropdown JavaScript generation
summary: Generates the client-side filter function that restricts Column2's value list based on Column1's selected value.
status: draft
owner: SAIF Documentation Team
last_reviewed: 2026-08-17
library: SAIF.Presentation.Web.Controls.Infragistics103
reference_type: package
operation_id: OP-DROPDOWN-GENJS
trigger: Called from within clsDropDownController.DataBind
---

# Cascading dropdown JavaScript generation

This operation builds the JavaScript block that Infragistics invokes client-side when a Column2 grid cell enters edit mode, filtering that cell's available options to only those matching the row's Column1 selection.

| Field | Value |
| --- | --- |
| **Operation ID** | OP-DROPDOWN-GENJS |
| **Trigger** | Called from within [Cascading dropdown data bind](cascading-dropdown-data-bind.md) (same class) |
| **Inputs** | Populated `l1`/`l2` collections, `Column1.Key`, `Column2.Key` |
| **Outputs** | A JavaScript string registered as the `"DD"` client script block |
| **Primary components** | `clsDropDownController.GenerateJavaScript` |
| **Entry point** | SAIF.Presentation.Web.Controls.Infragistics103\clsDropDownController.vb |

## Steps

1. Emit a `<script>` block defining `function BeforeEdit{Column2.Key}(gridName, cellId)`.
2. Inside the function: resolve the grid column and row via Infragistics client APIs `igtbl_getColumnById`/`igtbl_getRowById`.
   - If `col.Key` does not equal `Column2.Key`: return immediately (guard clause — the function is reused across cells but only acts on the matching column).
3. Read the current value of the `Column1`-keyed cell in the same row (`catCell`).
4. Build a JS `switch(catCell)` statement: for each `l1` item (a distinct Column1 value), emit a `case` that constructs a filtered `vListFilter` array containing only the `l2` items whose `key` (case-insensitively) matches that `l1` item's `id` ([BR-5](../business-rules.md#br-5-cascading-dropdown-filters-column2-options-by-column1-key)).
5. Assign the filtered array to `col.ValueList`, replacing the grid column's dropdown options with the subset relevant to the selected Column1 value.

This implements the client-side business behavior of a dependent/cascading dropdown inside an Infragistics `UltraWebGrid` cell; the matching logic ("key equals id") is a UI filtering convention, not a documented business rule with a separate server-side enforcement point.

## Process flow

The following diagram visualizes this operation's control flow.

```mermaid
flowchart TD
	Start([BeforeEdit function invoked client-side]) --> Resolve[Resolve col and row via igtbl_getColumnById/igtbl_getRowById]
	Resolve --> Guard{col.Key equals Column2.Key?}
	Guard -->|No| EndSkip([Return - not the target column])
	Guard -->|Yes| ReadCat[Read Column1-keyed cell value catCell]
	ReadCat --> Switch[switch on catCell: build filtered vListFilter per l1 item]
	Switch --> Assign[Assign vListFilter to col.ValueList]
	Assign --> EndOk([Filtered options shown in grid cell])
```

## Failure and edge-case behavior
- Guard clause: if the resolved column's key does not match `Column2.Key`, the function returns without modifying the value list — this allows one generated function to be safely wired for reuse across cells.

## Related documentation
- [Operations and processes](../operations-processes.md)
- [Business rules](../business-rules.md)

## Sources
- SAIF.Presentation.Web.Controls.Infragistics103\clsDropDownController.vb