Jump to content

How can I drag and drop between uniDBGrids?


Bresler

Recommended Posts

  • 3 months later...
  • 6 months later...

For example i have 2 frames with grid I put TUNIHTMLFrame with such HTML

In wic code not only dragdrop from one grid to another but in chrome from desctop to chrome

 

 

<script type="text/javascript">

// LeftDocs - first frame with grid and RightDocs. second frame with grid

var ajaxtarget = DocTbl.dropHtml; // TUNIHTMLFRAME with wis html

//first grid in you case possible grid1
var ldropbox = document.getElementById(LeftDocs.MainGrid.id);

//second grid for exaple you grid2
var rdropbox = document.getElementById(RightDocs.MainGrid.id);

 

//  some functions for my case were i am get in my form with to frames

//bla bla begin
var curtarget;
var fstopdrop = false;

function GetGrid(obj)
{
 var grid = obj;
 var par = 0;
 while((par==0)&&(grid!=null))
 {
   if(grid == ldropbox){
     par = 1;
   }else if (grid == rdropbox){
     par = 2;
   }else{
     grid = grid.parentNode;
   }
 }
 return grid;
}

function IsLeft(curtarget)
{
  if (curtarget == ldropbox){
    return 1;
  } else if (curtarget == rdropbox){
    return 2;
  } else {
    return 0;
  }
}

//bla bla end

// get selected row of grid
getSelectedRowIndex =  function(grid)
{
  var r = grid.getSelectionModel().getSelection();
  var s = grid.getStore();
  return s.indexOf(r[0]);
}

 

//path to files from dectop to chrome blabla begin
function pathToFile(str)
{
 var nOffset = Math.max(0, Math.max(str.lastIndexOf('\\\u005C'), str.lastIndexOf('/')));
 return str.substring(nOffset > 0 ? nOffset + 2 : 0, str.length);
}

//bla bla end

 

//ajax event for drag start
function dragStart(evt)
{

//get source grid
  var curgrid = GetGrid(evt.target); if (curgrid==null) return true;    

//set id of grid in object data transfer for chrome dragdrop
  evt.dataTransfer.setData("gridid", curgrid.getAttribute('id'));
 

//get value of id and File name in my grid from 2 and 4 column
  var egrid=Ext.getCmp(curgrid.id);
  var sm = egrid.getSelectionModel().getSelection()[0]; //
  var fID = sm.get("4").toString();
  var fName1 = sm.get("2").toString();
  //alert("OLDFILE>>>"+fName1);
  var fName = pathToFile2(fName1);
 
  //alert("FILE>>>"+fName);
 

//set info about grid information in   event.dataTransfer. in format octet-stream
  files = "application/octet-stream:"+fName+":"+
  document.location+"?$$$=0&id="+fID+"&uid="+MainForm.uid.text;
  //alert("File=>>>>"+files);  
  event.dataTransfer.setData("DownloadURL",files);
  return true;
}
 

 

//handle drag event
function dragEnter(evt)
{
  evt.stopPropagation();
  evt.preventDefault();
}

 

//handle drag exit event
function dragExit(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

 

//handle drag over event
function dragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

 

// and finally handle drop event
function drop(evt)
{

// stop propagation
  evt.stopPropagation();
  evt.preventDefault();  //alert('drop');

 

//get id of target grid
  curgrid = GetGrid(evt.target);
  par = IsLeft(curgrid);

  // get Files and Count:
  var files = evt.dataTransfer.files;
  var count = files.length;

  // Only call the handler if 1 or more files was dropped:

// if file count more one its dragdrop from dectop to chrome
  if (count > 0)
  {
    curtarget = par;
    handleFiles(files);
  }
  else
  {

// else its drag drop from one grid to another src grid id in evt.dataTransfer.getData("gridid")
    var gridid = evt.dataTransfer.getData("gridid");
    if ((gridid!=null)&&(gridid!=curgrid.id))
    {

// create ajax event to inform delphi code
      ajaxRequest(ajaxtarget, "drop data", ["id="+par]);
    }
  }
}
 

// initialize events for grids and point its draggable
function initEventHandlers()
{
  // set EventHandlers for dropbox for drag and drop: // //
  ldropbox.draggable = true;
  ldropbox.addEventListener("dragenter", dragEnter, false);
  ldropbox.addEventListener("dragexit",  dragExit,  false);
  ldropbox.addEventListener("dragover",  dragOver,  false);
  ldropbox.addEventListener("drop",      drop,      false);
  ldropbox.addEventListener("dragstart", dragStart, false);
//ldropbox.addEventListener("paste",     Pasta,     false);
  rdropbox.draggable = true;
  rdropbox.addEventListener("dragenter", dragEnter, false);
  rdropbox.addEventListener("dragexit",  dragExit,  false);
  rdropbox.addEventListener("dragover",  dragOver,  false);
  rdropbox.addEventListener("drop",      drop,      false);
  rdropbox.addEventListener("dragstart", dragStart, false);
//rdropbox.addEventListener("paste",     Pasta,     false);
}

function SendStopDrop()
{
  alert("Stop");
  // notify the upload start:
  ajaxRequest(ajaxtarget, "stopdrop", []);
}
 

//handle several files dropped from desktop to chrome
function handleFiles(files)
{
  fstopdrop = false;
  // for each file to upload:
  for (var i = 0, f; f = files; i++)
  {
     // init FileReader for this file:
     var reader = new FileReader();

     // notify the upload start:
     ajaxRequest(ajaxtarget, "uploadingfile", ["filename="+f.name, "filesize="+f.size, "filetype="+f.type]);

     // set event handler "reader.onprogress":
     reader.onprogress = (function(f)
     {
             return function(e)
         {
           //setTimeout(arguments.callee, 100);
           if(fstopdrop==true)
           {
             alert("fstopdrop");
             SendStopDrop();
           }
           else
           {
                  // notify file upload progress (e is a Progressevent):
                  var percentLoaded = Math.round((e.loaded / e.total) * 100);
               ajaxRequest(ajaxtarget, "uploadingprogress",
             ["filename="+f.name, "filesize="+f.size, "filetype="+f.type,
              "loaded="+e.loaded, "total="+e.total, "percent="+percentLoaded]);
           }
             }
     })(f);

     // set event handler "reader.onload":
     reader.onload = (function(f)
     {
        return function(e)
        {
          //setTimeout(arguments.callee, 100);
          if(fstopdrop==true)
          { //alert("fstopdrop");
            SendStopDrop();
          }else{
            // send to server e.target.result , filename, filesize and filetype:
            ajaxRequest(ajaxtarget, "uploadedfile", ["filename="+f.name,
            "filesize="+f.size, "filetype="+f.type, "content="+e.target.result, "id="+curtarget]);
          }
        };
     })(f);

     //start read operation for this file:
     reader.readAsDataURL(f);   
     
     if(fstopdrop==true)
     { //alert("fstopdrop");
       SendStopDrop();       
       break;
     }
  }
  fstopdrop = false;
}

//call initialize events
initEventHandlers();
</script>
 

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

 

Now i am handle  On Ajax event from TUNIHTMLFRAME with wits HTML

 

 

procedure TDocTbl.dropHtmlAjaxEvent(Sender: TComponent;
  EventName: string; Params: TStrings);
var
  FileName: String;
  FileSize: String;
  FileType: String;
  p: Integer;
  F: TFileStream;
  MS: TMemoryStream;
  S, SID: String;
  Size, i: Integer;
  ANewID: Variant; //ActFrm: TdchDocsFrame;
begin
  if EventName='dragStartEvt' then
    begin
    S := '1';
    end;
  //upload init: invisstr
(*
  If EventName = 'dragstart' then
    begin
    SID := Params.Values['id'];
    if SID='1' then DoneFrame := LeftDocs else DoneFrame := RightDocs; //if DoneFrame<>nil then DoneFrame.AddStream(FileName, MS); //      MainQuery
    invisstr.Caption := DoneFrame._FileName.AsString;
    Exit;
    end;
*)

  If EventName = 'stopdrop' then
    begin
    FDropCounter := 0;
    pnDrop.Visible := false;
    mmoFiles.Lines.Clear;
    FFileList.Clear;
    Exit;
    end;


  If EventName = 'drop data' then
    begin
    SID := Params.Values['id'];
    if SID='1' then DoneFrame := LeftDocs else DoneFrame := RightDocs; //i := StrToInt(Params.values['filename']);
    DoneFrame.Frend.actMoveExecute(Sender);
    Exit;
    end;

  //начало загрузки
  If EventName = 'uploadingfile' then
    begin
    if StopDrop then Exit;
    Inc(FDropCounter);
    if FDropCounter = 1 then
      begin
      FFileList.Clear;
      pnDrop.Visible := true;
      end;

    FileName := Params.values['filename'];
    FileSize := Params.values['filesize'];
    FileType := Params.values['filetype'];

    if FFileList.IndexOf(FileName) < 0 then
      begin
      FFileList.Add(FileName);
      mmoFiles.Lines.Add('загружаю ' + FileName + ' (' + FileSize + ' байт)');
      end
    else
      begin
      mmoFiles.Lines[FFileList.IndexOf(FileName)] := 'загружено 000% of ' + FileName + ' (' + FileSize + ' байт)';
      end;
    end;

  //процесс загрузки крутим проценты:
  if EventName = 'uploadingprogress' then
    begin
    if StopDrop then
      begin
      FDropCounter := 0;
      pnDrop.Visible := false;
      mmoFiles.Lines.Clear;
      FFileList.Clear;
      Exit;
      end;

    FileName := Params.values['filename'];
    FileSize := Params.values['filesize'];
    FileType := Params.values['filetype'];
    p := StrToIntDef(Params.Values['percent'], 0);
    i := FFileList.IndexOf(FileName);
    if i>=0 then mmoFiles.Lines :='загружено ' + Format('%3.3d', [p]) + '% файла ' + FileName + ' (' + FileSize + ' байт)';
    end;

  //файл загружен:
  if eventname = 'uploadedfile' then
    begin
    if StopDrop then
      begin
      FDropCounter := 0;
      pnDrop.Visible := false;
      mmoFiles.Lines.Clear;
      FFileList.Clear;
      Exit;
      end;

    Dec(FDropCounter);
    FileName := Params.values['filename'];
    FileSize := Params.values['filesize'];
    FileType := Params.values['filetype'];

    i := FFileList.IndexOf(FileName);
    if i<0 then
      begin
      FFileList.Add(FileName);
      mmoFiles.Lines.Add('ОШИБКА: неизвестный файл ' + FileName + ' (' + FileSize + ' Bytes)'); //will be only displayed after exception!
      i := FFileList.IndexOf(FileName);
      end;

    Size := StrToIntDef(FileSize, 0); // ABoDyFileName //F := TFileStream.Create(FUploadpath + FileName, fmCreate);
    MS := TMemoryStream.Create;
    try
      S := Params.Values['content'];
      p := Pos('base64,', S);
      if p <= 0 then
        begin //mmoFiles.Lines[FFileList.IndexOf(FileName)] := '??? ERROR: Content ??? ' + FileName + ' (' + FileSize + ' Bytes)';
        mmoFiles.Lines := 'ОШИБКА: кордировка не base64 ' + FileName + ' (' + FileSize + ' Bytes)';
        end
      else
        begin
        S := Copy(S, p + 7, Length(S) - p - 6);
        StrToStream(AnsiString(S), MS);
        if (MS.Size <> Size) then
          begin
          mmoFiles.Lines :='ОШИБКА: размер файла ' + FileName + ' (' + FileSize + ' Bytes)';
          end
        else
          begin
          mmoFiles.Lines := FileName + ' (' + FileSize + ' Bytes)';
          end;
        end;

      SID := Params.Values['id'];
      if SID='1' then DoneFrame := LeftDocs else DoneFrame := RightDocs; //if DoneFrame<>nil then DoneFrame.AddStream(FileName, MS); //      MainQuery

      try
        MainData.AddFile(DoneFrame.CurParentID, FileName,  FileName, MS, ANewID, True);
      except
        on e: Exception do
          mmoFiles.Lines :='ОШИБКА: загрузки файла в базу ' + FileName + ' (' + E.Message + ')';
       end;
    finally
      MS{F}.Free;
    end;

    if FDropCounter <= 0 then
      begin
      mmoFiles.Lines.Clear;
      tmrDone.Enabled:= true;
      end;
  end;

  if eventname = 'drop data' then
    begin
    S := Params.values['par'];
    end;
end;
 

 

 

I am handled drop from dectop to chrome and from one grid to another

 

 

in EventName = 'drop data'

 

 

 

accept parameter

 

  If EventName = 'drop data' then
    begin
    SID := Params.Values['id'];
    if SID='1' then DoneFrame := LeftDocs else DoneFrame := RightDocs; //i := StrToInt(Params.values['filename']);
    DoneFrame.Frend.actMoveExecute(Sender);
    Exit;
    end;
 

In fact you put 2 grid and TUNIHTMLFrame in HTML

get id of grids

 

var ldropbox = document.getElementById(LeftDocs.MainGrid.id);
var rdropbox = document.getElementById(RightDocs.MainGrid.id);
 

 

 

 

 

register events and say grid draggable

 

 

function initEventHandlers()
{
  // set EventHandlers for dropbox for drag and drop: // //
  ldropbox.draggable = true;
  ldropbox.addEventListener("dragenter", dragEnter, false);
  ldropbox.addEventListener("dragexit",  dragExit,  false);
  ldropbox.addEventListener("dragover",  dragOver,  false);
  ldropbox.addEventListener("drop",      drop,      false);
  ldropbox.addEventListener("dragstart", dragStart, false);
//ldropbox.addEventListener("paste",     Pasta,     false);
  rdropbox.draggable = true;
  rdropbox.addEventListener("dragenter", dragEnter, false);
  rdropbox.addEventListener("dragexit",  dragExit,  false);
  rdropbox.addEventListener("dragover",  dragOver,  false);
  rdropbox.addEventListener("drop",      drop,      false);
  rdropbox.addEventListener("dragstart", dragStart, false);
//rdropbox.addEventListener("paste",     Pasta,     false);
}
 

 

initEventHandlers();

 

 

do some auto

 

function dragEnter(evt)
{
  evt.stopPropagation();
  evt.preventDefault();
}

function dragExit(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

function dragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}
 

in start drag remember data

 

 

function dragStart(evt)
{
  var curgrid = GetGrid(evt.target); if (curgrid==null) return true;    
  evt.dataTransfer.setData("gridid", curgrid.getAttribute('id'));
 
  var egrid=Ext.getCmp(curgrid.id);
  var sm = egrid.getSelectionModel().getSelection()[0]; //
  var fID = sm.get("4").toString();
  var fName1 = sm.get("2").toString();
  //alert("OLDFILE>>>"+fName1);
  var fName = pathToFile2(fName1);
 
  //alert("FILE>>>"+fName);
 
  files = "application/octet-stream:"+fName+":"+
  document.location+"?$$$=0&id="+fID+"&uid="+MainForm.uid.text;
  //alert("File=>>>>"+files);  
  event.dataTransfer.setData("DownloadURL",files);
  return true;
}
 

and in drop event send ajax request to UNIHTMLFRAME

 

 

    var gridid = evt.dataTransfer.getData("gridid");
    if ((gridid!=null)&&(gridid!=curgrid.id))
    {
      ajaxRequest(ajaxtarget, "drop data", ["id="+par]);

   }

 

 

i am in addition drag from dectop

function drop(evt)
{
  evt.stopPropagation();
  evt.preventDefault();  //alert('drop');

  curgrid = GetGrid(evt.target);
  par = IsLeft(curgrid);

  // get Files and Count:
  var files = evt.dataTransfer.files;
  var count = files.length;

  // Only call the handler if 1 or more files was dropped:
  if (count > 0)
  {
    curtarget = par;
    handleFiles(files);
  }
  else
  {
    var gridid = evt.dataTransfer.getData("gridid");
    if ((gridid!=null)&&(gridid!=curgrid.id))
    {
      ajaxRequest(ajaxtarget, "drop data", ["id="+par]);
    }
  }
}
 

and in delphi handle drag drop

 

 

procedure TDocTbl.dropHtmlAjaxEvent(Sender: TComponent;
  EventName: string; Params: TStrings);
var
 

 

 

If EventName = 'drop data' then
    begin
    SID := Params.Values['id'];
    if SID='1' then DoneFrame := LeftDocs else DoneFrame := RightDocs; //i := StrToInt(Params.values['filename']);
    DoneFrame.Frend.actMoveExecute(Sender);
    Exit;
    end;
 

I am know selected rows in grid because im save checks in database  You can use anothe way to know with rows must be draggable

Link to comment
Share on other sites

Aslan please give exaple on Delphi+unigui

 

Were need  write plugins in delphi?

 var secondGrid = Ext.create('Ext.grid.Panel', {        viewConfig: {            plugins: {                ptype: 'gridviewdragdrop',                dragGroup: 'secondGridDDGroup',                dropGroup: 'firstGridDDGroup'            },            listeners: {                drop: function(node, data, dropRec, dropPosition) {                    var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';                    Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);                }            }        },
Link to comment
Share on other sites

Hello again,

 

i try this code in Form1.onCreate()

 

UniSession.AddJS('var DDRow = new Ext.grid.plugin.DragDrop();' +
'DDRow.init(' + UniDBGrid1.JSName + ');' +
UniDBGrid1.JSName + '.plugins.push(DDRow);' +
UniDBGrid1.JSName + '.getView().refresh();');

 

This code implements the dynamically adding plugins to grid,

and work, but.... ExtJs tell me error in getDragData function when row selected.

The error is "a.getItemSelector is not a function"

 

Some one can help me....

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...