Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Update DragAndDrop UI component documentation #6038

Merged
merged 2 commits into from
Nov 20, 2019
Merged

Update DragAndDrop UI component documentation #6038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e935976
Update DragAndDrop UI component documentation
Nov 20, 2019
2589fc0
Grammar updates
keharper Nov 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added common/images/ui_comps/ui-draganddrop-columns-result.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 51 additions & 6 deletions guides/v2.2/ui_comp_guide/components/ui-draganddrop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,60 @@ The DragAndDrop component is an [extension](https://glossary.magento.com/extensi

## Configuration options

|Option|Description|Type|Default Value|
|--- |--- |--- |--- |
|`enabled`|Whether the component is allowed to change the position of columns.|Boolean|`true`|
|`fixedX`|Whether the column has a fixed position on the X-axis. That is, whether it can be moved horizontally.|Boolean|`false`|
|`fixedY`|Whether the column has a fixed position on the X-axis. That is, whether it can be moved horizontally.|Boolean|`true`|
|`noSelectClass`|CSS class applied to the table when one of its columns is being dragged.|String|`_no-select`|
| Option | Description | Type | Default Value |
| --- | --- | --- | --- |
| `enabled `| Whether the component is allowed to change the position of columns. | Boolean | `true` |
| `fixedX` | Whether the column has a fixed position on the X-axis. That is, whether it can be moved horizontally. | Boolean | `false` |
| `fixedY` | Whether the column has a fixed position on the Y-axis. That is, whether it can be moved vertically. | Boolean | `true` |
| `noSelectClass` | CSS class applied to the table when one of its columns is being dragged. | String | `'_no-select'` |

## Source files

Extends [`UiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicollection_concept.html):

- [`app/code/Magento/Ui/view/base/web/js/grid/dnd.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/dnd.js)

## Examples

### Integrate the DragAndDrop component with the Listing component

This example configures the DragAndDrop component for the [Columns]({{ page.baseurl }}/ui_comp_guide/components/ui-columns.html) component and integrates it with the [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:

```xml
<listing>
...
<columns>
<settings>
<dndConfig>
<param name="enabled" xsi:type="boolean">true</param>
<param name="fixedX" xsi:type="boolean">false</param>
<param name="fixedY" xsi:type="boolean">true</param>
<param name="noSelectClass" xsi:type="string">_no-select</param>
</dndConfig>
</settings>
...
</columns>
</listing>
```

#### Result

![DateColumn Component Example]({{ site.baseurl }}/common/images/ui_comps/ui-draganddrop-columns-result.png)

### Disable the DragAndDrop component for the Columns component

This example disables the DragAndDrop component for the [Columns]({{ page.baseurl }}/ui_comp_guide/components/ui-columns.html) component and integrates it with the [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:

```xml
<listing>
...
<columns>
<settings>
<dndConfig>
<param name="enabled" xsi:type="boolean">false</param>
</dndConfig>
</settings>
...
</columns>
</listing>
```