Choice and Use of Items Controls 

Items controls handle the UI for displaying and editing IEnumerables. There are two kinds of items controls:

  • Choice items controls. In this case the IEnumerable is defined by selecting elements from a pre-existing set that we will call Choice Set.
  • Unconstrained items controls. In this case, the items of the IEnumerable are generic instances of a class that are not constrained to belong to any other set.

Choice Items Controls

The only operations that make sense to do with Choice Items Controls are:

  • deleting an element from the IEnumerable
  • selecting an element from the Choice Set and adding it to the IEnumerable 

Accordingly, the IEnumerable can contain just the keys that univocally identify the elements of the Choice Set. Since the values of the keys, in general, are not adequate for human reading, typycally, one can associate also an "human friendly" label to each item of the Choice Set.

All Choice Items Controls offer, substantially, the same functionalities, thus choosing among them is just a matter of the kind of user experience one would like to implement. The Choice Items Controls of the Mvc Controls Toolkit are:

All of them accept a ChoiceList type argument that defines the Choice Set. The ChoiceList can be created with the help of the ChoiceListHelper.Create, or ChoiceListHelper.CreateGrouped(just for DropDowns) static methods.

Once the View is posted the ViewModel is updated with the IEnumerable that has been modified by the user. However, in order to reflect all changes performed on the IEnumerable to a Database one needs to discover what elements to insert and what elements to delete.

To understand how this can be accomplished, let suppose we,performed a query Q to obtain the initial content of the IEnumerable, and that, after the user changes, the set of items contained in the IEnumerable is Safter. It is enough to repeat the same query Q to get the set Sbefore. Now the set of elements to insert is the Set difference Safter-Sbefore. While the set of elements to delete is Sbefore-Safter

 The two Set difference operations can be carried out efficiently by putting the two sets into HashSet<T> data structures with new HashSet<T>(IEnumersble<T> x), and then by using HashSet<T>.ExceptWith(IEnumerable<T> x).

Unconstrained Items Controls

Unconstrained Items Controls not only allow deletions and additions as the Choice Items Controls, but also the display and edit of all properties of each item. The way items are displayed is controlled by means of templates.

The Mvc Controls Toolkit has mainly two Items Controls to work with IEnumerables:

Each of them has some peculiarities that are not shared with the other one, but there are tasks that can be accomplished by both of them. Thus choosing among them is not trivial.

The SortableList allows its items to be sorted by dragging them with the mouse, while the DataGrid has not this option, thus if one need this feature the SortableList is a forced choice.

On the other side the Datagrid allows Changes Tracking, while the SortanleList has not this option. This means the user can edit several items, add some new tems, remove some items, and then he can also undo each of the previously performed actions till the all changes are committed. Committment of changes may take place also after several posts to the server, since the Datgrid is able to "remember" its state after several posts. As a consequence if there are validation errors and the Datagrid is returned to the user with the errors, the user, not only can correct all errors, but he can also undo some of the changes previously done. Changes Tracking makes easier also to reflect all changes to a database, since the operations to be done on the database can be easily discovered by comparing the previous value of an object with its value after all changes. For instance, if the previous value is null and the value after all changes is different from null we have to perform an insert. For more detail on how to reflect to a database all changes of a Datagrid, please see: Using The DataGrid.

Obviously, Changes Tracking is paid with performance, and bandwdth, so if one needs to edit hundreds or rows, or if one is trying to reduce banwidth consumption it is better to renounce to Changes Tracking and to use the SortableList.

In fact, the SortableList can be configured also without the "sorting by mouse dragging" option and it can behave as a standard templated grid. While in the Datagrid each row may be in display or edit mode (actually there is also a template for deleted nodes), the SortableList allows just one row template. However, also the SortableList can behhave in both edit and dsiplay mode to a certain extent, if one uses a TypedEditDisplay; in this case one can change the Edit/Display mode of each field by either clicking or double clicking on it. This behaviour is limited just to fields that can be edited in a textbox.

For sure if one needs a Display only grid the SortableList is the best option. It is a good choice also if one just needs all rows in edit mode, and one doesn't need Changes Tracking. In all other cases the choice among them depends on a trade-off between flexibility versus efficiency and bandwidth consumption.

Both Datagrid and SortableList can be enahanced with column sorting capabilities and paging by adding to the view an EnableSorting helper with its associated Sort Buttons, and a Pager. Filtering capabilities can also be added in variuos way. For details see here and here, and the tutorials Data Filtering in the New Mvc 3 Version of the Mvc Controls Toolkit, Designing a Themed Control in the Mvc Controls Toolkit .

Once we have decided wich control to use, if the Datagrid, or the SortableList, the services we need (sorting, filterin, etc,), and the "control look" we can turn our design choices into a reusable control by using themes. For an introduction to themes, please read first the documentation about themes and then the tutorial:  Designing a Themed Control in the Mvc Controls Toolkit.

In order to reflect to a database all changes done to an IEnumerable through a SortableList we can use the same technique of the Choice Items Controls to compute all inserts and to deletes, and then we may compare the set U of all remaining items with their unmodified counterpart to verify if they need to be updated. In case, one uses an ORM, it is enough to copy each item of U on its unmodified counterpart, this is enough for  the Changes Tracking system of the ORM to discover if each item needs to be updated or not.

The Mvc Controls Toolkit contains also a TreeView to allow a tree of objects belonging to different classes be displayed and edited. When in display only mode the TreeView has a low impact on performance, while when it is in edit or edit/display mode it may have a not negligible inpact on performance. To persist data of a TreeView on a database one can use an algorith similar to the one of the SortableList. However, in this case after, we have computed all level 0 children that need to be inserted (set I), deleted (set D), and updated (set U) we have to process, in turn, all sets I, D, and U. Specifically:

  • All descendants of the elements in I need to be inserted, too.
  • All descendants of the elements in D need to be deleted, too.
  • Finally, we have to compare the children of all items in U with all children of their unchanged counterparts to compute new sets I, U, and D with the same algorithm used in the root of the tree.

Often, it is possible to delete simply all unchanged nodes, and then to insert all nodes contained in the tree. If possible, that is if the nodes to delete are not connected to other tables through any database relation, this is the simples and more efficient solution.

Last edited Jun 22, 2014 at 10:39 AM by frankabbruzzese, version 6


No comments yet.