This is a migrated thread and some comments may be shown as answers.

Drop into unused portion of grid

17 Answers 244 Views

Grid

This is a migrated thread and some comments may be shown as answers.

JeffN asked on 09 Jun 2008, 01:09 PM

I have 2 grids that I'm able to drop rows between. My issue is that when dragging from one to the other, the record has to be dropped on top of an existing record and not in the open area underneath of it (between the existing records and the footer). If I drop into that "open area", the RowDrop event never fires and the move never takes place.

When there are no records in the grid to be dropped into, I have a "NoRecordsTemplate" and a drop occurs without any issues.

Is there a way to make this open area between the last record and the footer a "droppable" area? Do I have to display an image there of some sort (to mock the Recycle Bin functionality in the sample)? If so, how would I do that? Is there javascript somewhere that is cancelling this drop so that the AJAX RowDrop event is never firing?

Note, the drag/drop sample has the same issue.

Thanks!

17 Answers, 1 is accepted

answered on 11 Jun 2008, 04:53 PM

Hi Jeff,

The RowDrop event is fired every time a row is dropped in RadGrid, unless explicitly canceled as in the online example. A suggestion for you would be check for the destination element of the dropping row in the javascript RowDropping function, and fire the event if the destination element is the second RadGrid:

    
            function onRowDropping(sender, args) 
        
            { 
        
                var node = args.get_destinationHtmlElement(); 
        
                if(!isChildOf('<%= RadGrid2.ClientID %>', node)) 
        
                { 
        
                    args.set_cancel(true); 
        
                } 
        
            }

Then on the server, you can check if e.HtmlElement is the second RadGrid, and perform your custom row transfer:

    
            protected void RadGrid1_RowDrop(object sender, GridDragDropEventArgs e) 
        
            { 
        
                if (!string.IsNullOrEmpty(e.HtmlElement) && e.HtmlElement == "RadGrid2") 
        
                { 
        
                    // Custom code here 
        
                } 
        
            }

If your second RadGrid does not stretch down to the height of the first one (as in the online example), you can simulate this by nesting the grid inside another element with the needed width and height, and then performing the same operations as shown above.

Regards,
Veli
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 12 Jun 2008, 12:48 PM

Thanks. But, I actually ended up fixing it using a different approach. Since a postback wasn't occurring when I dropped into this "open area", I had to add code within the client side "onRowDropping" event. I added the following code:

if (node.id == 'grdWhatever_GridData')

{

__doPostBack(

"<%= btnMoveTo.UniqueID %>", "Click");

}

These grids could have their items moved via drag/drop OR arrow buttons. So, when dropped into the "open area" (aka "Grd_GridData"), I manually do a postback simulating that the "Move To" button was clicked. This event has code that moves the selected item from one grid to the other.

answered on 16 Jul 2008, 06:27 PM

Thanks for the report.

I thought about that and I have a couple of questions with this method.

On the source grid the you can select a row, but if you drag and drop a row without selecting it first the selectedindex is not set.
How do you determine which row they are dragging if they did not do a select of that row prior?

If they simply grab the row they want to drag and drop without selecting it first the selectedindex.count of the grid is always 0 so I can determine which row was selected.

Using the OnRowDropped I could always determine by useing DraggedItems.

How do you handle this.

Thanks

answered on 18 Jul 2008, 12:24 PM

Alex-

You could do something like I'm doing probably. Here's the code:

Client Side (this seems to need to be in the actual aspx page instead of a separate js file for some reason):
function onRowDropping(sender, args)
{
   if (sender.get_id() == "grdXXX")
{
  var node = args.get_destinationHtmlElement();
  //If the id is "grdAAA_GridData" then dropped into blank selected area
  if (node.id == 'grdAAA_GridData')
  {
   document.getElementById('<%=hdnSelectedResourceIndex.ClientID %>').value = '';
   __doPostBack("<%= btnMoveTo.UniqueID %>", "Click");
  }
}
}

Button Click Event:
protected void btnMoveTo_Click(object sender, EventArgs e)
{
if (grdXXX.SelectedItems.Count > 0)
{
MoveResourceToSelected(int.Parse(grdXXX.SelectedValue.ToString()));
}
}

MoveResourceToSelected method:
This has code that moves the selected resource from the "available" to the "selected" list.

Hopefully this helps!

answered on 18 Jul 2008, 07:05 PM

Jeff I am having 2 issues with your solution.

The first as I mentionned if the user grabs a row and drags it without physically selecting it the selectedindexes.count the grid is always 0 or better yet if he does select a row and drags another row instead the selectedindex(0) is that of the selected row and not the row that was drragged.

The second is not an issue but more of a question, this works when you drop it on the empty space of a grid. How do I prevent a double postback when I drop it on a destination row.
Double postback is caused by your code and the second postback caused by the OnRowDrop event of the grid because you did drop it on a valid area?

Thanks

answered on 18 Jul 2008, 07:09 PM

I'm not sure about the first issue (sorry, don't have time to look into it now)

About the second issue. Here's the complete js code (I only included a portion of it before):

//Set hidden field (hdnDragInProgress) back to false
var hdnDragStatus = document.getElementById('<%=hdnDragInProgress.ClientID %>');
hdnDragStatus.value = "false";
}

answered on 21 Jul 2008, 03:54 PM

I will create a demo project and submit it with a formal ticket.

I can most definitly drag/drop without first selecting the row(s), but then it really depends on your definition of selecting.

I can grap a row and drag/drop it without prior explicitly selecting it in this case the selectedindexes.count is 0, but the draggeditems object is correct (so I always use the draggeditems and ignore the selectedindexes).

Another scenario is if I select a row and then dragged another row, the selectedindexes(0) is not the same as the draggeditems(0). Again I always use the draggeditems object because it is alway right.