Widget Griglia
Il widget Griglia consente di visualizzare qualsiasi insieme di dati in una vista della griglia. La griglia supporta molte modalità differenti per eseguire il rendering dei dati, inclusi il contesto cromatico per colonna e il rendering delle immagini in una cella. È possibile configurare i rendering di base, inclusi l'ordine delle colonne, le colonne da visualizzare, le intestazioni di colonna e la formattazione di stato mediante la finestra di dialogo di configurazione del widget Griglia, utilizzando la selezione Configure Grid Columns.
La griglia supporta il ridimensionamento delle colonne nell'ambiente di esecuzione, nonché l'ordinamento dei dati facendo clic su un'intestazione di colonna.
Griglia modificabile
La griglia include anche un'impostazione speciale per il widget e all'interno dell'opzione Configure Grid Columns che consente la modifica di righe/colonne nella griglia. Ciò consente inoltre di modificare i valori in una griglia, quindi di trasferire l'intero contenuto in un servizio. In alternativa, se si visualizza Selected Row nella griglia, è possibile trasferire tale riga specifica. La best practice prevede solo l'utilizzo di Selected Row perché, in base alla grandezza della tabella, può influire sull'utilizzo di memoria.
Per ulteriori informazioni, vedere il video dimostrativo seguente:
| Gli stili e le proprietà comuni del widget non sono inclusi nella tabella seguente: |
Nome proprietà | Descrizione | Tipo di base | Valore di default | Associabile? (Y/N) | Localizzabile? (Y/N) |
---|
CustomClass | Classe CSS definita dall'utente da applicare al div superiore del widget. È possibile inserire più classi, separate da uno spazio. | STRING | n/d | Y | N |
RowFormat | Le regole facoltative per applicare la formattazione (di stato) dinamica per le singole righe possono essere sostituite dalla formattazione di stato delle celle. | FORMATTAZIONE STATO | Formattazione stato | N | N |
MultiSelect | Consente di selezionare più elementi. | BOOLEAN | False | N | N |
IsEditable | Consentire le modifiche ai valori nella griglia? | BOOLEAN | False | N | N |
AutoSelectFirstRow | Seleziona automaticamente la prima riga durante il caricamento iniziale dei dati. | BOOLEAN | False | N | N |
CellTextWrapping | Esegue il wrapping nelle celle. | BOOLEAN | False | N | N |
Dati | Infotable che è l'origine dati per questa proprietà. | INFOTABLE | n/d | Y | N |
CurrentScrollTop | Scorrimento in alto corrente. | NUMBER | 0 | Y | N |
ScrollTop | Scorrimento in alto per l'assegnazione. | NUMBER | 0 | Y | N |
EditedTable | Tabella che viene modificata utilizzando la griglia. | INFOTABLE | n/d | Y | N |
RowHeight | Altezza delle righe. | NUMBER | 30 | N | N |
ShowAllColumns | Visualizza tutte le colonne disponibili. È consigliabile utilizzare ShowAllColumns se la infotable non include una data shape. | Le funzionalità di rendering, quali modifica delle celle e selezione degli stili, non sono disponibili se questa proprietà è attivata. |
| BOOLEAN | False | N | N |
ShowDataLoading | Visualizza i dati durante il caricamento. | BOOLEAN | True | N | N |
DoubleClicked | Evento. Consente di selezionare l'oggetto dati con un solo clic, ma permette di utilizzare comunque il doppio clic per un altro evento, ad esempio per aprire un link di navigazione. | n/d | n/d | Y | N |
Visible | Il widget è visibile durante l'esecuzione? | BOOLEAN | True | Y | N |
Configurazione della griglia
Dopo avere collegato un servizio dati alla griglia, aprire la finestra di dialogo Grid Column Configuration. È possibile scegliere quali colonne devono essere visibili utilizzando le caselle di controllo Nascondi della colonna (true = mostrare, false = nascondere). Riordinare le colonne visualizzate trascinandole su e giù nell'elenco.
Il titolo di colonna viene assegnato automaticamente dalla data shape del servizio dati, ma può essere sostituito colonna per colonna all'interno della finestra di dialogo di configurazione. Per ogni colonna, è inoltre possibile eseguire le operazioni indicate di seguito.
• Scegliere il renderer per la cella (utilizzato per la gestione di un tipo di dati specifico nei dati da visualizzare - opzione consigliata).
• Scegliere la larghezza automatica o la larghezza fissa
• Scegliere l'allineamento del testo
• Scegliere lo stile (Stile fisso o Formattazione basata sullo stato)
• Designare una colonna come modificabile (con o senza convalida)
Se si desidera applicare uno stile fisso (non dinamico), selezionare Stile fisso e scegliere una definizione di stile determinata in precedenza. Se si desidera eseguire la formattazione dinamica (contesto cromatico e così via, in base ai dati restituiti in una riga), scegliere Formattazione basata sullo stato.
Con la formattazione basata sullo stato, ogni colonna di dati viene configurata separatamente, applicando uno stile specifico alla colonna in base ai dati nella riga. Per ogni colonna per la quale si desidera definire un'utilità di formattazione di stato, è necessario effettuare le operazioni indicate di seguito.
• Selezionare la colonna da cui dipende la formattazione (può essere qualsiasi colonna, nascosta o meno, del servizio dati restituito)
• Selezionare la definizione di stato che si desidera utilizzare (una per colonna e corrispondente al tipo di dati del campo dipendente)
• Accettare i valori di default per la definizione di stato oppure sostituirli in maniera specifica per il rendering e la definizione della griglia
Con la griglia impostata su Modificabile, è quindi possibile designare anche colonne specifiche come modificabili. È inoltre possibile aggiungere la convalida in base ai nomi di colonna utilizzando i confronti di JavaScript.
Esempio:
Validation - Column1 > 5 && Column3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10