Delete grid record with drag and drop

[freedowsRoO]

Hello guys! 

There is a way to delete a record in a DBGRID using the DRAG AND DROP?

[Sherzod]

2 hours ago, freedowsRoO said:

There is a way to delete a record in a DBGRID using the DRAG AND DROP?

Hello, 

Can you please explain in more detail? 

[freedowsRoO]

14 hours ago, Sherzod said:

Hello, 

Can you please explain in more detail? 

Sure my friend, i want that when i drag a record and drop outside the grid this record be deleted.

[Sherzod]

31 minutes ago, freedowsRoO said:

Sure my friend, i want that when i drag a record and drop outside the grid this record be deleted.

Please see this demo:

\FMSoft\Framework\uniGUI\Demos\Desktop\Grid - DragDrop - Custom Handler

 

[freedowsRoO]

18 minutes ago, Sherzod said:

Please see this demo:

\FMSoft\Framework\uniGUI\Demos\Desktop\Grid - DragDrop - Custom Handler

 

I've already saw this demo and didn't help me.

 

I want to drop the record in anywhere. When i drop the record this record be deleted. Example:

[Sherzod]

19 minutes ago, freedowsRoO said:

and i want to drop the record in anywhere

Well, you need to configure the drop targets.

[freedowsRoO]

16 minutes ago, Sherzod said:

Well, you need configuring the drop targets.

Well, i think is not possible, the drag and drop events are called just with another grid. I want to drop the record in anywhere on the screen.

[Sherzod]

3 minutes ago, freedowsRoO said:

Well, i think is not possible, the drag and drop events are called just with another grid. I want to drop the record in anywhere on the screen.

Well, in principle, it can be done I guess, but it is desirable to have explicit drop targets...

[freedowsRoO]

10 minutes ago, Sherzod said:

Well, in principle, it can be done I guess, but it is desirable to have explicit drop targets...

Are you have some example?

 

Im my tests i couldn't trigger the grid drop events when i drop the row in a panel for example. I tried with 'OnDropRowEvents' and 'OnEndDrag'.

[Sherzod]

I will try to analyze. 

[freedowsRoO]

Just now, Sherzod said:

I will try to analyze. 

thanks i advance....

[Sherzod]

3 hours ago, freedowsRoO said:

I want to drop the record in anywhere on the screen.

Hello,

Try these approaches.

Worked on this example: 

\FMSoft\Framework\uniGUI\Demos\Desktop\Grid - DragDrop - Custom Handler

DropToPanel:

1.UniDBGrid.DragDrop.DragGroup = D1

...

2. UniPanel.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts)
{
    var me = sender;
    me.dropTarget = Ext.create('Ext.dd.DropTarget', me.getEl(), {
        ddGroup: 'D1',
        notifyDrop: function(source, evt, data) {
            ajaxRequest(me, 'dropped', []);
        },
        notifyEnter: function() {
            
        }
    });
}

3. 

procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'dropped' then
  begin
    UniDBGrid1.SelectedRows.Delete;
  end;
end;

 

DropToAnywhere:

1.UniDBGrid.DragDrop.DragGroup = D1

...

2. MainForm.ClientEvents.ExtEvents ->

function window.afterrender(sender, eOpts)
{
    var me=sender;
    me.dropTargetBody = Ext.create('Ext.dd.DropTarget', Ext.getBody(), {
        ddGroup: 'D1',
        notifyDrop: function(source, evt, data) {
            ajaxRequest(me, 'dropped', []);
        },
        notifyEnter: function() {
            
        }
    });
}

3. 

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'dropped' then
  begin
    UniDBGrid1.SelectedRows.Delete;
  end;
end;

[freedowsRoO]

It work's, thank you so much!

[freedowsRoO]

On 2/28/2020 at 1:09 PM, Sherzod said:

Hello,

Try these approaches.

Worked on this example: 

\FMSoft\Framework\uniGUI\Demos\Desktop\Grid - DragDrop - Custom Handler

DropToPanel:

1.UniDBGrid.DragDrop.DragGroup = D1

...

2. UniPanel.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts)
{
    var me = sender;
    me.dropTarget = Ext.create('Ext.dd.DropTarget', me.getEl(), {
        ddGroup: 'D1',
        notifyDrop: function(source, evt, data) {
            ajaxRequest(me, 'dropped', []);
        },
        notifyEnter: function() {
            
        }
    });
}

3. 

procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'dropped' then
  begin
    UniDBGrid1.SelectedRows.Delete;
  end;
end;

 

DropToAnywhere:

1.UniDBGrid.DragDrop.DragGroup = D1

...

2. MainForm.ClientEvents.ExtEvents ->

function window.afterrender(sender, eOpts)
{
    var me=sender;
    me.dropTargetBody = Ext.create('Ext.dd.DropTarget', Ext.getBody(), {
        ddGroup: 'D1',
        notifyDrop: function(source, evt, data) {
            ajaxRequest(me, 'dropped', []);
        },
        notifyEnter: function() {
            
        }
    });
}

3. 

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'dropped' then
  begin
    UniDBGrid1.SelectedRows.Delete;
  end;
end;

Hello again my friend!

 

Is It possible to get the drop cordinates (x,y) inside this ajaxrequest ??????

function window.afterrender(sender, eOpts)
{
    var me=sender;
    me.dropTargetBody = Ext.create('Ext.dd.DropTarget', Ext.getBody(), {
        ddGroup: 'D1',
        notifyDrop: function(source, evt, data) {
            ajaxRequest(me, 'dropped', []);
        },
        notifyEnter: function() {
            
        }
    });
}

 

 

 

[Sherzod]

4 hours ago, freedowsRoO said:

Is It possible to get the drop cordinates (x,y) inside this ajaxrequest ??????

Hello! 

For what purpose? 

[freedowsRoO]

9 hours ago, Sherzod said:

Hello! 

For what purpose? 

I have a components saved in my database and i use this code to drag the record from the grid and drop him to the panel and create the component at runtime, but the component is aways created with top=0 and left = 0. 

 

I have already tried to get the cordinates but without success.

[Sherzod]

3 hours ago, freedowsRoO said:

but the component is aways created with top=0 and left = 0. 

Hello, 

Can you make a simple testcase to understand the issue? 

[freedowsRoO]

On 10/6/2020 at 11:16 AM, Sherzod said:

Hello, 

Can you make a simple testcase to understand the issue? 

i did it! Thanks for the help but  i have another question, is it possible to get the name of the grid that i drag the record in this code?

 

Is that the same solution that you answered me above, i just need to get the name of the grid tha i drag the record now.

function window.afterrender(sender, eOpts)
{
    var me=sender;
    me.dropTargetBody = Ext.create('Ext.dd.DropTarget', Ext.getBody(), {
        ddGroup: 'D1',
        notifyDrop: function(source, evt, data) {
            ajaxRequest(me, 'dropped', []);
        },
        notifyEnter: function() {
            
        }
    });
}

 

[Sherzod]

9 hours ago, freedowsRoO said:

is it possible to get the name of the grid that i drag the record in this code?

Hello,

I will check.

[Sherzod]

9 hours ago, freedowsRoO said:

is it possible to get the name of the grid that i drag the record in this code?

You can try something like this:

function window.afterrender(sender, eOpts)
{
    var me=sender;
    me.dropTargetBody = Ext.create('Ext.dd.DropTarget', Ext.getBody(), {
        ddGroup: 'D1',
        notifyDrop: function(source, evt, data) {
            ajaxRequest(me, 'dropped', ['gridname='+source.view.grid.uname]);
        },
        notifyEnter: function() {
            
        }
    });
}

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'dropped' then
  begin
    //UniDBGrid1.SelectedRows.Delete;
    //Additional checks: is as
    ShowMessage((FindComponent(Params.Values['gridname']) as TUniDBGrid).Name)
  end;
end;

 

[freedowsRoO]

5 hours ago, Sherzod said:

You can try something like this:

function window.afterrender(sender, eOpts)
{
    var me=sender;
    me.dropTargetBody = Ext.create('Ext.dd.DropTarget', Ext.getBody(), {
        ddGroup: 'D1',
        notifyDrop: function(source, evt, data) {
            ajaxRequest(me, 'dropped', ['gridname='+source.view.grid.uname]);
        },
        notifyEnter: function() {
            
        }
    });
}

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'dropped' then
  begin
    //UniDBGrid1.SelectedRows.Delete;
    //Additional checks: is as
    ShowMessage((FindComponent(Params.Values['gridname']) as TUniDBGrid).Name)
  end;
end;

 

I will try thanks a lot

[freedowsRoO]

14 hours ago, Sherzod said:

You can try something like this:

function window.afterrender(sender, eOpts)
{
    var me=sender;
    me.dropTargetBody = Ext.create('Ext.dd.DropTarget', Ext.getBody(), {
        ddGroup: 'D1',
        notifyDrop: function(source, evt, data) {
            ajaxRequest(me, 'dropped', ['gridname='+source.view.grid.uname]);
        },
        notifyEnter: function() {
            
        }
    });
}

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'dropped' then
  begin
    //UniDBGrid1.SelectedRows.Delete;
    //Additional checks: is as
    ShowMessage((FindComponent(Params.Values['gridname']) as TUniDBGrid).Name)
  end;
end;

 

It work's thanks!!!!