---
name: "SmartGroupModel.onDpDataChange"
mode: "api"
versionRequirements:
  - { name: "@ray-js/panel-sdk", version: "1.5.0" }
title: "onDpDataChange"
---

## SmartGroupModel.onDpDataChange

> [VERSION] @ray-js/panel-sdk >= 1.5.0

> 💡 In a group-device environment, the native @ray-js/ray onDpDataChange does not actually fire. To automatically adapt to both single-device and group-device environments, this callback will be invoked in sync when the underlying onGroupDpDataChangeEvent fires.

### Description

Listen for DP change events in group devices

### Parameters

`(listener: Function)`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `listener` | `(data: GroupDpsChanged) => number` | Yes | Event callback that receives parameters including groupId, dps (mapping of changed DP IDs to values), etc. |

### Return Value

None


### Referenced Types

##### `type` GroupDpsChanged

DP change event callback parameters (group device)

| Property | Type | Description |
| --- | --- | --- |
| `groupId` | `string` | Group ID |
| `dps` | `DpState` | Changed DP data, where the key is the DP ID and the value is the DP value |

##### `type` DpState

Datapoint status object, where the key is the datapoint code and the value is the datapoint value.

```typescript
export type DpState = Record<string, DpValue>;
```

##### `type` DpValue

Datapoint value type, which can be boolean, number, or string.

```typescript
export type DpValue = boolean | number | string;
```


### Examples

#### Example

```typescript
const id = group.onDpDataChange((data) => {
  console.log('DP changed:', data.dps);
});
// Unregister when needed
group.offDpDataChange(id);
```