Das Ingrid ist eine Komponente, in welcher die Felder direkt in dem Grid bearbeitet werden können.

Konfiguration

Einige Eigenschaften des Grids können über die JSON-Datei konfiguriert werden.

Beispiel Konfiguration

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

Unter der Eigenschaft "group" wird angegeben, ob das Grid standardmäßig gruppiert werden soll. Dazu wird angegeben nach welchem Feld ("field") und in welcher Richtung ("dir") das Grid gruppiert werden soll.

Die Spalten des Grids werden in der Eigenschaft "column" definiert. Eine detaillierte Beschreibung dazu folgt in den weiteren Abschnitten.

Spaltentypen

Das Grid kann die folgenden Spaltentypen darstellen:

TextBox

Textbox, in der alles Erforderliche eingetragen werden kann.

Beispiel

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

NumericTextBox

Textbox, in der nur nummerische Angaben eingetragen werden können.

Beispiel

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

TimeTextBox

Textbox, in der nur Zeitangaben eingetragen werden können (00:00 - 24:00).

Beispiel

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

DatePicker

Komponente, in der nur Daten eingetragen werden können.

Diese Komponente enthält außerdem noch einen ausklappbaren Kalender, bei dem ein Datum ausgewählt werden kann.

Beispiel

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

CheckBox

Eine einfache Checkbox.

Beispiel

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

DropDown

Komponente, die eine Liste von Daten anzeigt, aus welcher ein Eintrag ausgewählt werden kann.

Beispiel 1

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

Beispiel 2

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

DropDownOnDemand

Komponente, die eine Liste von Daten anzeigt, aus welcher ein Eintrag ausgewählt werden kann.

Die Liste wird erst zur Laufzeit geladen. Es kann ein Lookup Wert mitgegeben werden.

Beispiel

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

Komponente, die eine Liste von Daten anzeigt, aus welcher ein Eintrag ausgewählt werden kann. Alternativ kann auch ein Text selber eingetippt werden.

Beispiel

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

MultiColumn

Mehrspaltige Überschrift, welche andere Spalten enthält.

Beispiel

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

IsSearch

Textbox, welche zusätzlich noch Buttons enthält. Die Buttons können eine Suche öffnen oder die Auswahl löschen.

Beim manuellen Eintippen können übereinstimmende Vorschläge angezeigt werden.

Beispiel

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

Wie die IsSearch-Column speziell für Adressen.

Beispiel

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

MachineSearch

Wie die IsSearch-Column speziell für Maschinen.

Beispiel

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

ProjectSearch

Wie die IsSearch-Column speziell für Projekte.

Beispiel

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

TicketSearch

Wie die IsSearch-Column speziell für Tickets.

Beispiel

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

ResourceSearch

Wie die IsSearch-Column speziell für Ressourcen.

Beispiel

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

ContactSearch

Wie die IsSearch-Column speziell für Kontakte.

Beispiel

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

Eigenschaften der Spalten

Die folgenden Tabellen beschreiben, welche Eigenschaften die verschiedenen Spalten unterstützen.

Die Spalte "Zugriff auf Entität" gibt an, ob die Eigenschaft auf die Entität zugreifen kann z.B. "entity.Weekday".

Die Spalte "Zugriff auf Zeile" gibt an, ob die Eigenschaft auf die Werte der Zeile zugreifen kann z.B. "row.Weekday".

Beispiel anhand der Eigenschaft

"readonly": true //Normaler Boolean
 
"readonly": "entity.ShowWeekDay" //Zugriff auf Entität (die Spalte aller Reihen wären gleichzeitig schreibgeschützt oder nicht)
 
"readonly": "row.WeekDay == 'Mo'" //Zugriff auf Zeile (die Spalte wäre für jede Zeile je nach Wochentag schreibgeschützt oder nicht)

Standard Eigenschaften

Diese Eigenschaften gelten für alle Spalten ausgenommen der MultiColumn.

Eigenschaft	Beschreibung	Erforderlich	Zugriff auf Entität	Zugriff auf Zeile
type	Gibt den Typ der Spalte an. Mehr dazu gibt es hier.
field	Hier wird angegeben, welche Eigenschaft der Entitäten mit dieser Spalte verknüpft wird.
title	Titel der Spaltenüberschrift. Diese kann auch aus Übersetzungen gezogen werden.
width	Breite der Spalte.
format	Das Format, das auf den Wert angewendet wird, bevor er angezeigt wird.
readonly	Gibt an, ob die Spalte editierbar ist.
visible	Gibt an, ob die Spalte sichtbar ist.
required	Gibt an, ob die Spalte ein Pflichtfeld ist.
template	Mit Templates lässt sich das Design der jeweiligen Spalte bearbeiten. Mit "value" kann der eigentliche Wert angesprochen werden. Beispiel 1 `"template":` `"# if(row.Projnr == 'WB') {# #=value # #} else {# #=row.ZeittypAsString # #} #"` Weitere Informationen zu den Templates finden Sie unter "Sonstiges" .
headerTemplate	Design der Überschrift. Beispiel `"headerTemplate":` `"<div>Überschrift<br/>mit Zeilenumbruch</div>"`
groupHeaderTemplate	Design der Gruppenüberschrift wenn nach der Spalte gruppiert wird. Beispiel `"groupHeaderTemplate":` `"#=kendo.toString(value, 'd')#"`
min	Minimaler Wert der Spalte.
max	Maximaler Wert der Spalte.

Weitere Eigenschaften DropDown

Sollten die Eigenschaften "dataSource" und "dataSourceURL" beide gefüllt sein, so sticht die Eigenschaft "dataSourceURL".

Eigenschaft	Beschreibung	Erforderlich	Zugriff auf Entität	Zugriff auf Zeile
dataSource	Hier kann die Datenquelle angegeben werden, aus welcher die Daten gezogen werden. Beispiel `"dataSource":` `"parentServiceReport.lookups.feiertagarten"`
dataSourceURL	Hier kann die URL angeben werden, aus welcher die Daten gezogen werden. Beispiel `//Ohne Parameter` `"dataSourceURL":` `"ServiceReportLookUp/GetDynZeitypen"` `//Mit Parametern` `"dataSourceURL":` `"ServiceReportLookUp/GetDynZeitypen?id=entity.Ressnr&belegnr=entity.Belegnr"` `//Api Endpunkt` `"dataSourceURL":` `"Statistic/api/dynamicapi/<id>/GetData"`
dataTextField	Der Text, der in der Liste gezeigt werden soll.
dataValueField	Der Wert, der mit der Entität verknüpft ist. (Bezug zum model)
parameters	Gibt die Parameter für die URL an. Beispiel `"parameters": {` `"id":` `"entity.Ressnr",` `"belegnr":` `"entity.Belegnr"` `}`

Weitere Eigenschaften DropDownOnDemand

Diese Spalte enthält alle Eigenschaften der DropDown Spalte.

Eigenschaft	Beschreibung	Erforderlich	Zugriff auf Entität	Zugriff auf Zeile
lookUpField	Der Wert, welcher beim Laden angezeigt wird.

Weitere Eigenschaften SearchColumn

Eigenschaft	Beschreibung	Erfolderlich	Zugriff auf Entität	Zugriff auf Zeile
searchWindowUrl	Url, welche aufgerufen wird, wenn der Such-Button gedrückt wird. Beispiel `//Gibt die Id aus der Suche zurück` `"searchWindowUrl":` `"DynamicSearch/Window/monkls"` `//Gibt das ganze Objekt aus der Suche zurück ("fullObjectKey" muss gesetzt sein)` `"searchWindowUrl":` `"DynamicSearch/Window/monkls?fullobject=true"`
autocompleteEnabled	Beim Tippen werden Vorschläge angezeigt.
autocompleteUrl	Url, aus der die Daten für die Vorschläge gezogen werden.
autocompleteDataTextField	Eigenschaft der Elemente aus den Vorschlägen, welche angezeigt werden soll.
autocompleteTemplate	Aussehen der Vorschläge. Beispiel `"autocompleteTemplate":` `"<div>${data.Description}</div>"`
readOnlyTextField	Wenn das Feld nicht händisch bearbeitet werden soll, muss diese Eigenschaft wahr sein. So lässt sich z.B. das Feld nur über den Such-Button bearbeiten.
fullObjectKey	Gibt den Schlüssel des Objektes an, welches aus der Suche zurückgegeben wird (nur relevant wenn "fullobject=true" siehe "searchWindowUrl").
deleteButtonEnabled	Gibt an, ob der Knopf "Löschen" angezeigt wird.
template	Mit Templates lässt sich das Design der jeweiligen Spalte bearbeiten. Beispiel `"template":` `"<div>#: field.Description #</div>"`

Eigenschaften MultiColumn

Eigenschaft	Beschreibung	Erforderlich
type	Gibt den Typ der Spalte an. Mehr dazu gibt es hier.
title	Titel der Spaltenüberschrift. Diese kann auch aus Übersetzungen gezogen werden.
columns	Spalten, welche der MultiColumn untergeordnet sind.

Individualdaten

Individualdaten können genauso eingebunden werden wie die anderen Spalten.

Der einzige Unterschied ist, dass die Eigenschaft "field" vor dem Namen der Spalte "Ind_" enthalten sein muss.

Beispiel

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

Die Eigenschaft "field" ist Case-sensitive und alles nach dem "Ind_" muss immer klein geschrieben werden.

Beispiel

Example.json