General

The Ingrid is a component in which the fields can be edited directly in the grid.

Configuration

Some properties of the grid can be configured via the JSON file.

Example configuration

{
	"name": "timesInGridOptions",
		"data": {
			"dataSource": {
				"group": {
					"field": "Datum",
					"dir": "asc"
				}
			},
			"columns": [
			{
				//Column1
			},
			{
				//Column2
			}...
			]
		}
}

The property "group" specifies whether the grid should be grouped by default. For this purpose, the field ("field") and the direction ("dir"), in which the grid is to be grouped are specified.

The columns of the grid are defined in the property "column". A detailed description follows in the next sections.

Column types

The grid can display the following column types:

TextBox

Text box in which everything required can be entered.

Example

{
	"type": "textBox",
	"field": "WeekDay",
	"title": "{{{Beleg.Tag}}}",
	"width": 60
}

NumericTextBox

Text box in which only numerical information can be entered.

Example

{
	"type": "numericTextBox",
	"field": "Traveldistance",
	"title": "{{{GeoMap.Distance}}}",
	"width": 80,
	"min": 0,
	"max": 100,
	"format": "{0:n2}"
}

TimeTextBox

Text box in which only time data can be entered (00:00 - 24:00).

Example

{
	"type": "timeTextBox",
	"field": "Zvon",
	"title": "{{{Field.BelegZeit.zvon}}}",
	"width": 80
}

DatePicker

Component in which only dates can be entered.

This component also contains a fold-out calendar, where a date can be selected.

Example

{
	"type": "datePicker",
	"field": "Datum",
	"title": "{{{Field.BelegZeit.datum}}}",
	"width": 120
}

CheckBox

A simple checkbox.

Example

{
	"type": "checkBox",
	"field": "IsDriver",
	"title": "{{{WebSMS.ServiceReport.Fahrer}}}",
	"width": 80
}

DropDown

Component that displays a list of data from which an entry can be selected.

Example 1

{
	"type": "dropDown",
	"field": "UtcoffsetZBis",
	"title": "{{{WebSMS.ServiceReport.TimeOffset}}}",
	"width": 90,
	"dataSourceURL": "ServiceReportLookUp/GetTimeOffsetUTC",
	"dataTextField": "Name",
	"dataValueField": "Value"
}

Example 2

{
	"type": "dropDown",
	"field": "UtcoffsetZBis",
	"title": "{{{WebSMS.ServiceReport.TimeOffset}}}",
	"width": 90,
	"dataSource": "parentServiceReport.lookups.GetTimeOffsetUTC",
	"dataTextField": "Name",
	"dataValueField": "Value"
}

DropDownOnDemand

Component that displays a list of data from which an entry can be selected.

The list is only loaded at runtime. A lookup value can be given.

Example

{
	"type": "dropDownOnDemand",
	"field": "TaetigkeitId",
	"lookUpField": "Kunde_Taetigkeit",
	"title": "{{{Standard.Beschreibung}}}",
	"width": 120,
	"required": "!row.IsProduktiveTaetigkeit",
	"dataSourceURL": "WeeklyReportLookup/GetTaetigkeiten",
	"dataTextField": "Bezeichnung",
	"dataValueField": "Id",
	"parameters": {
		"ressNr": "entity.Ressnr",
		"isProductive": "row.IsProduktiveTaetigkeit"
	}
}

ComboBox

Component that displays a list of data from which an entry can be selected. Alternatively, a text can be typed in.

Example

{
	"type": "comboBox",
	"field": "UtcoffsetZBis",
	"title": "{{{WebSMS.ServiceReport.TimeOffset}}}",
	"width": 90,
	"dataSourceURL": "ServiceReportLookUp/GetTimeOffsetUTC",
	"dataTextField": "Name",
	"dataValueField": "Value"
}

MultiColumn

Multi-column heading which contains other columns.

Example

{
	"type": "multiColumn",
	"title": "{{{WebSMS.WeeklyReport.Kunde_Tätigkeit}}}",
	"columns": [
		{
			//Column1
		},
		{
			//Column2
		}...
	]
}

IsSearch

Text box which also contains buttons. The buttons can open a search or delete the selection.

When typing manually, matching suggestions can be displayed.

Example

{
	"type": "isSearch",
	"field": "Kls",
	"title": "{{{Field.Barauslage.kls}}}",
	"witdh": 120,
	"searchWindowUrl": "DynamicSearch/Window/monkls?fullobject=true",
	"fullObjectKey": "schluessel",
	"template": "<div>#: field.Description #</div>",
	"deleteButtonEnabled": true,
	"readOnlyTextField": true
}

AddressSearch

Like the IsSearch column specifically for addresses.

Example

{
	"type": "addressSearch",
	"field": "AdrNr",
	"title": "{{{Addresse.Addresse}}}",
	"witdh": 80
}

MachineSearch

Like the IsSearch column specifically for machines.

Example

{
	"type": "machineSearch",
	"field": "Maschnr",
	"title": "{{{Maschine.Maschine}}}",
	"witdh": 80
}

ProjectSearch

Like the IsSearch column specifically for projects.

Example

{
	"type": "projectSearch",
	"field": "ProjNr",
	"title": "{{{Project.Project}}}",
	"witdh": 80
}

TicketSearch

Like the IsSearch column specifically for tickets.

Example

{
	"type": "ticketSearch",
	"field": "ProblemNr",
	"title": "{{{Ticket.Ticket}}}",
	"witdh": 80
}

ResourceSearch

Like the IsSearch column specifically for resources.

Example

{
	"type": "resourceSearch",
	"field": "RessNr",
	"title": "{{{Resource.Resource}}}",
	"witdh": 80
}

ContactSearch

Like the IsSearch column specifically for contacts.

Example

{
	"type": "contactSearch",
	"field": "Pos",
	"title": "{{{Contact.Contact}}}",
	"witdh": 80
}

Properties of the columns

The following tables describe which properties the different columns support.

The column "Access to entity" indicates whether the property can access the entity e.g. "entity.Weekday".

The column "Access to row" indicates whether the property can access the values of the row e.g. "row.Weekday".

Example using the

"readonly": true //Normal boolean
 
"readonly": "entity.ShowWeekDay" //Access to entity (the column of all rows would be read-only at the same time or not)
 
"readonly": "row.WeekDay == 'Mo'" //Access to row (the column would be read-only or not for each row depending on the day of the week)

Standard properties

These properties apply to all columns except the MultiColumn.

Property	Description	Required	Access to entity	Access to row
type	Indicates the type of column. More on this can be found here.
field	This indicates which entity property is associated with this column.
title	Title of the column heading. This can also be drawn from translations.
width	Width of the column.
format	The format applied to the value before it is displayed.
readonly	Indicates whether the column is editable.
visible	Indicates whether the column is visible.
required	Indicates whether the column is a mandatory field.
template	Templates can be used to edit the design of the respective column. The actual value can be addressed with "value". Example `"template":` `"# if(row.Projnr == 'WB') {# #=value # #} else {# #=row.ZeittypAsString # #} #"` You can find more information on the templates at "Other" .
headerTemplate	Headline design. Example `"headerTemplate":` `"<div>Headline<br/>with line break</div>"`
groupHeaderTemplate	Design of the group heading when grouped by column. Example `"groupHeaderTemplate":` `"#=kendo.toString(value, 'd')#"`
min	Minimum value of the column.
max	Maximum value of the column.

Further properties DropDown

If the properties "dataSource" and "dataSourceURL" are both filled, the property "dataSourceURL" stands out.

Property	Description	Required	Access to entity	Access to row
dataSource	The data source from which the data is drawn can be specified here. Example `"dataSource":` `"parentServiceReport.lookups.feiertagarten"`
dataSourceURL	Here you can enter the URL from which the data is taken. Example `//Ohne Parameter` `"dataSourceURL":` `"ServiceReportLookUp/GetDynZeitypen"` `//Mit Parametern` `"dataSourceURL":` `"ServiceReportLookUp/GetDynZeitypen?id=entity.Ressnr&belegnr=entity.Belegnr"` `//Api Endpoint` `"dataSourceURL":` `"Statistic/api/dynamicapi/<id>/GetData"`
dataTextField	The text to be shown in the list.
dataValueField	The value associated with the entity. (Reference to the model)
parameters	Specifies the parameters for the URL. Example `"parameters": {` `"id":` `"entity.Ressnr",` `"belegnr":` `"entity.Belegnr"` `}`

Other features DropDownOnDemand

This column contains all the properties of the DropDown column.

Property	Description	Required	Access to entity	Access to row
lookUpField	The value that is displayed when loading.

Further properties SearchColumn

Property	Description	Required	Access to entity	Access to row
searchWindowUrl	Url which is called up when the search button is pressed. Example `//Return the Id from search` `"searchWindowUrl":` `"DynamicSearch/Window/monkls"` `//Return full object of search ("fullObjectKey" has to be set)` `"searchWindowUrl":` `"DynamicSearch/Window/monkls?fullobject=true"`
autocompleteEnabled	Suggestions are displayed while typing.
autocompleteUrl	Url from which the data for the proposals are drawn.
autocompleteDataTextField	Property of the elements from the suggestions which is to be displayed.
autocompleteTemplate	Appearance of the proposals. Example `"autocompleteTemplate":` `"<div>${data.Description}</div>"`
readOnlyTextField	If the field is not to be edited manually, this property must be true. For example, the field can only be edited via the search button.
fullObjectKey	Specifies the key of the object returned from the search (only relevant if "fullobject=true" see "searchWindowUrl").
deleteButtonEnabled	Indicates whether the "Delete" button is displayed.
template	Templates can be used to edit the design of the respective column. Example `"template":` `"<div>#: field.Description #</div>"`

Properties MultiColumn

Property	Description	Required
type	Indicates the type of column. There is more here.
title	Title of the column heading. This can also be drawn from translations.
columns	Columns that are subordinated to the MultiColumn.

Individual data

Individual data can be included in the same way as the other columns.

The only difference is that the property "field" must be included before the name of the column "Ind_".

Example

{
	"type": "numericTextBox",
	"field": "Ind_lbzlistind_int",
	"title": "Test"
}

The property "field" is case-sensitive and everything after the "Ind_" must always be written in lower case.

Example

Example.json