DataRepeater - Drag'n'Drop-Feature

Answered
0
0

Hi WiseJ-Team,

is it possible to impelement/use drag’n’drop to change the order of the visible, databounded Data-Items?

I want to implement a scenario that the user can change the order of the items (Training participants) via drag’n’drop and not per button-click.

 

Kind Regards,

Jan

Share
  • You must to post comments
Filter
Sort by: Recently Active
Best Answer
0
0

I thought it was going to be more difficult but it turned out to be quite easy with Wisej!

In general, drag & drop in Wisej works the same as in a desktop windows app:

  • Set AllowDrag = true on the control that you want to initiate drag & drop and attach the DragStart event.
  • Set AllowDrop = true on the control that you want to drop to and attach DragEnter and DragDrop events (can also attach DragMove and the other events for more granular control)
  • In DragStart start the drag operation calling DoDragDrop() on the control starting the operation and save whatever object you want to drag and set the effects you want to support (move, copy, link, …) – can be more than one in conjunction with Alt, Control.
  • When moving the dragged object the targets will receive the DragEnter (and DragMove) event and there you can decide if the target can “accept” the object and how by setting e.Effect to the effect you want to show to the user (check the allowed effects in e.AllowedEffects).
  • In DragDrop you can handle the dropping. Wisej has an additional property e.DropTarget with the reference to the item under the drop (can be a control or can be a list item or a treenode) so you don’t have to use the coordinates to find out where it was dropped.

Plus you can also change the image of the dragging items. You could also take a screenshot of the item being dragged using the Html2Canvas extension (https://wisej.com/extensions/).

See attached.

https://drive.google.com/file/d/1lz6yFWI8MUahEXhErtRADCIvPheiCwHa/view

Attachment
Wisej.DataRepeaterDragDrop.zip
  • Jan Brandenburger
    I am new in using WiseJ. But one thing I picked up on quickly: The community and the dev team, be it Luca or Frank, are excellent. With what humor, what joy, speed and professionalism the posts are answered is just wonderful. Thanks for that. But also the disciplined and polite manner of all members of the forum is very pleasant. It is a pleasure to read the posts and not to find insults or similar things, as it is quickly the case in other forums. I would also like to thank you for the samples.
  • Levie (ITG)
    Thanks for the great compliments Jan! Everyone here appreciates your feedback :-). I also wanted to let you know we put that DGV Drag and Drop sample on GitHub: https://github.com/iceteagroup/wisej-examples/tree/2.0/Wisej.DataRepeaterDragDrop and fixed an issue with the Drag/Drop scrolling that you might run into with the old sample. Best regards, Levie
  • You must to post comments
0
0

Padding pads inside the DataRepeaterItem. The DataRepeater is a “virtual” widget composed of vertical or horizontal “cells”. The cells contain  the DataRepeaterItem, which in turn contains your controls. The cells must be of the specified size in order to scroll the virtual content – the DataRepeater only creates the visible widgets, that’s why it’s able to manager unlimited records.

What you can do is to:

  • Remove the DataRepeaterItem border from the theme: either in a theme mixin or by setting the CssStyle property of the DataRepeaterItem to “border:none”.
  • Hide the header button (if you need one you can always add it to the content) using DataRepeater.ItemHeaderVisible = false.
  • Drop in your panel container resized to what size you need and you can manage the items as “cards”, see screenshot.

The screen was created using the demo attached previously plus:

private void dataRepeater1_ItemUpdate(object sender, DataRepeaterItemEventArgs e)
{
  e.DataRepeaterItem.Controls["panel1"].BackColor =
  e.DataRepeaterItem.ItemIndex % 2 == 0 ? Color.Red : Color.Green;
}

HTH

Attachment
image.png
  • You must to post comments
0
0

See attached variation. This one uses our Html2Canvas extension (https://wisej.com/extensions/) to take an async screenshot of the item and use that image for the dragging cursor. It’s a bit delayed because of the screenshot. I think the icon looks better, but this is fun code.

Attachment
Wisej.DataRepeaterDragDrop (2).zip
  • Jan Brandenburger
    Hi Luca, is there any chance to get an “item space”-Property (pixel) to get a space between the items in the DataRepeater Control? I tried to use margin/padding but this doesn´t work. Kind Regards, Jan
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.