Data Moving Plug-in: Interaction Primitives

<< Back to Data Moving Plug-in Main Features

Interaction primitives may be triggered either by drag and drop operations or programmatically.  There are two types of interaction primitives :

  1. Data-Binding based interactions
  2. Reference based interactions

In Data-Binding based interactions an Html node, the final target,  receives information from another Html node, the source. As a result  of the data binding some input fields, and content-nodes(span, divs, etc.) of the final target are filled with strings taken from input fields and content-nodes of the source. The way input fields, and content-nodes of source and target are matched is based on name conventions and declarations contained in Html5 attributes. During the Data-Binding process some strings copied from the source to the target may be transformed according to specifications contained in Html5 attributes.

A Data-Binding based  interaction starts with a source and an initial target, that are usually selected with a Drag and Drop operation; more specifically the source is the dragged element, and the initial target is the element where the dragged element is dropped to. Data-Binding based interactions may be triggered also programmatically.

The specific behavior of a Data-Binding based interaction is declared through the value of the DropBehaviour enumeration, namely:

  • DataBind. A Data-Bind operation is performed between the Source and the Initial Target: The content of input fields or complex controls of the Target is filled with the content of the input fields/controls of the source that match them. Input fields and complex controls content are processed in .Net Type aware fashion. The way input fields/controls match is decided according to naming conventions, declarations contained in Html5 data- attributes. In case the Initial Target is an add button of a Data Moving control , a new Item is created and becomes the final Target of the Data-Binding operation.
  • DataSync. A Data-Bind occurs as before, but in this case a bidirectional communication channel is built between the matching elements so that any change performed on one element is immediately reflected on the elements matching it.
  • InserBefore, InsertAfter, Append, Replace. A new item is created and inserted respectively before or  after the  Initial Target, or as last element of the Initial Target siblings, or as a replacement for the Initial Target . After , a Data-Bind is performed between the Source and the newly created element (Final Target).
    The way the new item is created depends on some item creation capability that is attached in someway  to the father of the Initial Target and on a selection callback specified in the DataDropOptions. For instance, if the Initial Target is an item of a grid the item is created by using the “create new item” capability of the grid, and if the grid has several items templates the template is chosen with the help of the selection callback. The new item can be created by exploiting also the item-creation capabilities of knockout template binding.


Reference based interactions can be applied just in case we have a Client Side ViewModel bound to the UI according to the MVVM pattern. In this case Source Html Element and the Initial Target Html Element are used just to select two data structure: the Source Model, and the Target Model. Html elements and Models are associated through a custom knockout binding, the Reference binding.

The way Source Model, and the Target Model interacts is declared with the same DropBehaviour enumeration used for Data-Binding based interactions, namely:

  • DataBind. The Source Model,substitute the Target Model in the ViewModel property it is contained in.
  • DataSync. Similar to the DataBind case, but in this case a bidirectional communication channel is built between the matching elements so that modification performed in one element are immediately reflected in the other.
  • InserBefore, InsertAfter, Append, Replace. The Source Model is inserted respectively before (InserBefore) or after the Target Model (InsertAfter), or as last element of the Target Model siblings, or as a replacement for the Target Model (Replace). In all above cases Target Model must be an element of a javascript array, while Source Model may be both a simple object or an array.

    For Both Data-Binding based and Reference based interactions Drag-Drop interactions are defined by declaring DragSources:

    1. public static MvcHtmlString DragSource(this HtmlHelper htmlHelper, string selector, IEnumerable<string> offer=null, DataDragOptions options=null)


    1. public static MvcHtmlString DragSourceItems(this HtmlHelper htmlHelper, string rootSelector, string itemsSelector, IEnumerable<string> offer=null, DataDragOptions options = null)


    and DropSources:

    1. public static MvcHtmlString DropTarget(this HtmlHelper htmlHelper, string selector, IEnumerable<string> accept, DataDropOptions options = null)


    1. public static MvcHtmlString DropTargetItems(this HtmlHelper htmlHelper, string rootSelector, string itemsSelector, IEnumerable<string> accept, DataDropOptions options = null)


    The helpers ending in “Items” are conceived to operate on list of items, where new items can be created. Namely they declare as Drag or Drop targets all Html nodes satisfying the the jQuery selector itemsSelector that are descendants of Html nodes satisfying the jQuery selector rootSelector. Also newly created descendants satisfying itemSelector are immediately Drag or Drop enabled. Their typical application is defining all(…or some, depending on itemsSelector) items of a grid or of a TreeView/TreeGrid as Drag or Drop targets.

    offer and accept specify respectively what are the “infos” offered and what are the infos “accepted”. Only if there is a match between these two lists a drag and drop operation is possible. DataDragOptions and DataDropOptions specify several options of the operation, that include both pure graphic effects and processing callbacks(the result of a callback may also force the failure of the operation).

    Demo of both Reference based and Data-Binding based interactions here.

    Demo of Reference based interactions here. Tutorial on Reference based interactions here.