enable drag drop to groupheader row

[James]

Hi, i have a radgrid that has quite a complex group header. bascically the group header groups all files or a person together. i want the user to be able to drag a file from one person to another to re-assign that file. I can make it work for dragging a row from person one's list of files (rad grid rows) to another persons list of files (rad grid rows), but as a person can have a lot of files, this might not actually allow you to see who you are dragging the file to (as the group header might be off screen and not visible)

Is there a way of allowing dragging to a group header row? i have looked into the HTML element targets (the trash can example), and could use that with a div over the persons photo, then a suffix to see if it was a picture target that the row was dropped on (ie call the divs <div id="unique_name_droptarget"> and look for the _droptarget part of the id in the args.get_destinationHtmlElement();

but that might be a bit messy.

any other solutions?

[James]

I've started on my solution above, but have  hit a snag.

I've wrapped a div around the content of the group header row (using the item.datacell.text on the itemdatabound event of the grid:

item.DataCell.Text =

"<div id=""" & e.Item.DataItem("nominal_id") & "_groupdroptarget" & e.Item.DataItem("nominal_id") & e.Item.ItemIndex & """>" & imagetext & "Nominal ID: " + item.DataItem("Nominal_id").ToString() + " - " & Trim(UCase(groupDataRow("last_name").ToString()) & ", " & groupDataRow("first_name").ToString() + " " & groupDataRow("middle_name").ToString()) & ".&nbsp;&nbsp;&nbsp;Nicknames: " & groupDataRow("nicknames").ToString() & "&nbsp;&nbsp;&nbsp;DOB: " & CDate(groupDataRow("dob").ToString()).ToShortDateString & "&nbsp;&nbsp;&nbsp;Place Of Birth: " & groupDataRow("place_of_birth").ToString() & "</div>"
. I then look for a specific string in the onRowDropping below ("groupdroptarget") as below

 

function onRowDropping(sender, args)

 

{

 

var node = args.get_destinationHtmlElement();

 

alert(node.id);

 

 

if(node.id.indexOf('groupdroptarget') !=-1)

 

{

alert(

'happy joy');

 

args.set_cancel(

false);

 

}

 

else

 

{

alert(

'Please drag a file to a nominal header row');

 

args.set_cancel(

true);

 

}

}

but the postback does not fireeven if my function shows that we've draged to a groupheadeer row (and "happy joy" is alterted out). it seems to just cancel the event if it realises it's been dragged to a groupheader row. is there a way around this without having to write an async call myself in javascript function above.

[Vasil]

Hi James,

This approach as you describe it should work fine and I am not sure why post-back is not happening if you didn't canceled the event.
Do you have attached handler to OnRowDrop server side event as in the drag/drop demo?

Best wishes,
Vasil
the Telerik team

[James]

I have got the RowDrop server side function in place - and it fires if you drop a row onto or between other rows - just not if you drop it on a group header rows.

[Vasil]

Hi James,

It turns out that the grid indeed does not make post-back when dropping data row over group in the header group item.
You could however do it manually. Just cancel the event and use fireCommand of the MasterTableView of the grid to make the grid post-back and execute your RowDrop handler.
Here is an example code.
Aspx:

<script type="text/javascript">
  function onRowDropping(sender, args)
  {
    args.set_cancel(true);
    var commandArgs = String.format("{0},{1},{2},{3}", args.get_destinationHtmlElement().id, "", "", "");
    sender.get_masterTableView().fireCommand("RowDroppedHtml", commandArgs);
  }

</script>
<div>
  <telerik:RadGrid runat="server" ID="RadGrid1" GroupingEnabled="true" ShowGroupPanel="true"
    OnNeedDataSource="RadGrid1_NeedDataSource" OnRowDrop="RadGrid1_RowDrop">
    <ClientSettings AllowDragToGroup="true" AllowRowsDragDrop="true" ClientEvents-OnRowDropping="onRowDropping">
      <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
    </ClientSettings>
  </telerik:RadGrid>

C#:

protected void RadGrid1_RowDrop(object sender, Telerik.Web.UI.GridDragDropEventArgs e)
{

}
protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    RadGrid1.DataSource = new string[] { "item1", "item2", "item3" };
}

Best wishes,
Vasil
the Telerik team

[James]

thanks Vasil, that's done the trick. saves me manually writing an ajax async call in javascript.

[James]

Hi Vasil, i have a problem with the above - thee e.draggeditems collection is empty in the postback when using

args.set_cancel(

true);

 

 

var commandArgs = String.format("{0},{1},{2},{3}", args.get_destinationHtmlElement().id, "", "", "");

 

sender.get_masterTableView().fireCommand(

"RowDroppedHtml", commandArgs);

 

i'm assuming that i have to pass them as a parameter in the commandArgs. i will try and find a reference in the help for get_masterTableView().fireCommand

[James]

i'm really struggling to find the info here... i have found that
args.get_draggedItems() gives me a javascript array and i have checked it's got items in it with the below

alert(args.get_draggedItems().length);

i have tried passing this array to the postback with all of the other 3 parameters of the argument, but obviously that would not work as the var commandArgs is a string....

so how do i pass the draggitems to the postback?

[Vasil]

Hi James,

The grid stores it's dragged items internally. This code should work.

JS:

function onRowDropping(sender, args)
{
  args.set_cancel(true);

  sender._draggedItemsIndexes = [];
  Array.add(sender._draggedItemsIndexes, args.get_draggedItems()[0]._itemIndexHierarchical);
  sender.updateClientState();

  var commandArgs = String.format("{0},{1},{2},{3}", args.get_destinationHtmlElement().id, "", "", "");
  sender.get_masterTableView().fireCommand("RowDroppedHtml", commandArgs);
}

C#:

protected void RadGrid1_RowDrop(object sender, Telerik.Web.UI.GridDragDropEventArgs e)
{
  GridDataItem item = e.DraggedItems[0] as GridDataItem;
}

Best wishes,
Vasil
the Telerik team

[James]

thats done it, thanks!