enable drag drop to groupheader row

10 posts, 0 answers
  1. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 14 Oct 2011 Link to this post

    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?
  2. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 14 Oct 2011 Link to this post

    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.

  3. Vasil
    Admin
    Vasil avatar
    1637 posts

    Posted 18 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  4. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 18 Oct 2011 Link to this post

    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.
  5. Vasil
    Admin
    Vasil avatar
    1637 posts

    Posted 20 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 20 Oct 2011 Link to this post

    thanks Vasil, that's done the trick. saves me manually writing an ajax async call in javascript.
  7. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 25 Oct 2011 Link to this post

    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

  8. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 25 Oct 2011 Link to this post

    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?
  9. Vasil
    Admin
    Vasil avatar
    1637 posts

    Posted 26 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  10. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 26 Oct 2011 Link to this post

    thats done it, thanks!
Back to Top