Drag & drop not working...

31 Posts

SiarAneas Reply #1, 9 years, 9 months ago

Hi everyone,

I followed this tutorial on how to create a custom migxdb and connect it with a resource-dependant MigxTV:
http://rtfm.modx.com/extras/revo/migxdb/migxdb.tutorials/migxdb.create-a-basic-gallery-management-from-scratch-with-migxdb

I got everything working so far - however - and I think I'm just missing a crucial point somewhere: I can't order the items in the grid by drag & drop... Could anyone tell me how I can enable this? The "pos" field is always just filled with "0".

Thanks a lot!

SiarAneas

This is my config:

{
  "formtabs":[
    {
      "MIGX_id":1,
      "caption":"Bezeichnung",
      "print_before_tabs":"0",
      "fields":[
        {
          "MIGX_id":1,
          "field":"title",
          "caption":"Title",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"required",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "pos":1
        }
      ],
      "pos":1
    },
    {
      "MIGX_id":2,
      "caption":"Inhalt",
      "print_before_tabs":"0",
      "fields":[
        {
          "MIGX_id":3,
          "field":"description",
          "caption":"Description",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"textarea",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "pos":1
        },
        {
          "MIGX_id":6,
          "field":"type",
          "caption":"Art der Mietbedingung",
          "description":"Blaba",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "pos":2
        },
        {
          "MIGX_id":7,
          "field":"company",
          "caption":"Firma",
          "description":"Firma",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "pos":3
        },
        {
          "MIGX_id":8,
          "field":"country",
          "caption":"Land",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "pos":4
        }
      ],
      "pos":2
    },
    {
      "MIGX_id":3,
      "caption":"G\u00fcltigkeit",
      "print_before_tabs":"0",
      "fields":[
        {
          "MIGX_id":4,
          "field":"validfrom",
          "caption":"G\u00fcltig von",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"dateWithoutTime",
          "validation":"required",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "pos":1
        },
        {
          "MIGX_id":5,
          "field":"validto",
          "caption":"G\u00fcltig bis",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"dateWithoutTime",
          "validation":"required",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "pos":2
        }
      ],
      "pos":3
    }
  ],
  "contextmenus":"update||publish||unpublish||recall_remove_delete",
  "actionbuttons":"addItem||toggletrash",
  "columnbuttons":"",
  "filters":"",
  "extended":{
    "migx_add":"Neue Mietbedingung",
    "disable_add_item":"",
    "formcaption":"Vorhandene [[+pagetitle]]:",
    "update_win_title":"",
    "win_id":"testpackage1",
    "maxRecords":"",
    "addNewItemAt":"bottom",
    "multiple_formtabs":"",
    "actionbuttonsperrow":4,
    "winbuttonslist":"",
    "extrahandlers":"",
    "filtersperrow":4,
    "packageName":"testpackage1",
    "classname":"testClass1",
    "task":"",
    "getlistsort":"",
    "getlistsortdir":"",
    "sortconfig":"",
    "gridpagesize":"",
    "use_custom_prefix":1,
    "prefix":"cb_",
    "grid":"",
    "gridload_mode":2,
    "check_resid":1,
    "check_resid_TV":"",
    "join_alias":"",
    "has_jointable":"yes",
    "getlistwhere":"",
    "joins":"",
    "cmpmaincaption":"",
    "cmptabcaption":"",
    "cmptabdescription":"",
    "cmptabcontroller":"",
    "winbuttons":"",
    "onsubmitsuccess":"",
    "submitparams":""
  },
  "columns":[
    {
      "MIGX_id":1,
      "header":"ID",
      "dataIndex":"id",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":""
    },
    {
      "MIGX_id":2,
      "header":"Bezeichnung",
      "dataIndex":"title",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":""
    },
    {
      "MIGX_id":3,
      "header":"Inhalt",
      "dataIndex":"description",
      "renderer":"",
      "sortable":"false",
      "show_in_grid":1
    },
    {
      "MIGX_id":4,
      "header":"Published",
      "dataIndex":"published",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"this.renderCrossTick",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":""
    },
    {
      "MIGX_id":6,
      "header":"Gel\u00f6scht?",
      "dataIndex":"deleted",
      "width":"",
      "sortable":"false",
      "show_in_grid":"0",
      "renderer":"this.renderCrossTick",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":""
    },
    {
      "MIGX_id":7,
      "header":"Pos",
      "dataIndex":"pos",
      "width":"",
      "sortable":true,
      "show_in_grid":1,
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":""
    }
  ]
}

And this is my schema

<?xml version="1.0" encoding="UTF-8"?>
<model package="testpackage1" baseClass="xPDOObject" platform="mysql" defaultEngine="MyISAM" version="1.1" tablePrefix="cb_">
    <object class="testClass1" table="test" extends="xPDOSimpleObject" >
        <field key="title" dbtype="varchar" precision="255" phptype="string" null="false" default="" />
        <field key="description" dbtype="text" phptype="string" />
        <field key="resource_id" dbtype="int" precision="11" phptype="integer" null="false" default="0" />
        <field key="type" dbtype="int" precision="3" phptype="integer" null="false" />
        <field key="company" dbtype="varchar" precision="255" phptype="string" null="false"/>
        <field key="country" dbtype="varchar" precision="255" phptype="string" null="false"/>
        <field key="validfrom" dbtype="datetime" phptype="datetime" null="true" />
        <field key="validto" dbtype="datetime" phptype="datetime" null="true" />
        <field key="createdby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <field key="createdon" dbtype="datetime" phptype="datetime" null="true" />
        <field key="editedby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <field key="editedon" dbtype="datetime" phptype="datetime" null="true" />
        <field key="deleted" dbtype="tinyint" precision="1" attributes="unsigned" phptype="integer" null="false" default="0" />
        <field key="deletedon" dbtype="datetime" phptype="datetime" null="true" />
        <field key="deletedby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <field key="publishedon" dbtype="datetime" phptype="datetime" null="true" />
        <field key="publishedby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <field key="pos" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <field key="resource_ids" dbtype="text" phptype="string" null="false" default="" />
        <field key="published" dbtype="tinyint" precision="1" attributes="unsigned" phptype="integer" null="false" default="0" />
        <index alias="PRIMARY" name="PRIMARY" primary="true" unique="true">
            <column key="id" collation="A" null="false" />
        </index>
        <aggregate alias="Resource" class="modResource" local="resource_id" foreign="id" cardinality="one" owner="foreign" />
        <aggregate alias="Creator" class="modUser" local="createdby" foreign="id" cardinality="one" owner="foreign" />
    </object>
</model>

This question has been answered by SiarAneas. See the first response.

5,888 Posts

Bruno17 Reply #2, 9 years, 9 months ago

there isn't a drag/drop - functionality with the default-migxdb-grid, but there is a special column-renderer (this.renderPositionSelector) for click and select a new position for a row.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

31 Posts

SiarAneas Reply #3, 9 years, 9 months ago

Hi Bruno,

thanks for your quick reply - you say "default"-migxdb-grid - so is there one where it is supported?
Drag&Drop was one of the main reasons for choosing MIGX - I also saw this feature on different Tutorials/Videos (like this for example around 5:48 https://www.youtube.com/watch?v=dE9-oZCqy9o)

Probably I misunderstood some basic concepts but I really tried to work my way through the tutorials...

Thanks!

31 Posts

SiarAneas Reply #4, 9 years, 9 months ago

Hi again,

meanwhile I dug a bit deeper into it and found these pages regarding the topic:

https://github.com/Bruno17/MIGX/issues/77
http://forums.modx.com/thread/?thread=89573

Bruno: Just one question - I get your point regarding drag&drop on paginated results - however: Is there a way to enable the drag&drop feature anyway?

Cheers!

Siar

5,888 Posts

Bruno17 Reply #5, 9 years, 9 months ago

you would need a customized extjs-grid (a copy of the default migxdb-grid)
which calls a php-processor at the drop-event.

the processor would do something like the handlepositionselector - processor
https://github.com/Bruno17/MIGX/blob/master/core/components/migx/processors/mgr/default/handlepositionselector.php

So, yes it should be possible, but would need some coding.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

31 Posts

SiarAneas Reply #6, 9 years, 9 months ago

I'm more than happy to do some coding - I would also push it into your repository...
I had a look at how the POST to the migx processor works - looks quite straightforward.

However, could you give me a little hint on where to start about the extJS grid?
- Where can I customize the migxdb grid / enable the extJS DragDrop in the first place?
- How and where can I write a function that catches the Drop event?

Cheers,

Siar

5,888 Posts

Bruno17 Reply #7, 9 years, 9 months ago

here is the default grid
https://github.com/Bruno17/MIGX/blob/master/core/components/migx/templates/mgr/grids/default.grid.tpl

and here is a grid with drag/drop - functionality (I think - it was long ago since I was playing with it)
https://github.com/Bruno17/MIGX/blob/master/core/components/migx/templates/mgr/grids/dragdrop.grid.tpl

there is a setting in the MIGX-configurator (MIGXdb - settings), where you can set the grid to use.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

31 Posts

SiarAneas Reply #8, 9 years, 9 months ago

Great!
Thanks a lot - I will try to implement it when I have some time and come back to you!

discuss.answer

31 Posts

SiarAneas Reply #9, 9 years, 8 months ago

Hi Bruno,

I tried to work my way into it (I'm new to ExtJS) and actually was able to make it work.

What I did:
1. Replaced the dragdrop.grid.tpl with the default.grid.tpl (the dragdrop.grid.tpl wasn't working at all for - didn't load the grid at all)
2. Added an AJAX call to the notifyDrop function, that uses your handlepositionselector processor to reorder things and reload the grid afterwards. To keep things easy I hardcoded the col setting to "pos:before" - it's a bit inconvenient to move a row to the last position but for now I think it's OK.
3. I tried to implement a notifyOver function (tried notifyEnter in the first place but this didn't work at all) to add a "drop invitation" feature for the user. I tried to make it return a custom css class but this wouldn't work (you will find some comments in the code). I was doing some debugging, when I found out that this line of code would at least make the current row 'selected' (don't actually understand why, though wink

var activeRow=dd.getDragData(e).rowIndex;

- so I applied some custom styles to the .x-grid3-row-selected which makes it look like a drop invitation:

.x-grid3-row-selected{
    border-top-width: 2px!important;
    border-top-color: #111!important;
}

This is however also applied when I just use the Checkbox for bulk actions so it's really ugly and a nasty hack...

I attached the .tpl - maybe you could have a look whether you approve of it and whether you have any idea how to add a proper drop invitation...

Cheers!

Siar

31 Posts

SiarAneas Reply #10, 9 years, 8 months ago

For all others:
To get drag&drop working: Just download the above dragdrop.grid.tpl and replace the original file (/modx/core/components/migx/templates/mgr/grids/dragdrop.grid.tpl) with it.
Then in your MIGX Configurations -> MIGXdb-Settings put "dragdrop" in in the field "Grid".

Enjoy

Answered Drag & drop not working...