Grid

javascript/css files

mvcct.controls.js
mvcct.controls.ajax.js
mvcct.controls.serverGrid.js

The grid tag helper builds a "grid" to render an IEnumerable. Grids support creation/editing/deletes both in-line and in detail mode (that is by opening a modal that shows data item in detail mode). They supports multiple rows and Header and Footer toolbars. Default templates renders a Bootstrap table but user may provide a custom layout. As for all row based controls row-type 0 settings are provided in the grid tag itself since the grid tag inherits from the row-type tag helper.

Please refer to this live example to see how to customize grid layout.

Please refer to all other grid live examples to see how to use the grid and prepare the base controller it needs

The basic controller that assists grid operations is specified in each grid row-type in the mvc-controller attribute. The types associated to all row-types must all be sutypes of the grid IEnumerable item. Accordingly all row-types may be associated to the same base controller (base controllers are associated to ViewModel/Detail ViewModel pairs), so in order to be identified within the same controller they must have different row-id.

Buttons to operate the grid are usually created automatically according to the specification contained in the grid row-types (in particular the operations attribute). The only exceptions being add buttons. Please refer to the buttons documentation for more infos on how to create add buttons and buttons in general.

Also detail modals are created automatically by all associated base controllers, but with default row-type settings. In order to customize row-type settings please use base controller DetailColumnAdjustView property and the associated documentation. In case your modal has several row-types each to be associated with a grid row-type, please define modal row-types in the view specified by DetailColumnAdjustView in the same order as the grid row-type, so that corresponding row-types have the same index.

One may also provide a completely custom detail modal by overriding the DetailView base controller property. Custom detail form receives the show/edit mode info in ViewData["ReadOnly"]. Please notice that this unique detail view must be able to handle all grid row-types; this can be done by processing the model received, in case of edit/show operations, and by taking into account the grid row-type index selected for the add operation, that is passed in ViewData["RowIndex"], in case of add operations. The custom detail form, when in edit or add mode, must contain a save button in its form. This is enough to trigger an ajax post for all form data, and to close the modal on succesfull operation. Please refer to the buttons documentation for more infos on how to create save buttons and buttons in general.

Grid may operates in two foundamental modes: immediate mode and batch mode. In immediate mode the user pust an item in edit mode (or in edit-detail mode), edits it and save each item changes separately to the server by clicking the item save button. In batch mode, all items are always in edit mode. User edits all visible items simultaneously, and then sends all changes to the server by submitting the whole form containing the grid. When an item of a batch mode grid is shown in detail edit mode changes are saved as for the immediate mode.

While immediate operations are taken care of automatically by action methods inherited from a base controller, changes made on a batch grid must be saved manually as shown in this live example. Basically, the original IEnumerable is stored in the view with the help of the store-model tag helper, so the controller receives both the original IEnumerable and the one modified by the user and may update the database thanks to the UpdateList<T> method of the CRUD Repository
Immediate grid operations are shown in all other grid live examples.

grid tag helper attributes

grid tag helper inherits all row-type attributes that are used to define the main row-type (0 index row-type). Below all additional attributes.

asp-for: ModelExpression

The IEnumerable to render with the grid.

type: Batch/Immediate

The grid type.

id: string

The id that is placed in the grid root Html node is computed automatically, based on the path from the ViewModel to the property being rendered with the grid. If this attribute is specified, it overrides the automatically computed id.

class: string

Space separated Css classes placed ith the grid root node.

ServerRowSelection : Func<object, int>

A function that, evaluated on each data item, returns the index of the row-type to use for rendering that data item. As a default row-type is chosen based on the run time data item type as explained in the row-type documentation.

client-row-selection : string

Used for client controls implementations of the grid(ie with tag helper providers whose grids create their Html on the client side). The full name of a JavaScript function that do the same job as ServerRowSelection on the client side.

caption : string

Data caption. The way it is displayed depends on the grid layout. The default layout template, that is table based, when it is provided, adds a caption Html node inside the table.

localization-type: Type

A type that when provided is used to create a localizer to localize all strings. See here for more infos on how types are used for localization.

ErrorMessages : GridErrorMessages

A GridErrorMessages instance containing customized grid messages. Messages MUST not be localized, since they are localized in the grid layout template using the type specified in localization-type. Below, property names and default messages:

            AddFailed = "add operation failed",
            DeleteConfirmation = "are you sure you want to delete this item?",
            DeleteFailed= "delete operation failed",
            ModificationFailed = "modification failed",
            ShowDetailFailed= "operation failed"

rows-cache-key: string

When a name is specified all row-type definition settings are cached to save the time needed to parse and process all row-type tag helpers. Cached settings are used by all controls that specify the same rows-cache-key.

layout-template: string, layout-parts: IEnumerable<string>

Specifies respectively a custom layout template and some sub-templates it needs. The table based default template has a unique sub-part: the template that creates all column headers

Please refer to this live example to see how to customize grid layout.

Query related attributes

Some attributes are specific for grids that have been enhanced with queries, namely:

query-for: ModelExpression: The property containing the QueryDescription object that stores all current query information
query-grouping-type: Type: The type of the ViewModel used when the grid is in grouping mode.
enable-query: bool: Enables queries (inherited from RowType).
sorting-clauses: int: The number of sort conditions to show in a sort window (inherited from RowType).