1# GridObjectSortComponent
2
3
4**GridObjectSortComponent** is a grid object organizer that you can use to edit, drag to sort, add, and delete grid objects.
5
6
7>  **NOTE**
8>
9>  This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Modules to Import
13
14```ts
15import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI'
16```
17
18##  Child Components
19
20Not supported
21
22## Attributes
23
24The [universal attributes](ts-universal-attributes-size.md) are supported.
25
26## GridObjectSortComponent
27
28GridObjectSortComponent({options: GridObjectSortComponentOptions, dataList: Array\<GridObjectSortComponentItem>, onSave: (select: Array\<GridObjectSortComponentItem>, unselect: Array\<GridObjectSortComponentItem>) => void, onCancel: () => void })
29
30**Decorator**: @Component
31
32**Atomic service API**: This API can be used in atomic services since API version 12.
33
34**System capability**: SystemCapability.ArkUI.ArkUI.Full
35
36
37| Name    | Type                            | Mandatory| Decorator| Description        |
38| -------- | -------------------------------- | ---------- | ---- | ---- |
39| options  | [GridObjectSortComponentOptions](#gridobjectsortcomponentoptions) | Yes    | @Prop      | Component configuration.|
40| dataList | Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)> | Yes   | -     | Data to pass. The maximum data length is 50 characters. If it is exceeded, only the first 50 characters are used.|
41| onSave | (select: Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)>, unselect: Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)>)  => void | Yes| - | Callback invoked when changes are saved. The data after the changes is returned.|
42| onCancel | () => void | Yes| - | Callback invoked when changes are canceled.|
43
44##  GridObjectSortComponentOptions
45
46**Atomic service API**: This API can be used in atomic services since API version 12.
47
48**System capability**: SystemCapability.ArkUI.ArkUI.Full
49
50| Name          | Type                     | Mandatory| Description                                                  |
51| -------------- | ------------------------- | ---- | ------------------------------------------------------ |
52| type           | [GridObjectSortComponentType](#gridobjectsortcomponenttype) | No  | Component display form: text only or\|text and imagery.<br>Default value: **GridObjectSortComponentType.text**|
53| imageSize      | number \| [Resource](ts-types.md#resource) | No  | Image size.<br>Default value: **56**                         |
54| normalTitle | [ResourceStr](ts-types.md#resourcestr)     | No  | Title displayed in the non-editing state.<br>Default value: **Channel**           |
55| showAreaTitle | [ResourceStr](ts-types.md#resourcestr)     | No  | First subtitle of the display area.<br>Default value: **Drag to sort**|
56| addAreaTitle | [ResourceStr](ts-types.md#resourcestr)     | No  | Second subtitle of the display area.<br>Default value: **Touch to add**           |
57| editTitle      | [ResourceStr](ts-types.md#resourcestr)     | No  | Title displayed in the editing state.<br>Default value: **Edit**            |
58
59## GridObjectSortComponentType
60
61**Atomic service API**: This API can be used in atomic services since API version 12.
62
63**System capability**: SystemCapability.ArkUI.ArkUI.Full
64
65| Name    | Value   | Description          |
66| -------- | ----- | -------------- |
67| IMAGE_TEXT | 'image_text' | Text and imagery.|
68| TEXT     | 'text'       | Text only.    |
69
70## GridObjectSortComponentItem
71
72**Atomic service API**: This API can be used in atomic services since API version 12.
73
74**System capability**: SystemCapability.ArkUI.ArkUI.Full
75
76| Name    | Type                                  | Mandatory| Description                                                        |
77| -------- | -------------------------------------- | ---- | ------------------------------------------------------------ |
78| id       | number \| string             | Yes  | Data ID, which must be unique.                                      |
79| text     | [ResourceStr](ts-types.md#resourcestr) | Yes  | Text information.                                              |
80| selected | boolean                                | Yes  | Whether the grid object has been added. The value **true** means that grid object has been added, and **false** means the opposite.                 |
81| url      | [ResourceStr](ts-types.md#resourcestr) | No  | URL of the image. This parameter is required when **GridObjectSortComponentType** is set to **IMAGE_TEXT**.|
82| order    | number                                 | Yes  | Sequence number.                                                  |
83
84##  Events
85
86The [universal events](ts-universal-events-click.md) are not supported.
87
88## Example
89This example illustrates the basic usage of the **GridObjectSortComponent** component, involving component configuration initialization, data initialization, and the use of the save and cancel APIs.
90
91```ts
92import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI'
93
94@Entry
95@Component
96struct Index {
97  // Initialize the component data.
98  @State dataList: GridObjectSortComponentItem[] = [
99    {
100      id: 0,
101      url: $r('app.media.ic_controlcenter_location_filled'),
102      text: 'Location',
103      selected: true,
104      order: 3
105    },
106    {
107      id: 1,
108      url: $r('app.media.ic_controlcenter_mobiledata_filled'),
109      text: 'Mobile data',
110      selected: true,
111      order: 9
112    },
113    {
114      id: 2,
115      url: $r('app.media.ic_controlcenter_nfc_filled'),
116      text: 'NFC',
117      selected: false,
118      order: 1
119    },
120    {
121      id: 3,
122      url: $r('app.media.ic_controlcenter_ring_off_filled'),
123      text: 'Silent',
124      selected: true,
125      order: 4
126    },
127    {
128      id: 4,
129      url: $r('app.media.ic_controlcenter_ring_on_filled'),
130      text: 'Ring',
131      selected: false,
132      order: 5
133    },
134    {
135      id: 5,
136      url: $r('app.media.ic_controlcenter_ultra_power_saver_filled'),
137      text: 'Low power',
138      selected: true,
139      order: 6
140    },
141    {
142      id: 6,
143      url: $r('app.media.ic_controlcenter_screenshot_filled'),
144      text: 'Screenshot',
145      selected: true,
146      order: 7
147    },
148    {
149      id: 7,
150      url: $r('app.media.ic_controlcenter_screen_recording_filled'),
151      text: 'Screen recording',
152      selected: true,
153      order: 8
154    },
155    {
156      id: 8,
157      url: $r('app.media.ic_controlcenter_super_power_saver_filled'),
158      text: 'Ultra power saving',
159      selected: false,
160      order: 9
161    },
162  ]
163
164  // Initialize the component configuration information.
165  @State option: GridObjectSortComponentOptions = {
166    type: GridObjectSortComponentType.IMAGE_TEXT,
167    imageSize: 45,
168    normalTitle: 'Menu',
169    editTitle: 'Edit',
170    showAreaTitle: 'Drag to sort',
171    addAreaTitle: 'Touch to add'
172  }
173
174  build() {
175    Column() {
176      GridObjectSortComponent({
177        options: this.option,
178        dataList: this.dataList,
179        // Callback invoked when changes are saved. The data after the changes is returned.
180        onSave: (
181          select: Array<GridObjectSortComponentItem>,
182          unselect: Array<GridObjectSortComponentItem>
183        ) => {
184          // save ToDo
185        },
186        // Callback invoked when changes are canceled.
187        onCancel: () =>{
188          // cancel ToDo
189        }
190      })
191    }
192  }
193}
194```
195
196![GridObjectSortComponent](figures/GridObjectSortComponent.gif)
197