Data Moving-Plug-in: Templates

<< Back to Data Moving Plug-in Main Features

Data Moving-Plug-in templates enhances Mvc Controls Toolkit templates. Mvc Controls Toolkit templates are essentially either Razor helpers/normal functions with a single parameter that is a strongly typed Html Helper class, or strongly typed Partial Views. In both cases they use a strongly typed Html helper to render a server side or a client side data structure. Templates of Client Controls are compiled into knockout.js client templates, since they must render javascript data. These templates are called simple templates.

The Data Moving Plug-in supports also complex templates that allow other parameters after the Html helper. This way, the mark-up produced by the template may depend on the options specified by the developer through the control fluent interface. Whenever the developer provides a custom template he may choose between simple and complex templates.

The mark-up produced by all Data Moving Plug-in controls is not hardwired but it is based on default templates that can be changed by the developer. More specifically, all controls have an overall template that defines the basic structure of the control, so that changing this template may transform the control in a completely different control.

Items controls have also row templates and column templates. Different row templates are used for toolbars, headers, footers, etc, and all of them may be substituted with custom templates in several ways. There are three types of default row templates that comes with the Data Moving Plug-in: a <tr><td>…based template to be used for tabular data, a <div style=’display: table-row’…>… based template to be used when we need a table-like appearance but data are not tabular, and a float based row template. All default row templates just put together adequately the markup returned by the column templates; custom row template, instead, have the the options of avoiding completely the use of column templates.

The Data Moving Plug-in comes with default templates for different types of columns:

  • Standard columns. Their default template may be controlled with a fluent interface. They are able to render properly any .Net data type both in edit and in display mode. We may choose to use the Mvc Display and Edit templates defined for the given types, or Display only, and TypedTextBoxes based templates that are automatically optimized for each data type. It is also possible to specify the use of the new Html5 inputs; the selection of the input type is done according to the column data type and to a possible DataType attribute that may decorate the property associated to the column.
  • Image columns. They extracts both the src and the alt of the image from the item data;
  • Link columns capable of extracting both the href an the link text from the item data.
  • Text Columns, to render constant text or constant Html.
  • Button Columns, to render single buttons or buttons organized in bars.
  • Pager Columns, to display a pager.
  • RowCount columns, to count rows
  • Error Column, to display errors associated to the whole row.
  • The fluent interface for specifying the appearance and properties of rows and columns is exactly the same for all items control.

     

    Examples of use of the fluent interface and examples of custom templates for the menu control here.

    Examples of use of the fluent interface and examples of custom templates for the form control here.

    Examples of use of the fluent interface of grid controls here.