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 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
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
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 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
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