[updated partial solution] simple drag drop datalist

[TheunisP]

Hi guys, a bit of advice needed - I need a really simple simple drag drop datalist - since the list has all the info I need key and value - but the datalist has no DnD property do I need to add another JS to add the functionality - I read somewhere in the forum of such a extra - but lost the link now - will search again :-) Or is there another very simple way.

[TheunisP]

I started from the point that the datalist extends from the datagrid - and have a working drag drop for datagrid with the extra dnd JS file. But it doesn't make sense that I cannot drag and drop the datalist or am I missing something?

[TheunisP]

ok here is a possible solution, taken/adapted from a previous post for another user's question where stworthy helped - I just replaced the all select and unselect with var rows = $easy('#dg').datagrid('getRows'); and corrected a typo I believe newPosIds.push(rows.id);      

** but I now have 2 new problems ;-)

1) the name column doesnt resize to full width / the hidden field is taking up space still - as you can see I tried 2 different ways of forcing a width refresh - any ideas?

2) I want it to stop highligting selected items e.g that it turns orange or whatever the background color is for a selected item - since I dragged and not selected the item e.g. I want to make all items in list not selectable - more ideas?



  <table class="easyui-datagrid" id="dg" width="100%" title="Workflow Steps" data-options="
    idField: 'id',
    rownumbers:true,
    fitColumns: true,
    fit: true,
    singleSelect: false,
    showHeader: false,
    showFooter: false,
    onLoadSuccess:function(){
      $easy(this).datagrid('enableDnd');
      $easy(this).datagrid('hideColumn','id');
      $easy(this).datagrid('resize');
      $easy(this).datagrid('fixColumnSize','name');
    },
    onDrop:function(destRow,sourceRow,point){ 
      var newPosIds = [];       
      var rows = $easy('#dg').datagrid('getRows');       
      for(var i=0; i<rows.length; i++){        
        newPosIds.push(rows.id);      
      }       
      alert(newPosIds);       
      }">


    <thead>
      <tr>
        <th data-options="field:'id'">Id</th>
        <th data-options="field:'name'" width="100%">Steps</th>
      </tr>
    </thead>
    <tbody>
      <tr>           
        <td>1</td><td>Step 1</td>
      </tr>
      <tr>           
        <td>2</td><td>Step 2</td>
      </tr>
      <tr>           
        <td>3</td><td>Step 3</td>
      </tr>
    </tbody>
  </table>