Bresler Posted December 26, 2013 Share Posted December 26, 2013 Hi guys, I'm very interested in drag and drop between uniDBGrids. Is there any example working? Can you help me? Quote Link to comment Share on other sites More sharing options...
brunotoira Posted April 22, 2014 Share Posted April 22, 2014 +1 Quote Link to comment Share on other sites More sharing options...
Canaglia Posted November 3, 2014 Share Posted November 3, 2014 +1 Quote Link to comment Share on other sites More sharing options...
southKorea Posted November 4, 2014 Share Posted November 4, 2014 *160 Quote Link to comment Share on other sites More sharing options...
altagur Posted November 4, 2014 Share Posted November 4, 2014 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 grid1var ldropbox = document.getElementById(LeftDocs.MainGrid.id); //second grid for exaple you grid2var rdropbox = document.getElementById(RightDocs.MainGrid.id); // some functions for my case were i am get in my form with to frames //bla bla beginvar 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 gridgetSelectedRowIndex = function(grid){ var r = grid.getSelectionModel().getSelection(); var s = grid.getStore(); return s.indexOf(r[0]);} //path to files from dectop to chrome blabla beginfunction 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 startfunction 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 eventfunction dragEnter(evt){ evt.stopPropagation(); evt.preventDefault();} //handle drag exit eventfunction dragExit(evt) { evt.stopPropagation(); evt.preventDefault();} //handle drag over eventfunction dragOver(evt) { evt.stopPropagation(); evt.preventDefault();} // and finally handle drop eventfunction 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 draggablefunction 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 chromefunction 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 eventsinitEventHandlers();</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 Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted November 4, 2014 Share Posted November 4, 2014 just we need http://dev.sencha.com/deploy/ext-4.0.0/examples/dd/dnd_grid_to_grid.html Quote Link to comment Share on other sites More sharing options...
altagur Posted November 5, 2014 Share Posted November 5, 2014 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); } } }, Quote Link to comment Share on other sites More sharing options...
Canaglia Posted November 7, 2014 Share Posted November 7, 2014 me too Quote Link to comment Share on other sites More sharing options...
Canaglia Posted November 7, 2014 Share Posted November 7, 2014 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.... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.