Grid

Displays data in a grid.

Component modes: Grid | Editable Grid

Component mode: Editable Grid

The user can edit cells whose column's field information is configured as editable in grid.

Editing is performed on a cell-basis and the procedure is called to save changes before another cell can start editing.

Appearance

Overview

alt text

Excel export

The excel export button is in the upper right corner. It is shown by default, but can be hidden by grid settings. It is not shown on small screen devices.
alt text

Row links are clickable icons that are displayed on each row. If there are more rowlinks than the maximum available space (adjustable by a setting), the ...-button is displayed which gives access to the rest of the rowlinks. If a row link is not relevant on every row, you can hide it on a per-row basis.
alt text

Checkboxes

You can choose to display a column of checkboxes. These allow for operations on multiple rows at once. In this example, the top button "Set tax status" is used to set the tax status of the cars that the user has checked.
alt text

Order

To sort by a column, you click it's heading. To reverse the order you click it again.
alt text

Grouping

The user can choose one column to group by. The column will then be removed from the grid, and it's values will instead appear as headings. In this example the "Fuel" column has been choosen. You can specify a default grouping in the grid settings.
alt text

Paging

The total number of rows is always shown (384 in this example). If it's too many to display at once, the grid will divide the results into pages. The default page size is 50 rows, but it can be customized. In this example the page size has been set to six rows. Hence the total number of pages is 384/6 = 64.
To navigate, there are clickable arrows for previous/next page, and a textbox where you can type an arbitrary page number (after the word "Page" in the screenshot). You can also use the PgUp/PgDown keys move to previous/next page, and Home/End for the first/last page.
alt text

Sums and other aggregates

You can choose to display a sum below any numerical column, which will be automatically computed by the platform. If you need other forms of aggregation (other than simple addition) you can provide the aggregate values manually.
alt text

Color and style

You can set the color for specific rows and cells. In this example the cells in the Brand column are given different colors for different brands, while the whole row is grayed out for cars with status = Sold. In addition to color you can set arbitrary css-style attributes for whole rows as well as individual cells. Using these attributes you can make quite remarkable changes to the grids appearance. Artistic restraint is advised.
alt text

Tooltip

You can set the tooltip text for individual cells, row links and columns headings. In this example the user gets additional information about the model by hoovering the mouse over the Model cell.
alt text

Extra text

You can provide extra text about a row in the grid, that shows up on demand. Existence of extra text is indicated by a down-arrow that appears in it's own column.
alt text
When you click the arrow, the text appears inserted below the corresponding row like this:
alt text
The extra text can include html formatting if needed.

Column groups

The columns of a grid can be assigned column groups. This can save horizontal space (in this example, the words "Owner" and "Previous owner" don't have to be repeated for each column).
alt text

Checkboxes (selecteditems)

You can use the grid setting Show checkboxes to enable checkboxes on a menu item.

The grid menu item can pass the ids of its selected rows, for historical reasons commonly referred to as selecteditems via links from the grid to other menu items. These menu items then access these ids as a comma-separated string.

Row Ids

Checkboxes use the values from the first grid column as row ids. Row ids must be unique unless they are NULL. Any row with NULL in the first column will not show a checkbox.

Warning

The row ids that you access through selecteditems are ID values of rows that were valid when the user loaded the grid. No validation is performed to ensure that the ID values are still valid, that their rows would still be visible if the user reloads the grid.

For example, you have a grid of unsent invoices and a top-link "Send all checked invoices". The user checks a few rows and then clicks the top link. Now, the checked invoices are sent, and their rows will no longer appear in the grid, but the grid still remembers the IDs of the checked rows. If the user checks a few more rows and clicks the top link again then the Send-menuitem will receive both the IDs of the invoices already sent and the new IDs. You can avoid this by using the execute component's special column admin_unselectall to clear all checkboxes.

Component settings

Enable row caching
Whether grid contents should be cached. Grids faster than a few seconds are never cached.
Excel export format
The format of the generated Excel file. The default value is taken from the ExcelExportDefaultDocType application variable.
Possible value Description
xlsx The document is generated as a Microsoft Excel 2007 (*.xlsx) document. InfoSql and style information will be rendered.
text The document is generated as tab separated text. InfoSql and style information will not be rendered. This mode causes a warning when opened in Microsoft Excel 2007 and later versions.
Number of fields to hide
Hides the specified number of fields, starting with the first.
Number of rows per page
The number of rows to show per page. The default value is taken from the RowRetrieve application variable.
Number of visible row links
The maximum number of links to show per row. Any additional links are made available in the Navigator.

SQL

SQL Call: Retrieve grid data (mandatory)

Call made to retrieve the data to display in the grid.

May modify database: No

Parameters

@IsForExcelExport bit
Is set to 1 when procedure is called to retrieve grid data for Excel-export.
@OrderBy string
Comma separated list of columns to sort the result by. Is only set when "Sort in procedure" is activated.

Resultset: Grid data

The data to display in the grid.

The contents of the first column returned is required to be unique for each row when used together with {selecteditems}.
Table count: repeated exactly once
Row count: zero or more rows
Columns
<colname> optional string

The content to be shown in a grid column. The formatting of the value is determined by the connected field information. If the the field information has Allow HTML enabled in its Display Settings, the value will be treated as HTML of the Safe HTML level.

In case the field information is of type Hidden, the column will be excluded from the grid. This feature is useful for columns intended solely to provide values for use by links.

Row_ListViewTitle optional string

Specifies a custom row title for the list grid (that is, the mobile grid). If you do not specify at least one of Row_ListViewTitle, Row_ListViewText or Row_ListViewHtml then the first visible column will become the row title.

Row_ListViewText optional string

Specifies the body for a custom row description for the list grid (that is, the mobile grid). Usually used together with Row_ListViewTitle. Mutually exclusive with Row_ListViewHtml.

Row_ListViewHtml optional string

Specifies the body for a custom row description for the list grid (that is, the mobile grid). Can be used together with Row_ListViewTitle or by iteslf. Mutually exclusive with Row_ListViewText.

<colname>_DisplayValue optional any
When present, the value in this column is displayed instead of the value in <colname> in the grid. This is most useful for Editable Grid, where you'd for example want the StatusId column to be edited as an integer with the status id, but displayed as the status name.

If present, this column is used when sorting <colname> unless the <colname>_SortOrder column is also present.
<colname>_SortOrder optional any
If present, this column is used when sorting <colname>. This column is not shown in the grid, and can be of any type.
<colname>_Tooltip optional string
Sets the tooltip in the <colname> cell.
At most one of _Tooltip and _TooltipHtml can be set for the same cell.
<colname>_TooltipHtml optional string
Same as <colname>_Tooltip, but will convert HTML into plain text.
<br> will become a newline, and HTML encoding will be translated ("&auml;" will become "ä" for example). All other HTML styling will be ignored.
At most one of _Tooltip and _TooltipHtml can be set for the same cell.
<colname>_MenuItemId optional int
Legacy don't use this for new development. Create a cell link connected to a column instead. If dynamic columns are being used use <colname>_LinkId instead.
<colname>_LinkId optional int
If possible you should create a cell link connected to a column instead. If dynamic columns are being used use this column.
Creates a link with the specified LinkId for the <colname> cell.
<colname>_PassingFields optional string
Querystring when used in conjunction with <colname>_MenuItemId.
<colname>_Color optional string

Sets the text color of <colname> to the specified color. See Colors.

<colname>_Style optional string
Sets the CSS style for the <colname> cell. Never use a string from a user as part of this column for security reasons.
<colname>_Icon optional string
The name of the system icon to show in the <colname> cell.

Use the menu item "Admin>Theme>System icons" to register system icons.
<colname>_IconColor optional string

Color to use for the icon specified in <colname>_Icon. See Colors.

<colname>_IsEditable optional bit

Can be used to prevent editing of a grid cell in a column that would normally be editable. Use the Row_IsEditable column instead if you want to disable all cells on the row.
"Editable" must be set for the the field info, otherwise this column has no effect.

Row_Color optional string

Sets the text color of the entire row. See Colors.

Row_Style optional string
Sets the CSS style for the entire row. Never use a string from a user as part of this column for security reasons.
Row_AccessibilityTitle optional string

Text used to identify the row for screen readers. Row_ListViewTitle will be used as a fallback if this is not set.

Row_CheckboxDisabledReason optional string
Sets the tooltip of a disabled checkbox.

Can only be set when Row_EnableCheckbox is set to 0.
Row_EnableCheckbox optional bit
Determines if a checkbox will be enabled/disabled for the row. Only grids with show checkboxes enabled can enable/disable checkboxes. Combine with Row_CheckBoxDisabledReason to clarify the reason the checkbox is disabled.

It is not allowed to explicitly set this to 0 or 1 if the grid has show checkboxes disabled, even if it has been done dynamically.
Default: By default checkboxes will be enabled if show checkboxes is enabled.
Row_ExtraHtml optional string
Layouted HTML shown below the current row.

The HTML starts hidden. The user can toggle the visibility.

The contents of the first column returned is required to be unique and not null for each row when using Row_ExtraHtml.
At most one of Row_ExtraText and Row_ExtraHtml can be set for the same row.
Row_ExtraText optional string
Text shown below the current row.

The text starts hidden. The user can toggle the visibility.

The contents of the first column returned is required to be unique and not null for each row when using Row_ExtraText.
At most one of Row_ExtraText and Row_ExtraHtml can be set for the same row.
Row_IsEditable optional bit
Determines if the row is editable in editable grid mode. Use the <colname>_IsEditable column if you need to control the editability of a single cell instead.
Default: By default all rows are editable.
Row_IsEditing optional bit
If set to 1 the grid will start in edit mode with the first control of this row focused.
Row_ShowCheckbox optional bit
Determines if a checkbox will be shown for the row. Only grids with show checkboxes enabled can show checkboxes.

It is not allowed to explicitly set this to 1 if the grid has show checkboxes disabled, even if it has been done dynamically.
Default: By default checkboxes will be shown if show checkboxes is enabled.

Resultset: Number of rows (optional)

Mandatory when the grid data is sorted in the procedure (with @OrderBy). Should not be returned when the grid data is sorted in the application.
Table count: repeated zero or one time
Row count: exactly one row
Columns
<column with ordinal 1> mandatory int
The number of rows returned by the query.

Resultset: Aggregate rows (optional)

Makes it possible to add rows with aggregate information below the main rows.
Table count: repeated zero or one time
Row count: one or more rows
Columns
<colname> optional string
Value to show in column <colname> if it exists.
<colname>_Tooltip mandatory string
Sets the tooltip in the <colname> cell.
ADMINAggregate mandatory string
The caption to use for this row.
ADMINPhraseID optional string
Phrase ID to use for caption.

Resultset: Dynamic field information (optional)

Specify extra properties for fields in the grid.

NOTE: This must be the third resultset or later. You must return a row count resultset in order to use this feature.
Table count: repeated zero or more times
Row count: zero or more rows
Columns
AdminFieldName mandatory string
The name of the field to apply the information to. The presence of this column indicates that the resultset specifies field information.
AllowHtml optional bit
Allow HTML.
ButtonJavaScript<xxx> optional string
Inserts a button next to the control that is used to execute the JavaScript supplied here. <xxx> is an arbitrary text that can be empty if only one button is required.
ButtonJavaScript<xxx>_Label optional string
The label for the JavaScript button <xxx>.
CellAlignment optional string

The alignment of grid columns and InfoSQL values.

Possible value Description
center Only applicable to grid columns.
left
right
ColumnTooltip optional string
Sets the tooltip on the column title. Only supported by the Grid component.
DefaultValue optional string
The default value for the control or if prefixed by 'SQL:' the sql to run to determine the default value.
DefaultValueSql optional string
SQL that evaluates default value for field. Can contain other fields for value dependency.
Description optional string
The description for the field.
EnabledJavaScript optional string
Javascript that controls the enabled status of the field. The control is only enabled if the expression specified here evaluates to true. The expression is evaluated every time the value of a dependent control is changed. This is only available to control types for which the enabled javascript field is visible in the user interface.
FieldGroupId optional int
The field group to use.
FieldInfoId optional int
ID of field information to base the dynamic field on. All properties not explicitly overridden by dynamic field information will be copied from this field. The referenced field must be found in the menu item's field tables.
FieldLabel optional string
If present the field label is used as the heading for fields instead of the field name.
FieldType optional string
The name of the control type to use. It is usually recommended to use FieldInfoId instead unless the column is used to make fields hidden or uneditable.
Possible value Description
boolean checkbox Legacy alias. Use "checkbox" instead.
boolean dropdown
chart
checkbox
checkbox tree
colorpicker
date
datetime
dropdown
file
file upload area
heading
heading with checkbox
hidden
html
info text
listbox
multi-autosearch
multi-listbox
multi-picker
multirow
password
picture
radio buttons
radio cards
signature
textarea
textbox
textbox with autosearch
textbox with autosuggest
textbox with dropdown
textbox with popup
time
uneditable text
Height optional int
The height of the control.
IgnoreOnSave optional bit
Do not pass the field value to the insert/update procedure.
InfoSqlLayout optional string
Where the label is shown in relation to the contents in InfoSQL.
Possible value Description
Default Inherit layout from menu item.
LabelAbove Full width, label above.
LabelLeft Label to the left.
NoLabel Full width, no label.
Standard Deprecated. Use LabelLeft instead.
IsEditable optional bit
Controls whether the control is editable in Editable Grid/Editable Info Boxes.
MandatoryJavaScript optional string

JavaScript that controls the mandatory status of the field, this overwrites nullchoice if set. This is only available to control types for which the mandatory JavaScript field is visible in the user interface.

MaxDate optional date
Only applicable to the Date and Datetime controls.
MaxDate optional date
For date controls, the latest date that the user can enter.
MinDate optional date
For date controls, the earliest date that the user can enter.
MinDate optional date
Only applicable to the Date and Datetime controls.
MultipleFiles optional bit
For file upload controls, determines whether they allow multiple or a single file.
NullChoice optional bit
Specifies whether the control allows null values.
NumberOfDecimals optional int
The number of decimals to display for numeric values.
OnChangeJavaScript optional string
Javascript run when the value of the control has changed.
OutputFormat optional string
Special formatting to be applied when the field is displayed.
Possible value Description
Hyperlink
MailToLink
PhoneLink
Placeholder optional string
Text shown when the field is empty.
Sql optional string
The SQL that determines the control's behavior. (Refer to control documentation for more information)
TempTableName optional sysname
For multirow and multicontrol, changes the nameof the temp table used when saving its contents. Does nothing when UseTempTable=0 or for other control types.
TextDirection optional string

Which direction the script is written in. Not to be confused with the CellAlignment property.

Possible value Description
default System default. Not useful unless you are trying to override an already explicit text direction on existing field information.
ltr Left-to-right (for example English)
rtl Right-to-left (for example Arabic)
ThousandDelimiter optional string
The thousand grouping delimiter for numeric values.
TimePickerFrom optional string
Only applicable to the Time and Datetime controls.
TimePickerTo optional string
Only applicable to the Time and Datetime controls.
Width optional int

The width of the control.

At one point, this was a pixel value. Back when Softadmin used Verdana 10px, and before fields had width-categories. Now, it is just a value that is converted to a width category.

The possible values listed below are just suggestions. For example, both 1 and 30 will be converted to shortest, and both 500 and 9999 to longest.

Possible value Description
150 Medium-long
30 Shortest
300 Long
500 Longest
60 Short
90 Medium short
VisibleJavaScript optional string
JavaScript that controls the visibility of the field. The control is only visible if the expression specified here evaluates to true. The expression is evaluated every time the value of a dependent control is changed.

Resultset: File name (optional)

Table count: repeated zero or one time
Row count: zero or one row
Columns
ADMINFilename optional string
Name to use if the grid is exported to Excel. Should not end with a file extension.

SQL Call: Get edited row (mandatory)

The component makes this call just before saving changes to verify that the data in the row that the user is editing has not already been changed by another user.

A temp table #Row will be passed to the procedure, containing a single row with the values of the grid-row currently edited.

Decimal and numeric fields in the temporary table #Row will get their precision from the actual values during insert/update.

May modify database: No

Parameters

@Action string
Will be set to 'GetRow'.

Resultset: Grid data

This table should contain the current state of the edited row, whose primary key data can be retrieved from the #Row table.

The same columns must be returned in the same order as when the grid was originally loaded. You may optionally omit the ColumnName_xxx special columns.
Table count: repeated exactly once
Row count: zero or one row
Columns

SQL Call: Save edited cell (mandatory)

The user has edited a cell, and the grid should now either save the changes and return an updated row or reject the changes.

If the grid uses dynamic field information then the same dynamic fields should be returned from this call as from the original.

A temp table #Row will be passed to the procedure, containing a single row with the new values of the grid-row.

Decimal and numeric fields in the temporary table #Row will get their precision from the actual values during insert/update.

May modify database: Yes

Parameters

@Action string
Will be set to 'SaveCell'.
@ColumnName string
The name of the column being edited.

Resultset: Updated row (optional)

This table should contain the values of the updated row.

The same columns must be returned in the same order as when the grid was originally loaded.
Table count: repeated zero or one time
Row count: exactly one row
Columns

Resultset: Other actions (optional)

This table contains error messages and other instructions. The 'Updated row' resultset should be omitted when using 'Other actions'.
Table count: repeated zero or one time
Row count: exactly one row
Columns
ADMIN_ErrorMessage optional string

Displays a user friendly error message to the user.

ADMIN_Dialog optional string

The dialog alias of a predefined dialog to show the user. Must be the first column in the result set table.

Use the menu item "Admin > Dialogs" to register new dialogs or find aliases for existing ones.

ADMIN_Force optional string
Ask the user for confirmation before saving.
ADMIN_Message optional string
Show this error message to the user.
ReloadGrid optional bit
If 1 then the whole grid is reloaded instead of just the edited row.

SQL Call: Validate parameters

Allows you to validate the SQL parameters before any other SQL is run in the component. This call is only made if the SQL is a stored procedure and Validate parameters is checked.

May modify database: No

Parameters

@Force bit
Set to 1 if the last call to validate parameters used admin_force and the user clicked OK in the OK/Cancel dialog.
@ValidateParams bit
Set to 1 when this call is made.

Resultset: Messages (optional)

Table count: repeated zero or one time
Row count: zero or one row
Columns
ADMIN_Force optional string
Message asking the end user to confirm their parameters.
ADMIN_Message optional string
Message explaining why the parameters are rejected.

InfoSQL

See the InfoSQL documentation for details.

Custom access control and logging

SQL Call: Custom access control and logging

Use this call to restrict which entries a user is allowed to view and edit, and to log which entries a user views.

Access to a menu item is normally controlled through functions and roles alone but some entities need more fine grained control. For example, a user may have access to the View Member menu item for normal members but not for members with a protected identity.

The menu items a user visits are always logged (in ADMINLogMenuItem) but for sensitive data you may need to log exactly what entries are viewed. Do the logging in this call as the common ways of viewing data (grid and InfoSQL) are not allowed to modify the database.

If you bind a scalar function instead of a stored procedure to this call then its name must end with '_GrantAccess'.

May modify database: Yes

Resultset: Access permissions

Return whether the user is allowed to visit the menu item with the current parameters.
Table count: repeated exactly once
Row count: exactly one row
Columns
GrantAccess mandatory bit
1 if the user is allowed to view the menu item, 0 if the user should not be allowed to view the menu item.

If 0 then an error will be logged as the user should not have been able to reach the menu item with the given parameters in the first place.

Querystring parameters

menuitemheading optional
String that replaces the menu item name when the menu item is loaded. It does not replace the name before that (like for example in the navigator). It is ignored if the menu item is displayed as a part in a multipart in which case the name can be set from the multipart procedure.

Examples

Simple editable grid

This editable grid uses the _DisplayValue-column to support its two dropdown columns, StatusId and UserIdAssignedTo.

CREATE OR ALTER PROCEDURE ToDo.Task_EditableGrid
	@Action varchar(100) = NULL,
	@ColumnName sysname = NULL
AS
BEGIN
	DECLARE @TaskId int;

	IF @Action = 'SaveCell'
	BEGIN
		-- Validate
		IF (SELECT R.Status FROM #Row R) <= 0
		BEGIN
			SELECT 'Illegal Status' [ADMIN_Message];
			RETURN;
		END

		-- Update all editable columns instead of switching on @ColumnName parameter.
		UPDATE ToDo.Task SET
			StatusId         = R.StatusId,
			UserIdAssignedTo = R.UserIdAssignedTo,
			Task             = R.Task,
			@TaskId          = T.TaskId -- Fetch the primary key so we can return the correct row as response.
		FROM
			ToDo.Task T
			JOIN #Row R ON R.TaskId = T.TaskId;
	END;

	IF @Action = 'GetRow'
	BEGIN
		SELECT @TaskId = (SELECT TaskId FROM #Row);
	END;

	SELECT
		T.TaskId,
		T.Task,
		S.StatusId,
		S.Status AS StatusId_DisplayValue, -- Edit status as ID but show it as text.
		S.SortOrder AS StatusId_SortOrder, -- Sort status based on its internal sortorder instead of by alphabet.
		T.UserIdAssignedTo,
		U.FirstNameLastName AS UserIdAssignedTo_DisplayValue
	FROM
		ToDo.Task T
		JOIN ToDo.Status S ON S.StatusID = T.StatusId
		LEFT JOIN SoftadminApi.[User] U ON U.UserId = T.UserIdAssignedTo
	WHERE
		(@TaskId IS NULL OR T.TaskId = @TaskId) -- Return all rows for normal call. Return single row for SaveCell and GetRow actions.
END

Best practice

Naming

Name your Editable grid stored procedure with suffix _SearchEdit or _EditableGrid.

When to use editable grid

Editable grid is an extension of grid, not a replacement for multirow controls in a newEdit.
If you want to convert existing multirows to editable grid then you have to rewrite much from scratch.

Editable grid can handle validation with ADMIM_Message and ADMIN_Force, but if you have a lot of dependencies it's probably not suitable to build an editable grid. It's a risk that you end up with duplicated code in both the Editable Grid and the InsertUpdate procedures. Also, you must save the row to the data base after you edit each cell, not all cells on the whole row at the same time. You are free to actually update anything on the save though.

Note that if you want to signal ADMIN_Message, ADMIN_Force or ReloadGrid, then you should only return that table, not the row that was edited. (With force and message, there is nothing to update and nothing new to show, and with ReloadGrid, you will get the new row with the rest of the reloaded data.)