0

I have a table that displays and fetches data from the database working fine.

I have been searching for examples of how to layout the XML file to add drag and drop to the rows but just can't work it out :/

I have been trying to understand the docs by Magento here: https://devdocs.magento.com/guides/v2.1/ui_comp_guide/components/ui-dynamicrows.html https://devdocs.magento.com/guides/v2.1/ui_comp_guide/components/ui-draganddrop.html

But I don't know how to implement them, can anyone show me a working example or nudge me in the right direction?

Below is my current working XML:

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">admincontentbanners_homepageslider_post.admincontentbanners_homepageslider_post_data_source</item>
        <item name="deps" xsi:type="string">admincontentbanners_homepageslider_post.admincontentbanners_homepageslider_post_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">spinner_columns</item>
    <item name="buttons" xsi:type="array">
        <item name="add" xsi:type="array">
            <item name="name" xsi:type="string">add</item>
            <item name="label" xsi:type="string" translate="true">Add New Slide</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>
</argument>
<dataSource name="nameOfDataSource">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
        <argument name="name" xsi:type="string">admincontentbanners_homepageslider_post_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">slide_id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="storageConfig" xsi:type="array">
                    <item name="indexField" xsi:type="string">slide_position</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>
<columns name="spinner_columns">
    <selectionsColumn name="ids">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="resizeEnabled" xsi:type="boolean">false</item>
                <item name="resizeDefaultWidth" xsi:type="string">55</item>
                <item name="indexField" xsi:type="string">slide_id</item>
            </item>
        </argument>
    </selectionsColumn>
    <column name="slide_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">textRange</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="label" xsi:type="string" translate="true">Slide ID</item>
            </item>
        </argument>
    </column>
    <column name="full_image">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
                <item name="label" xsi:type="string" translate="true">Full Image</item>
            </item>
        </argument>
    </column>
    <column name="mobile_image">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
                <item name="label" xsi:type="string" translate="true">Mobile Image</item>
            </item>
        </argument>
    </column>
    <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">dateRange</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                <item name="dataType" xsi:type="string">date</item>
                <item name="label" xsi:type="string" translate="true">Created</item>
            </item>
        </argument>
    </column>
    <column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">dateRange</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                <item name="dataType" xsi:type="string">date</item>
                <item name="label" xsi:type="string" translate="true">Modified</item>
            </item>
        </argument>
    </column>
</columns>

  • I am stuck in exactly the same situation. Any update on this? – hallleron Aug 9 '18 at 14:03
  • Still nothing on this issue, even Magento Github dont really know and have not followed up with anything.. – Bossman Aug 9 '18 at 14:15
  • I ended up coding my own script with Sortable js. – Bossman Aug 9 '18 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.