Przejdź do głównej zawartości

Kontrolki


Podczas projektowania formularza możesz dodawać pola nie tylko bezpośrednio ze struktury danych formularza, ale także dodawać kontrolki, a następnie wskazać im źródło danych na panelu Właściwości.

  1. Przejdź na panel Przybornik i kartę Kontrolki.
  2. Zostały tu zebrane wszystkie kontrolki, które możesz użyć na formularzu.
  3. Podobnie jak z polami struktury danych przeciągnij kontrolkę na obszar roboczy.
  4. Na panelu Właściwości możesz skonfigurować kontrolkę, a także podpiąć jej źródło danych.
  5. Możesz także wybrać przycisk w obrębie kontrolki, a następnie Ustaw źródło, który od razu otwiera okno z możliwymi polami do wyboru ze struktury danych dla danego typu kontrolki

Obraz 98

Ogólne właściwości kontrolek​

Na panelu Właściwości zostały zebrane wszystkie cechy ogólne danej kontrolki, a także specyficzne i charakterystyczne dla danego rodzaju kontrolki. Spośród ogólnych właściwości kontrolek, które występują na większości elementów możemy wyróżnić:

Informacje podstawowe

  1. Zdarzenia JavaScript - Dodaje zdarzenia, które będą wywoływane w JavaScript.
  2. Podpowiedź - Tooltip, który pojawia się po najechaniu myszką na obiekt.

Powiązane dane

  1. Walidacja dodatkowa - Otwiera edytor kolekcji, który pozwala na zdefiniowanie dodatkowych walidacji.
  2. Pole struktury danych - Pole struktury danych, w którym będą wyświetlane wartości.
  3. Pole wymagane - Określa czy pole jest wymagane czy nie.
  4. Komunikat walidacji - Komunikat, który pojawia się gdy pole jest wymagane, a użytkownik nie wpisał w nim żadnej wartości.
  5. Tylko do odczytu – określenie czy kontrolka ma być edytowalna czy nie.

Układ i wygląd

  1. Dodatkowe style - dodatkowe style do kontroli. Wybrane style łączą się.
  2. Szerokość (w kolumnach) - Liczba kolumn zajmowanych przez element.

Widoczność

  1. Wyłączony (dla kontrolki Przycisk) - Wyłączony przycisk jest nieużywalny i nieklikalny.
  2. Widoczny - Określa czy pole jest widoczne. Jeśli ta właściwość nie jest określona, pole będzie widoczne.
  3. Sposób ukrycia - Określa, w jaki sposób zostanie ukryte pole w przypadku spełnienia warunku ukrycia określonego we właściwości Widoczny.

Zdarzenia i walidacja/Zdarzenia

  1. Klik- Akcja, która zostanie wykonana po naciśnięciu przycisku.
  2. Zmiana elementu - Obsługa zdarzenia zmiany wartości elementu.
  3. Zdarzenia JavaScript - Dodaje zdarzenia, które będą wywoływane w JavaScript.
  4. OnChange - Zdarzenie po stronie serwera wykonywane po zmianie wartości pola tekstowego, zobacz: Definiowanie akcji i zdarzeń z poziomu panelu Właściwości formularza.
  5. Zmiana elementu - Obsługa zadania zmiany elementu relacyjnego.
  6. Usuwanie elementu (w kontrolce Pole danych relacyjnych) - Wsparcie zadania zmiany elementu relacyjnego.
  7. Dodanie elementu (w kontrolce Lista)- Zdarzenie na dodaniu nowego elementu listy.
  8. Usunięcie elementu (w kontrolce Lista) - Zdarzenie przed usunięciem elementu listy.
  9. Typ przeładowania - Określa sposób przesyłania zapytania do serwera:
  • Standard - przeładowanie najbliższego (zgodnie z hierarchią) kontenera asynchronicznego lub całej strony (w przypadku braku kontenera)
  • Zawsze odświeżaj całą stronę - przeładowanie całej strony.
  • Dowolny kontener asynchroniczny - nazwa biznesowa kontenera asynchronicznego (możliwe jest wskazanie kilku kontenerów oddzielonych od siebie nazwami z przecinkiem, średnikiem, dwukropkiem lub spacją).
  • Panel akcji - odświeżenie akcji panelu głównego.

Podstawowe

Poniżej zostały opisane kontrolki z grupy Podstawowe.

image

Obrazek​

Przy pomocy komponentu Obrazek Użytkownik może dodać do formularza obrazek, wybierając go poprzez właściwość Ścieżka do obrazka, a także skonfigurować jego szerokość i wysokość. Jeżeli źródłem obrazka ma być pole ze struktury danych, wówczas należy do struktury danych dodać pole binarne.

  1. Na panelu Właściwości wskaż ze struktury danych pola ze źródłem danych gdzie znajduje się nazwa pliku (pole tekstowe) oraz pole z zawartością pliku (pole binarne).

Obraz 148

ostrzeżenie

Jeżeli w strukturze danych zostało dodane pole binarne, wówczas na formularzu należy je dodać w Mapowaniach startowych, gdyż pole jeszcze nie jest widoczne w strukturze danych formularza.

  1. Przejdź na zakładkę Mapowania startowe, kliknij prawym przyciskiem na polu i wybierz z menu kontekstowego opcję Popraw>Dodaj element.

image

  1. Po wykonaniu akcji pole zostanie dodane do Struktury danych formularza.

Obraz 149

Właściwości

  1. Źródło obrazka - Określa typ źródła obrazu.
  2. Ścieżka obrazka - Określa ścieżkę do obrazu.
  3. Szerokość obrazka - Określa szerokość obrazu.
  4. Wysokość obrazka - Określa wysokość obrazu.
  5. Adres URL nawigacji - możliwość ustawienia adresu URL dla obrazka wtedy obraz działa jak link z możliwością nawigacji pod wskazany adres.
  6. Resetuj ścieżkę - określenie czy ścieżka nawigacji widoczna w pasku nawigacji powinna być zresetowana po kliknięciu (gdy ustawiona jest wartość adresu URL do nawigacji).

Etykieta​

Komponent służy do wyświetlania tekstu, określonego poprzez właściwość Tekst, w podglądzie formularza. Najczęstszym zastosowaniem jest dodanie opisu lub nazwy do pól umieszczanych w formularzu.

Właściwości

  1. Tekst - Tekst, który zostanie wyświetlony.
  2. Czy kodować znaki specjalne? - Koduj encje html za pomocą metody HTMLEncode.
  3. Powiązana kontrolka danych - Relacja używana w precyzowaniu komunikatów walidacyjnych. Komunikat walidacyjny będzie wyświetlał zawartość powiązanej etykiety. Działa tylko w obrębie jednego kontenera.

Pole bitowe/ CheckBox​

Kontrolka prezentująca dane w postaci pola wyboru. Źródłem danych dla kontrolki jest pole logiczne.

Właściwości

  1. Sposób wyświetlania - Sposób wyświetlania kontrolki.
  • Checkbox - Domyślna opcja. Wyświetla kontrolkę jako pole wyboru.
  • DropDownList - Wyświetla kontrolkę jako listę rozwijaną.
  1. Dodatkowy tekst- Dodatkowy tekst wyświetlany.

Pole daty​

Kontrolka umożliwia wprowadzanie daty. Źródłem danych dla kontrolki jest pole typu Data.

Właściwości

  1. Zakres lat wstecz - określa wyświetlany zakres lat wstecz.

  2. Zakres lat do przodu - określa wyświetlany zakres lat do przodu.

  3. Widoczność przycisków

  • Pokaż kalendarz - Widoczność przycisku kalendarza.
  • Ukryj przyciski w trybie tylko do odczytu.

Przykładowo

  1. Jeżeli chcesz aby w kontrolce można było wybrać datę z bieżącego roku, wówczas wprowadź we właściwościach zakresu wartość 0.

image

  1. Klikając w kontrolkę daty na formularzu będzie można wybrać datę jedynie z bieżącego roku.

image

  1. Jeżeli jednak wpiszesz datę bezpośrednio w polu, to będzie można wprowadzić dowolną datę.

image

Aby uniemożliwić wprowadzenie daty spoza określonego czasu należy wprowadzić walidacje. Przykładowo dla pola daty chcemy określić, iż użytkownik może wprowadzić datę bieżącą lub późniejszą z bieżącego roku.

  1. Na panelu Właściwości przejdź do Walidacja dodatkowa i Edytor kolekcji.
  2. Wybierz Dodaj aby zdefiniować walidację.

image

  1. Zdefiniuj wyrażenie. Walidacja 1 sprawdza czy wprowadzona data nie jest wcześniejsza od daty bieżącej.
  2. W tym celu w wyrażeniu użyj porównania czy data wprowadzana na formularzu jest większa bądź równa >= od daty bieżącej DateTimeNow() Dodatkowo datę bieżącą obcinamy do wartości dzień, miesiąc, rok. wykorzystując funkcję DateTrim() Funkcja DateTimeNow() zwraca datę z częścią godziny.
  3. Całość wyrażenia powinna być zdefiniowana w ten sposób: DataUtworzeniaWniosku>=DateTrim(DateTimeNow())
  4. Zaznacz jeszcze opcję wymagalności poprawności walidacji na Tak.

image

  1. Analogicznie dodaj Walidację 2, która będzie sprawdzać czy wprowadzona data mieści się w zakresie do końca roku.
  2. W tym celu w wyrażeniu użyj porównania czy data wprowadzana na formularzu jest mniejsza niż koniec roku. Funkcja DatePart_Year() pobiera z bieżącej daty DateTimeNow() rok i dodaje 1 czyli (2025+1). Całe wyrażenie tworzy datę 1 stycznia kolejnego roku. Date(*DatePart_Year(DateTimeNow()) + 1, 1, 1)

image

Po dodaniu walidacji, gdy użytkownik wprowadzi datę wcześniejszą niż bieżąca lub z roku późniejszego od obecnego i próbie zapisu formularza zostaną wyświetlone odpowiednie komunikaty walidacji.

image

Format danych

To w jakim formacie jest wyświetlana data i czas na formularzu jest uzależnione od tego czy został określony niestandardowy format daty i czasu w pliku konfiguracji aplikacji - patrz: Konfiguracja aplikacji.

Przykładowo, jeżeli format daty został określony w taki sposób jak na poniższym rysunku, wówczas w takim formacie będzie prezentowana data na formularzu.

image

  1. Jeżeli chcesz zastosować inny format daty, wówczas przejdź do Właściwości kontrolki Pole daty i wprowadź Niestandardowy format daty.

image

Pole liczbowe całkowite​

Kontrolka umożliwiająca wprowadzanie wartości w postaci liczb całkowitych. Źródłem danych dla kontrolki jest pole typu Liczba całkowita.

Właściwości

  1. Autouzupełnianie- Opcja określa czy wcześniej wprowadzone wartości mają być zapamiętane i użyte w formie podpowiedzi przy późniejszych uzupełnianiach pola. Dodaj klasę "k-secret-data"do stylu kontrolki.
  2. Wygląd
  • Pokaż spinnery - Pokaż strzałki w górę i w dół.

Pole liczbowe stałoprzecinkowe​

Kontrolka umożliwiająca wprowadzanie wartości w postaci liczb stałoprzecinkowych. Źródłem danych dla kontrolki jest pole typu Liczba stałoprzecinkowa.

Właściwości

  1. Format - Format danych zgodny z Kendo

(https://docs.telerik.com/kendo-ui/framework/globalization/numberformatting). Możliwe opcje:

  • Standardowy nX (separator tysięczny " ", ilość miejsc po przecinku zgodna z ustawieniem pola w strukturze danych),
  • Kwota (c) - (format kwoty "c"),
  • Nistandardowy- ustawiony przez użytkownika w polu Format niestandardowy.
  1. Możesz wybrać niestandardowy format danych i wprowadzić go w polu Format niestandardowy.

image

  1. Autouzupełnianie - Opcja określa czy wcześniej wprowadzone wartości mają być zapamiętane i użyte w formie podpowiedzi przy późniejszych uzupełnianiach pola. Dodaj klasę "k-secret-data"do stylu kontrolki.

Pole tekstowe​

Kontrolka umożliwiająca wprowadzanie tekstu.

Właściwości

  1. Ilość linii - Określa liczbę linii wyświetlanych w polu.
  2. Czy widoczna ilość znaków - Widoczność tekstu określającego ilość możliwych do wprowadzenia znaków.
  3. Czy kontrolka ma maskować znaki - Maskowanie wprowadzonych znaków.
  4. Przycisk ujawniania hasła - opcja dostępna jeżeli wybrano Tak w opcji Czy kontrolka ma maskować znaki - przycisk umożliwia użytkownikowi wyświetlenie całego zamaskowanego hasła.

image

  1. Null jeśli pusta - Kontrolka zwraca NULL zamiast pustego stringa, gdy wartość jest pusta.
  2. Autouzupełnianie - Opcja określa czy wcześniej wprowadzone wartości mają być zapamiętane i użyte w formie podpowiedzi przy późniejszych uzupełnianiach pola. Dodaj klasę "k-secret-data"do stylu kontrolki.
  3. Maksymalna ilość znaków - Określa maksymalną liczbę znaków, które użytkownik może wprowadzić. Jeżeli wartość ta jest nie ustawiona to jest ona określana na podstawie powiązanego pola ze struktury danych.

Pole wyboru​

Kontrolka pola wyboru, której wartości są pobierane z określonego słownika. W strukturze danych musi zostać dodane pole słownikowe, które może być źródłem danych dla kontrolki.

Właściwości

  1. Tryb pracy - określa tryb pracy (drzewo lub lista).
  2. Zachowanie - tryb pracy
  • Wyświetlanie kolekcji - Określa, czy widoczność kolekcji odbywa się rekurencyjnie, czy też widoczne są tylko bezpośrednie dzieci.
  • Auto-szerokość - Szerokość kontrolki będzie dostosowana do długich tekstów na liście.
  • Drzewo - wyłącz śledzenie rozwinięcia - Włączenie tej opcji wyłączy śledzenie rozwiniętych węzłów drzewa.
  • Typ sortowania - określa sposób sortowania elementów słownika. W trybie standardowym elementy słownika będą sortowane według określonej kolejności ale w obrębie swoich typów. W trybie sortowania z pominięciem typów wszystkie elementy słownika niezależnie od typów będą sortowane według kolejności i nazwy. W trybie sortowania alfabetycznego z pominięciem indeksów obiekty słownika będą sortowane alfabetycznie (typ i indeks będą ignorowane).
  • Wybieranie kategorii - Włącza wybór kategorii.
  • Czy wyszukiwanie włączone - Opcja określa, czy w kontrolce możliwe jest wyszukiwanie tekstu.
  • Czy kolekcje zwinięte - Określa czy wyświetlana struktura drzewiasta ma domyślnie zwinięte "Nie" czy rozwinięte "Tak" poszczególne kategorie i widoki.
  • Wspólne - czy lokalizować wartości - Określa czy wyświetlane wartości powinny być lokalizowane.
  1. Wartość pusta
  • Widoczny - Określa, czy dla danego pola istnieje pusta wartość.
  • Tekst - Tekst pustej wartości.
  1. Powiązane dane
  • Komunikat dla wartości nieprawidłowej - Komunikat dla nieistniejącej wartości w słowniku lub na wybranym widoku.
  • Zawężenie do widoku - Umożliwia zawężenie wyświetlanych elementów do tych, które należą do danego widoku.
  • Wyświetlane wartości - Wskazuje, czy będą wyświetlane "Nazwa wyświetlana", "Nazwa", "Opis" czy "Atrybuty pozycji słownika".
  1. Układ i wygląd
  • Maksymalna wysokość - Maksymalna wysokość pola z dostępnymi opcjami (w pikselach).

Możesz określić czy w polu mają być wyświetlane nazwy elementów słownikowych czy opisy elementów lub ich atrybuty.

W poniższym przykładzie na właściwości kontrolki wybrano Wyświetlanie wartości jako Opis. W aplikacji wynikowej w kontrolce wyboru elementu słownikowego prezentowany jest wprowadzony opis elementów słownikowych w strukturze słownikowej.

image

Przycisk​

Kontrolka uruchamia określoną akcję użytkownika. Przyciski i akcje możesz także dodawać na zakładce Akcje patrz: Akcje związane z formularzem. Jeżeli w ten sposób dodasz kontrolkę, wówczas możesz ją umiejscowić w każdym miejscu na formularzu. Dla kontrolki niezbędne jest określenie akcji jaka ma zostać wykonana po naciśnięciu przycisku.

  1. Przejdź na panel Właściwości i do sekcji Klik>Akcja i otwórz Edytor akcji. Więcej o konfigurowaniu akcji przez edytor akcji patrz: Akcje związane z formularzem.

Obraz 150

Właściwości

  1. Identyfikator akcji - Identyfikator używany miedzy innymi w skryptach Javascript.
  2. Tekst przycisku - Tekst, który jest wyświetlany na przycisku.
  3. Ikona przycisku - Ikona, która jest wyświetlana na przycisku.

Kontener​

Kontener to podstawowy komponent, służący do grupowania wybranych elementów w obrębie jednej lub kilku komórek siatki formularza, a przez to dający możliwość wprowadzenia dodatkowego podziału kolumny i wiersza. Domyślnie Kontener składa się z siatki czterech wierszy. Można zwiększyć tę liczbę, jak i szerokość w kolumnach.

Obraz 3

  1. W celu szybkiej zmiany podstawowych właściwości kontenera zaznacz kontrolkę i wybierz przycisk image i w kolejnym oknie zdefiniuj układ, rozmiar, style kontenera, a także układ grupy w obrębie kontenera i nagłówek.

image

  1. Powyższe opcje dostępne są także do zmiany na panelu Właściwości.

image

  1. Podobnie, jak w przypadku całego formularza, w poszczególnych komórkach siatki można lokować tylko jeden element.
  2. Każdy kontener może zawierać w sobie inne kontenery. Formularz można potraktować jako szczególny przypadek kontenera, posiadającego specyficzne właściwości, takie jak np. uprawnienia.
  3. Każdy kontener można przełączyć w asynchroniczny tryb pracy. Służy do tego właściwość Asynchroniczność. Patrz: Zachowanie komponentów formularza.

Właściwości

Zaawansowane

  1. Renderuj tylko zawartość - Ustawienie spowoduje, że renderowana będzie tylko zawartość kontenera, czyli elementy zdefiniowane wewnątrz. Sam kontener nie będzie renderowany.

Asynchroniczność

  1. Czy dołączać nagłówki? - Właściwość zaawansowana. Określa czy podczas wywołania asynchronicznego dołączane są nagłówki strony, np. CSS i JS.
  2. Asynchroniczny - Określa czy kontener może przeładowywać swoją zawartość asynchronicznie.

Informacje podstawowe

  1. Czy zwijalny - Określa czy kontener posiada ikonę umożliwiającą rozwijanie i zwijanie kontenera.
  2. Nagłówek- Nagłówek kontenera.

Różne

  1. Układ kontenera - Układ kontenera (tylko w trybie projektowania). Wpływa na szerokość kontrolek przeciągniętych z przybornika.
  2. Układ grupy - Układ grupy formularza (tylko w trybie projektowania). Wpływa na orientację grupy kontrolek przeciągniętych z przybornika.

Możesz zmieniać tło kontenera i ustawić własne grafiki/ikony, więcej patrz: Ustawianie tła kontenerów.

Kontener flow​

Kontener (flow) pozwala na dodawanie elementów „obok siebie” – nie ma żadnej siatki rozgraniczającej poszczególne kontrolki ani podziału na wiersze i kolumny. O finalnym sposobie rozmieszczenia poszczególnych pól na wyświetlanym formularzu decyduje ich szerokość (gdy nie mieszczą się w jednej linii, są przenoszone do następnej).

image

  1. W celu szybkiej zmiany podstawowych właściwości kontenera zaznacz kontrolkę, wybierz przycisk image i w kolejnym oknie zdefiniuj układ, rozmiar, style kontenera a także układ grupy w obrębie kontenera i nagłówek.

image

  1. Powyższe opcje dostępne są także do zmiany na panelu Właściwości.

image

Możesz definiować style dla kontenera flow analogicznie jak w przypadku zwykłego kontenera takie jak: Kolor tła, Kolor nagłówka, Tło nagłówka, Podświetlenie, Wypełnienie, Marginesy a także Efekt najechania kursorem oraz Kolor tła po najechaniu kursorem - patrz: Style kontenera.

Dodatkowo dla kontenera flow możesz ustawić opcje:

Układ i Odstępy:

  1. Układ Poziomy (elementy wyświetlane są jeden obok drugiego). Dodatkowo w poniższym przykładzie zastosowano Odstępy Średnie między elementami kontenera.

image

  1. Układ Poziomy przestrzenny (przy tym układzie będą takie same odstępy pomiędzy elementami kontenera). Obiekty wewnątrz kontenera zostaną oddzielone od siebie tak aby zajęły cały dostępny obszar kontenera flow. W poniższym przykładzie przy układzie przestrzennym, zdefiniowanie odstępów nie ma wpływu na wyświetlenie elementów kontenera.

image

  1. Układ Pionowy (elementy wyświetlane są jeden pod drugim). Możesz definiować wielkość odstępów między elementami.

image

  1. Układ Responsywny umożliwia dostosowanie układu elementów kontenera do wyświetlania na urządzeniach mobilnych.

  2. Wyrównanie - możesz wymusić wyrównanie elementów kontenera do prawej lub lewej strony formularza.

Właściwości

  1. Czy zwijalny - Określa czy kontener posiada ikonę umożliwiającą rozwijanie i zwijanie kontenera.
  2. Nagłówek- Nagłówek kontenera.

Asynchroniczność

  1. Czy dołączać nagłówki? - Właściwość zaawansowana. Określa czy podczas wywołania asynchronicznego dołączane są nagłówki strony, np. CSS i JS.
  2. Asynchroniczność - Określa czy kontener może przeładowywać swoją zawartość asynchronicznie.

Różne

  1. Układ grupy - Układ grupy formularza (tylko w trybie projektowania). Wpływa na orientację grupy kontrolek przeciągniętych z przybornika.

Układ i wygląd

  1. Orientacja układu - Określa, czy elementy powinny być wyświetlane w orientacji pionowej czy poziomej.

Podformularz​

Komponent Podformularz służy do osadzenia innego formularza, znajdującego się na serwerze wersji. W tym celu należy wskazać sposób określania formularza, który chcemy wyświetlić (właściwość Sposób określania).

Struktura danych dla podformularza:

  1. może być tożsama ze strukturą formularza macierzystego, wówczas pole Ścieżka do struktury podformularza ma wartość pustą,

image

  1. podformularz korzysta z innej struktury (wskazujemy ją poprzez właściwość Ścieżka do struktury podformularza) niż struktura związana z formularzem macierzystym, jest to możliwe dla dwóch przypadków:
  • struktura macierzystego formularza zawiera listę wskazującą na strukturę podformularza, w której jest pole typu Relacja do innej struktury,
  • struktura macierzystego formularza zawiera pole typu Relacja do innej struktury, wskazujące na strukturę danych podformularza.

image

Aby wykonać akcje na elemencie podformularza, można w nim umieścić Przycisk akcji, dostępny w Przyborniku. Przycisk będzie widoczny w formularzu macierzystym i udostępni odpowiednią akcję w kontekście danych zawartych na podformularzu.

Obraz 5

  1. W celu szybkiej zmiany podstawowych właściwości kontrolki Podformularz zaznacz kontrolkę i wybierz przyciskimage, w kolejnym oknie zdefiniuj ścieżkę do struktury podformularza, podformularz, rozmiar i renderowanie zawartości.

image

Zakładki​

Komponent Zakładki pozwala wprowadzić na formularz dowolną ilość kontenerów, pomiędzy którymi użytkownik przechodzi klikając na poszczególne zakładki – każdej zakładce odpowiada osobny kontener, w którym można, w siatce złożonej z wierszy i kolumn, umieszczać dowolne elementy formularza.

  1. Dodawać kolejne (lub usuwać istniejące) zakładki oraz konfigurować je można poprzez właściwość Zakładki i Edytor kolekcji. Każda z zakładek ma określone unikalne, w obrębie komponentu Zakładki, właściwości Nazwa oraz Tekst.

Obraz 9

  1. Istnieje również możliwość określenia opcjonalnej, wyświetlanej ikony w zakładce a we właściwości Sposób wyświetlania możliwe jest określenie kierunku, w jakim będą wyświetlane zakładki.

Obraz 8

  1. Kontrolka Zakładka zbudowana jest z kontenera zatem w celu szybkiej zmiany podstawowych właściwości kontrolki Zakładki zaznacz kontrolkę i wybierz przyciskimage, w kolejnym oknie zdefiniuj układ, rozmiar, style kontrolki, a także układ grupy w obrębie kontrolki i nagłówek. Są tutaj te same opcje do zmiany jak w przypadku zwykłego kontenera.

image

  1. Kolejne właściwości części kontrolki dostępne są na panelu Właściwości jeżeli zaznaczysz kontrolkę razem z pomarańczowym tłem.

image

  1. Ogólne właściwości dla kontrolki Zakładka dstępne są na panelu Właściwości jeżeli zaznaczysz cały obszar kontrolki. Dodatkowo możesz dodać lub usunąć zakładki.

image

Właściwości

Asynchroniczność

  1. Asynchroniczny - Określa czy kontener może przeładowywać swoją zawartość asynchronicznie.
  2. Czy dołączać nagłówki? - Zaawansowana właściwość. Określa czy podczas asynchronicznego wywołania dołączane są nagłówki strony, np. CSS i JS.

Informacje podstawowe

  1. Zakładki- Otwiera okno edytora kolekcji TabPage, które umożliwia dodawanie, usuwanie i edycję zakładek.
  2. Sposób wyświetlania - Określa sposób wyświetlania zakładek (poziomo lub pionowo).
  3. Czy zwijalny - Określa czy kontrolka posiada ikonę umożliwiającą rozwijanie i zwijanie kontrolki.
  4. Nagłówek- Nagłówek zakładek.

Asynchroniczność zakładek

  1. Ładowanie list - Opcja sterująca ładowaniem list znajdujących się w kontenerze z zakładkami. Możliwe opcje to:
  • Ładuj wszystkie listy asynchronicznie - listy z nieaktywnych zakładek są ładowane podczas aktywacji zakładki,
  • Nie ingeruj w ładowanie list - użytkownik sam określa czy lista jest tworzona i wypełniana danymi,
  • Ładuj na starcie tylko listy wyświetlane za pierwszym razem - listy wyświetlane po raz pierwszy są ładowane od razu, pozostałe są ładowane nie wcześniej niż podczas aktywacji zakładki.
  1. Ładowanie zakładek - Określa sposób ładowania zawartości zakładek.

Możesz zmieniać tło kontenera, który wchodzi w skład budowy kontrolki i ustawić własne grafiki/ikony, więcej patrz: Ustawianie tła kontenerów.

Lista​

Zadaniem komponentu jest wyświetlanie listy elementów biznesowych, przechowywanych w strukturze danych, do której referuje pole typu Lista (pole umieszczone w macierzystej strukturze danych formularza).

Obraz 73

Można zdefiniować:

  1. wyświetlanie przycisków Dodaj i Usuń - umożliwia to właściwość Przyciski - dodatkowo możesz określić położenie przycisków,
  2. możliwa jest zmiana tekstu, który jest widoczny na stronie WWW, na przyciskach listy Dodaj i Usuń,
  3. konieczność dodatkowego potwierdzenia chęci usunięcia elementu powtarzalnego.

Jeżeli lista znajduje się na formularzu, wywołanym przez użytkownika w kontekście dodawania nowego elementu danych biznesowych, nie będzie prawidłowo funkcjonować dopóki użytkownik nie zapisze danych.

Obraz 79

  1. W celu szybkiej zmiany podstawowych właściwości kontrolki Lista zaznacz kontrolkę i wybierz przyciskimage.

image

  1. Możesz wybrać:
  • tryb działania listy: Normal - standardowy tryb działania listy,

  • Accordion - tryb listy rozwijalnej

  • Tabs - kolejne elementy listy wyświetlane są w formie zakładek:

  • wskazać element powtarzalny listy, rozmiar kontrolki, dodatkowe style, nagłówek oraz skonfigurować wyświetlanie przycisków Dodaj i Usuń.

Powyższe opcje dostępne są także do zmiany na panelu Właściwości.

image

ostrzeżenie

Jeżeli w strukturze danych zostało dodane pole typu Lista, wówczas na formularzu należy ją dodać w Mapowaniach startowych, gdyż lista jeszcze nie jest widoczna w strukturze danych formularza.

  1. Przejdź na zakładkę Mapowania startowe kliknij prawym przyciskiem na liście i wybierz z menu kontekstowego opcję Popraw>Dodaj element.

image

  1. Po wykonaniu akcji, lista zostanie dodana do Struktury danych formularza.

Obraz 155

Właściwości

Asynchroniczność

  1. Czy dołączać nagłówki? - Zaawansowana właściwość. Określa czy podczas asynchronicznego wywoływania dołączane są nagłówki strony, np. CSS i JS.
  2. Asynchroniczny- Określa czy kontener może przeładowywać swoją zawartość asynchronicznie.

Informacje podstawowe

  1. Tryb działania listy - Określa tryb pracy listy - normalny lub tryb komentarzy (możliwość edycji tylko własnych, nie zapisanych wpisów), tryb zakładek i tryb akordeonu.
  2. Tryb usuwania elementu - Tryb usuwania elementów (usunięcie lub odpięcie).
  3. Potwierdzenie przy usuwaniu - Definiuje czy po naciśnięciu przycisku usuwania pojawia się okno potwierdzenia.
  4. Czy zwijalny - Określa czy lista posiada ikonę umożliwiającą rozwijanie i zwijanie listy.
  5. Nagłówek - nagłówek listy.
  6. Tekst, gdy lista pusta: - Określa tekst dla pustej listy.
  7. Pierwszy wiersz nagłówkowy - Pierwszy wiersz kontenera (powtarzającego się elementu listy) będzie traktowany jako nagłówek listy. Zostanie wyświetlony tylko RAZ - dla pierwszego elementu listy powtarzającej się (następnie zostanie pominięty dla innych elementów).
  8. Warunek na usunięcia elementu - Warunek sprawdzany podczas próby usunięcia elementu listy powtarzalnej.
  9. Komunikat o niemożliwości usunięcia elementu - Komunikat, że elementu nie można usunąć.

Powiązane dane

  1. Element powtarzalny - Wskazuje element, który będzie powtarzany na liście.
  2. RowId - właściwość określa tryb pracy kontrolki i sposób identyfikowania wierszy listy. Można określić identyfikację wierszy poprzez kolejność - opcja Ordinal, poprzez kolejność wraz z wykrywaniem wszelkich naruszeń danych – opcja OrdinalOrReset, poprzez element Id z listy – opcja ElementId.

image

Przyciski

  1. Dodaj / Usuń
  • Widoczny - Określa czy przycisk jest widoczny czy nie.
  • Tekst - Tekst na przycisku, który dodaje/usuwa element.
  • Podpowiedź - Tooltip, który pojawia się po najechaniu kursorem myszy na i przycisk akcji.
  • Ikona - Ikona dla przycisku na liście.
  • Położenie - Określa położenie przycisku względem wiersza (W nagłówku wiersza - w nagłówku elementu powtarzalnego).
  • Style - Style dla przycisku. Wybrane style łączą się.

Możesz zmieniać tło kontenera, który wchodzi w skład budowy kontrolki i ustawić własne grafiki/ikony, więcej patrz: Ustawianie tła kontenerów.

Lista (plik .list)​

Za pomocą tego typu elementu możemy na formularzu osadzić i wyświetlić dowolną, wcześniej utworzoną listę.

  1. Listę, wyświetlaną w obrębie formularza, można powiązać z danymi wyświetlanymi na formularzu, przy pomocy właściwości filtra @Parent Dzięki temu, elementy wyświetlane na liście będą dodatkowo przefiltrowane pod kątem zadanej relacji. Więcej o filtrowaniu patrz: Filtry predefiniowane w zapytaniu SQL.

Obraz 100

  1. W celu szybkiej zmiany podstawowych właściwości kontrolki Lista (plik.list) zaznacz kontrolkę i wybierz przyciskimage

image

Właściwości

  1. Renderuj tylko zawartość - Ustawienie spowoduje, że renderowana będzie tylko zawartość kontenera, czyli elementy zdefiniowane wewnątrz. Sam kontener nie będzie renderowany.
  2. Wyświetlana lista - Lista, która będzie wyświetlana.

Lista z podglądem

  1. Czy wyświetlać formularz podglądu - Pozwala na wyświetlenie formularza podglądu wybranego rekordu z listy w kontrolce podglądu.
  2. Nazwa kontrolki AjaxPageLoader - Nazwa kontrolki, w której będzie wyświetlany podgląd formularza.
  3. ID formularza do podglądu - Formularz, który zostanie wyświetlony w podglądzie.

Lista pionowa​

Podobnie jak dla elementu Lista, zadaniem komponentu Lista pionowa jest wyświetlanie listy elementów biznesowych, przechowywanych w strukturze danych.

  1. Elementy listy pionowej wyświetlane są w kolejnych kolumnach – pionowo obok siebie, a nie w wierszach ustawionych jeden pod drugim – tak, jak w przypadku komponentu Lista.
  2. Szerokość pól dla pojedynczego elementu listy dopasowuje się do liczby elementów listy (które wyświetlane są w kolumnach w jednym rzędzie, jeden obok drugiego), dlatego podczas projektowania listy pionowej, należy wziąć pod uwagę ilość elementów listy, jakie będą wyświetlane.

image

  1. W celu szybkiej zmiany podstawowych właściwości kontrolki Lista pionowa zaznacz kontrolkę i wybierz przyciskimage

image

  1. Powyższe opcje dostępne są także do zmiany na panelu Właściwości.

image

Informacje podstawowe

  1. Czy zwijalny - Określa czy kontrolka posiada ikonę umożliwiającą rozwijanie i zwijanie kontrolki.
  2. Nagłówek - nagłówek listy.

Układ i wygląd

  1. Szerokość elementu powtarzalnego - Określa szerokość (w kolumnach) zajmowaną przez pojedynczy element powtarzalny.

Asynchroniczność

  1. Czy dołączać nagłówki? - Zaawansowana właściwość. Określa czy podczas asynchronicznego wywoływania dołączane są nagłówki strony, np. CSS i JS.
  2. Asynchroniczny- Określa czy kontener może przeładowywać swoją zawartość asynchronicznie.
wskazówka

Lista pionowa prezentuje dane tylko w trybie do odczytu i nie posiada przycisków Dodaj i Usuń, umożliwiających dodawanie/usuwanie elementów z listy jak w przypadku zwykłej kontrolki Lista.

Możesz zmieniać tło kontenera, który wchodzi w skład budowy kontrolki i ustawić własne grafiki/ikony, więcej patrz: Ustawianie tła kontenerów.

Grupa​

Kontener grupujący kontrolki na formularzu.

  1. Jeżeli przeciągniesz pola z panelu Struktura danych formularza wówczas są one od razu umieszczone w grupie wraz z etykietą i kontrolką Podsumowanie walidacji.

Obraz 104

  1. Zaznacz kontrolkę Grupa i wybierz opcję zmiany układu lub rozmiaru.

image

Edytor tekstu​

Kontrolka umożliwia formatowanie tekstu (czcionka, rozmiar czcionki, pogrubienie, wyrównanie itp.).

image

W zależności od wybranego trybu kontrolki pozwala ona:

  1. na edycję tekstu sformatowanego (tryb edycji) – wówczas pokazuje się kontrolka ze wszystkimi opcjami edycyjnymi,
  2. na jego wyświetlanie (włączony tryb „tylko do odczytu”) – prezentowana jest wyłącznie zapisana treść.

image

Właściwości

  1. Wysokość - Wysokość edytora w pikselach.
  2. Możliwość zmiany rozmiaru - Wyświetla uchwyt zmiany rozmiaru.

Kalendarz​

Kontrolka harmonogramu zadań może być zasilana danymi zdarzeń z dowolnej listy zdefiniowanej w systemie i umożliwia konfigurację obsługi zdarzeń kalendarza.

image

Na panelu Właściwości możesz określić parametry kontrolki:

Zachowanie

  1. Domyślny widok: dzień, tydzień , miesiąc, możliwość pokazania lub ukrycia poszczególnych przycisków, określenie początku i końca dnia roboczego.
  2. Pokaż przycisk widoku dnia
  3. Pokaż przycisk widoku tygodnia
  4. Pokaż przycisk widoku miesiąca
  5. Pokaż opcje eksportu do pdf
  6. Pokaż godziny pracy - Jeśli opcja jest włączona, pokazywane będą tylko ustawione godziny pracy. Domyślnie widok jest wyświetlany w trybie całodziennym.
  7. Początek dnia pracy - Ustawia godzinę początku dnia pracy dla opcji Pokaż godziny pracy.
  8. Koniec dnia pracy - Ustawia godzinę końca dnia pracy dla opcji Pokaż godziny pracy.

Źródło danych

  1. Lista zasilająca - Lista, której wyniki będą wyświetlane w kontrolce.
  2. Data początku wydarzenia - Źródło danych dla daty rozpoczęcia zdarzenia.
  3. Data końca wydarzenia - Źródło danych dla daty zakończenia zdarzenia.
  4. Tytuł wydarzenia - Źródło danych dla tytułu wydarzenia.

Zdarzenia i walidacja

Możliwość określenia akcji, która zostanie wykonana po wykonaniu określonego zdarzenia na kontrolce.

  1. Kliknięcie edycji - Zdarzenie wywołane w momencie kliknięcia edycji.
  2. Kliknięcie kasowania - Zdarzenie wywoływane po kliknięciu kasowania.
  3. Kliknięcie nowego - Zdarzenie wywoływane przy tworzeniu nowego wydarzenia.
  4. Przesunięcie zdarzenia - Zdarzenie wywoływane po przesunięciu zdarzenia.
  5. Zmiana rozmiaru - Zdarzenie wywoływane po zmianie rozmiaru wydarzenia.

Układ i wygląd

  1. Wysokość - Przykłady poprawnych wartości to '1px' i '5in' (em, ex, %, px, cm, mm, in, pt, pc).
  2. Adaptacyjna wysokość slotu - Włączenie opcji powoduje dostosowanie wysokości slotu do zdarzeń, które się w nim znajdują. Działa tylko z widokiem miesiąca.
  3. Ilość zdarzeń dla dnia - Określa ile wydarzeń może być wyszczególnionych dla danego dnia. Jeżeli dla danego dnia jest więcej wydarzeń, na dole slotu dziennego zostanie umieszczony link "więcej", po kliknięciu którego nastąpi przejście do widoku dziennego. Działa tylko z widokiem miesiąca.
  4. Kolor zdarzenia - można określić kolor dla wydarzeń (zapisując kolor z palety RGB w formacie HEX).

image

Dla przykładu:

W poniższym przypadku zostanie opisane jak skonfigurować kontrolkę kalendarza aby móc obsłużyć funkcjonalność rejestrowania zdarzeń.

  1. Dodaj strukturę danych, która zawiera podstawowe dane dotyczące zdarzenia (nazwa, data wraz z godziną rozpoczęcia i zakończenia).

image

  1. Stwórz listę opartą o strukturę danych Zdarzenia.

image

  1. Stwórz formularz oparty o strukturę danych Zdarzenie. Przeciągnij z przybornika kontrolki na formularz i dodaj przycisk Zapisz na panelu Akcje. Ten formularz będzie wykorzystywany do definiowania nowego zdarzenia jego czasu rozpoczęcia oraz zakończenia.

image

  1. Dodaj kolejny formularz, na którym osadzona będzie kontrolka Kalendarza. Formularz nie musi być oparty o żadną strukturę danych.
  2. Przeciągnij kontrolkę Kalendarz na formularz.
  3. Na panelu Właściwości wskaż listę zasilającą dla kontrolki czyli jest to lista Zdarzenia.

image

  1. Określ właściwość Data początku wydarzenia. Wybierz sposób określenia jako Wyrażenie i przejdź do edytora wyrażeń.
  2. Następnie przejdź na drzewo danych List, czyli do listy, która zasila kontrolkę.
  3. Wybierz pole Z_ROZPOCZECIE dwuklikiem lub przeciągnij na okno definiowania wyrażenia.

image

  1. Wykonaj analogiczne operacje w opcji Data końca wydarzenia oraz Tytuł wydarzenia. image

Konfiguracja dodawania nowego zdarzenia

  1. Zdefiniuj zdarzenia dla kontrolki kalendarza. Kliknij dwukrotnie w kontrolkę a zostaniesz przekierowany na zakładkę Akcje i sekcję definiowania akcji w wyniku zdarzenia dla kontrolki.
  2. W sekcji Kliknięcie nowego przenieś z serwera wersji formularz Nowe zdarzenie. Po kliknięciu na kalendarzu w wybranym miejscu będzie otwierany wskazany formularz oraz możliwość wprowadzenia danych zdarzenia.
  3. Dodaj jeszcze sposób otwarcia elementu jako Okno popup i odświeżanie całej strony.

image

  1. Aby otworzyć okno definiowania zdarzenia w kontekście danej godziny, z której otwieramy formularza należy przekazać do formularza parametry.
  2. Zaznacz akcję Przejdź na formularz i przejdź do właściwości Parametry.

image

  1. Zdefiniuj parametry, które chcesz przekazać. W tym przypadku jest to początek i koniec zdarzenia. W oknie Lista parametrów dodaj 2 parametry typu Data i czas.
  2. Nadaj nazwy parametrów START i KONIEC.
  3. W sekcji Wartość wybierz jako sposób określenia Wyrażenie i przejdź do edytora wyrażeń.
  4. Z drzewka CTL wybierz dla opcji START właściwość kontrolki CurrentEventStartDate.
  5. Analogicznie dla opcji KONIEC wybierz właściwość CurrentEventEndDate.
  6. Na drzewku CTL znajdują się wszystkie parametry, funkcje i metody obsługi danej kontrolki.

image

  1. Przejdź na formularz Nowe zdarzenie, na zakładkę Mapowanie startowe, gdzie zasilimy strukturę poprzez zdefiniowane wcześniej parametry, dzięki czemu przypiszemy konkretne wartości dla pól rozpoczęcia i zakończenia zdarzenia.
  2. Dodaj z menu kontekstowego adnotację Wyrażenie do pola Rozpoczecie. Użyj funkcji FormParam, a następnie GetParamDateTime w celu pobrania parametru. W nawiasie oraz w " " wprowadź dokładną nazwę parametru, taką jaką wprowadzałeś w poprzednim formularzu.
  3. Wykonaj analogiczne operacje dla pola Zakonczenie.

image

  1. Teraz po przejściu do kalendarza i kliknięciu w daną godzinę zostanie wyświetlone okno definiowania zdarzenia z domyślną datą i czasem rozpoczęcia i zakończenia zdarzenia. Domyślnie czas zdarzenia jest ustawiany na pół godziny.

image

  1. Aby zmienić domyślne ustawienie trwania zdarzenia przejdź do wyrażenia do pola Zakonczenie. Zmień wyrażenie wykorzystując funkcję AddSeconds, następnie dodaj sekundy do daty rozpoczęcia zdarzenia czyli do pobieranego parametru START. W tym przypadku dodawane jest 3600 sekund czyli zdarzenie domyślnie trwa godzinę.

image

Konfiguracja edycji zdarzeń

Stwórz formularz, który będzie obsługiwał edycję danego zdarzenia.

  1. Możesz skopiować formularz do definiowania zdarzenia dodając mu do nazwy Edycja.
  2. Usuń wszystkie mapowania z zakładki Mapowania startowe.

image

  1. Przejdź na formularz, w którym jest kontrolka kalendarza.
  2. Przeciągnij formularz edycji na zdarzenie na kontrolce kalendarza Kliknięcie edycji.

image

  1. Należy przekazać identyfikator elementu danych, w kontekście których ma zostać otwarty formularz do edycji zdarzenia, czyli identyfikator klikniętego zdarzenia.
  2. Przejdź na właściwości akcji i w opcji Przekazywany klucz/ identyfikator wybierz Identyfikator elementu.
  3. W sekcji Identyfikator elementu wybierz sposób określenia jako wyrażenie i w edytorze wyrażeń z drzewka CTL wskaż opcję CurrentEventId.

image

Konfiguracja usuwania zdarzenia

Usuwanie elementu wykonywane jest poprzez mapowanie, gdzie najpierw należy doczytać odpowiedni rekord, a następnie wskazać id elementu, który ma zostać usunięty.

  1. Na formularzu gdzie osadzona jest kontrolka kalendarz przejdź na zdarzenie Kliknięcie kasowania i dodaj akcję Wykonaj mapowanie.

image

  1. Kliknij dwukrotnie w akcję i przejdź do mapowania akcji.
  2. Dodaj rekord jednokrotny RekordDoUsuniecia.
  3. Wybierz z menu kontekstowego adnotację Zapytanie do modelu danych.

image

  1. Wybierz tabelę z bazy danych, do której chcesz wykonać zapytanie. W tym przypadku jest to struktura Zdarzenie.

image

  1. Dodaj adnotację wyrażenia do pola Id i w wyrażeniu wskaż z drzewka CTL CurrentEventId.

image

  1. Wykonaj operację usunięcia na dodanym rekordzie. Kliknij w rekord i z menu kontekstowego wybierz Usuń.

image

  1. Po wykonaniu akcji zostanie wyświetlone okno dialogowe z zapytaniem czy chcemy usunąć wszystkie wykonane operacje dotyczące rekordu. Wybierz Nie, gdyż chcemy usunąć rekord, a nie operacje.

image

  1. W kolejnym oknie dialogowym wybierz Tak. Tutaj następuje usunięcie rekordu. Wszystkie operacje są nadal zachowane na drzewie operacji.

image

  1. Zaznacz operację usunięcia na drzewie operacji i na panelu Właściwości wybierz Tak w opcji Zniszcz w kontekście co oznacza, że rekord zostanie usunięty z bazy danych.

image

  1. Ostatnim elementem jest ustawienie właściwości zapisu na akcji Wykonaj mapowanie i odświeżenie danych. Jeżeli wykonujemy operacje mapowań jak w przypadku usuwania rekordu musimy jeszcze je zapisać.
  2. Aby odświeżyć formularz wybierz opcję Restart całego formularza.

image

  1. Teraz przy danym zdarzeniu będzie można użyć opcji usunięcia zdarzenia.

image

Konfiguracja przenoszenia zdarzenia

Podobnie jak przy usuwaniu elementu, przenoszenie zdarzenia także konfigurowane jest poprzez mapowanie.

  1. Dodaj akcję wykonania mapowania do zdarzenia Przesunięcie zdarzenia.
  2. Ustaw parametry na panelu Właściwości w sekcji Powoduje zapis i Odświeżanie danych (jak przy akcji usuwania).

image

  1. Ponieważ część operacji jest analogiczna jak podczas definiowania usuwania zdarzenia, wówczas można skopiować te operacje i wykorzystać w mapowaniach akcji przesunięcia.
  2. Przejdź na mapowanie akcji usunięcia zdarzenia, zaznacz i skopiuj wszystkie operacje.
  3. Przejdź dwuklikiem do mapowania akcji w zdarzeniu przesunięcie i wklej operacje na drzewie operacji.

image

  1. Usuń ostatnią operację Usunięcie elementu... i zmień nazwę rekordu.

image

  1. Przed zapisem danych należy przekazać nowe wartości do pól rozpoczęcia i zakończenia zdarzenia.Te wartości także są przechowywane na drzewku CTL, które definiują parametry kontrolki kalendarza.
  2. Na mapowaniu akcji dodaj wyrażenie do pól i wybierz opcję z drzewka CTL CurrentEventStartDate i CurrentEventEndDate.

image

Konfiguracja zmiany rozmiaru zdarzenia

Podobnie jak przy usuwaniu i przenoszeniu elementu, zmiana rozmiaru zdarzenia także konfigurowane jest poprzez mapowanie.

  1. Dodaj akcję wykonania mapowania do zdarzenia Zmiana rozmiaru.
  2. Ustaw parametry na panelu Właściwości w sekcji Powoduje zapis i Odświeżanie danych (jak przy akcji usuwania i przenoszenia).

image

  1. Tutaj także część operacji jest analogiczna jak podczas definiowania przesunięcia zdarzenia, wówczas można skopiować te operacje i wykorzystać w mapowaniach akcji zmiany rozmiaru.
  2. Przejdź na mapowanie akcji przesunięcia zdarzenia, zaznacz i skopiuj wszystkie operacje.
  3. Przejdź dwuklikiem do mapowania akcji w zdarzeniu zmiany rozmiaru i wklej operacje na drzewie operacji.
  4. Zmień nazwę rekordu.

image

  1. Teraz po najechaniu na dane zdarzenie będzie możliwość jego zwiększenia lub zmniejszenia.

image

Drzewko​

Kontrolka prezentująca dane w postaci drzewa.

  1. Dla kontrolki niezbędne jest określenie poziomów drzewka oraz listy z danymi.
  2. Przejdź do edytora kolekcji na panelu Właściwości. W edytorze kolekcji wybierz Dodaj.

Obraz 105

  1. Możesz także określić tryb działania drzewka. Dostępne są 2 tryby: rekurencyjny, gdzie ostatni zdefiniowany poziom jest powtarzany, oraz normalny, gdzie mamy zdefiniowaną liczbę poziomów.

Obraz 109

Informacje podstawowe

  1. Zawijaj tekst - Włączenie opcji spowoduje zwijanie długich opisów liści drzewa.
  2. Wyłącz śledzenie rozwinięcia - Włączenie tej opcji spowoduje wyłączenie śledzenia rozwiniętych węzłów drzewa.
  3. Poziomy drzewka - Lista poziomów drzewa.
  4. Tryb działania drzewka - Dostępne są dwa tryby. Tryb rekurencyjny, w którym powtarzany jest ostatnio zdefiniowany poziom, oraz tryb normalny, w którym definiuje się ilość poziomów.
  5. Tryb działania akcji - Tryb określający, czy akcje współpracują z węzłami ostatniego poziomu drzewa lub każdego poziomu drzewa.

Przykład wykorzystania i konfiguracji kontrolki Drzewko

  1. W systemie została stworzona struktura danych oddziału wraz z listą pracowników.

image

  1. Struktura pracownika oddziału posiada relację do struktury oddział.

image

  1. Przykładowy formularz ze szczegółami danego oddziału i definiowaniem pracowników oddziału może wyglądać następująco:

image

  1. Kolejno stwórz listę oddziałów. Poniżej przykładowa lista z oddziałami.

image

  1. Stwórz kolejną listę prezentującą pracowników przypisanych do danego oddziału. W zapytaniu możesz wykorzystać filtr @Parent który wstawia id obiektu nadrzędnego. Tym samym na liście zostaną wyświetleni tylko ci pracownicy, którzy są przypisani do danego oddziału.
  2. Stworzoną listę możesz umieścić na formularzu szczegółów danego oddziału.

image

  1. Wykorzystując kontrolkę Drzewko możesz zaprezentować dane w inny sposób. Przejdź do definiowania poziomów drzewka we właściwości Poziomy drzewka.

image

  1. Zdefiniuj pierwszy poziom drzewka. Zaznacz opcję Tak we właściwości Czy ma dzieci (drzewko jest dwupoziomowe i prezentuje oddziały i pracowników przypisanych do oddziału). Wskaż listę, która będzie zasilać kontrolkę - tutaj jest to stworzona wcześniej lista oddziałów.
  2. Kolejno zdefiniuj Tekst węzła. Może być to stały tekst lub wartość określona poprzez wyrażenie jak w poniższym przypadku.
  3. Przejdź do definiowania wyrażenia i wybierz z drzewka List pole O_NAZWA Na węźle kontrolki będzie wyświetlana odpowiednia nazwa oddziału.

image

  1. Pierwszy zdefiniowany poziom drzewka wygląda następująco:

image

  1. Zdefiniuj drugi poziom drzewka.
  2. W tym przypadku listą zasilającą będzie lista pracowników w danym oddziale. Jako tekst węzła także wykorzystano wyrażenie, w którym zdefiniowano aby prezentować imię i nazwisko pracownika.
  3. We właściwości Czy ma dzieci wybierz Nie gdyż nie ma już kolejnych poziomów drzewka.

image

  1. Kontrolka ze zdefiniowanymi 2 poziomami wygląda następująco:

image

Kontrolka html​

Kontrolka umożliwia wyświetlenie wprowadzonych znaczników html.

Obraz 107

Obraz 108

Kontrolka podglądu​

Kontrolka wyświetlająca szczegółowe informacje o wybranym rekordzie z listy.

  1. Kontrolkę używamy razem w połączeniu z kontrolką wyświetlającą listę.
  2. Przeciągnij na obszar roboczy kontrolkę Lista (plik.list) i wskaż we właściwościach listę do wyświetlenia.
  3. Przeciągnij kontrolkę podglądu i umieść ja obok kontrolki z listą.
  4. Na właściwościach kontrolki z listą wybierz opcję Tak w polu Czy wyświetlać formularz podglądu.
  5. Następnie wprowadź nazwę kontrolki podglądu w tym wypadku jest to: Kontrolka podglądu i wskaż formularz, który będzie wyświetlanych w ramach podglądu rekordu z listy.

Obraz 123

Teraz po kliknięciu na dany rekord na liście w miejscu gdzie jest Kontrolka podglądu (tutaj z prawej strony formularza) będzie wyświetlany formularz podpięty do podglądu rekordu.

Obraz 125

Pasek postępu​

Kontrolka pokazuje postęp wykonywania operacji. Niezbędne jest określenie pola ze struktury danych jako źródła dla kontrolki.

Obraz 110

  1. Dodatkowo możesz określić wartość maksymalną i minimalną a także orientację i pozostałe dane umożliwiające konfigurację graficzną kontrolki.

Obraz 111

Ustawienia

  1. Typ - Typ kontrolki (wartość, procent, fragment).
  2. Pokaż status - Pokaż status kontroli.
  3. Wartość minimalna
  4. Wartość maksymalna
  5. Orientacja - Orientacja pozioma lub pionowa.
  6. Rewers - Odwrócenie wartości.
  7. Nagłówek
  8. Kolor - kolor paska postępu

Podgląd danych binarnych​

Komponent umożliwia podgląd plików zapisanych w ramach struktury danych.

  1. Aby skonfigurować wyświetlanie używamy dwóch właściwości Nazwa pliku i Zawartość pliku.

Obraz 126

  1. Standardowo, przez podgląd danych binarnych można wyświetlać pliki PDF, pliki graficzne czy też dokumenty tekstowe. Można użyć kontrolki razem z kontrolką Wybór pliku, przez co będzie można wyświetlić zawartość załączonego pliku. Więcej o kontrolce do załączania danych binarnych patrz: Wybór pliku.

Obraz 128

Właściwości

  1. Tekst zastępczy - Tekst wyświetlany, w przypadku braku pliku.
  2. Wysokość - Przykładami prawidłowych wartości jednostek są '1px' i '.5in' (em, ex, %, px, cm, mm, in, pt, pc).
ostrzeżenie

Jeżeli w strukturze danych zostało dodane pole binarne, wówczas na formularzu należy je dodać w Mapowaniach startowych, gdyż pole jeszcze nie jest widoczne w strukturze danych formularza.

  1. Przejdź na zakładkę Mapowania startowe, kliknij prawym przyciskiem na polu i wybierz z menu kontekstowego opcję Popraw>Dodaj element.

image

  1. Po wykonaniu akcji pole zostanie dodane do Struktury danych formularza.

Obraz 158

Podsumowanie walidacji​

Kontrolka prezentuje podsumowanie walidacji obok danego pola. Aby komunikat walidacji został wyświetlony należy także wskazać, iż pole jest wymagane.

  1. Przeciągnij na obszar roboczy pole ze struktury danych – wówczas kontrolki podsumowanie walidacji oraz etykieta są od razu dopięte do pola ze struktury danych i nie musisz ich wstawiać osobno.
  2. Możesz też przeciągnąć kontrolki: Etykieta, Pole tekstowe oraz Podsumowanie walidacji z karty Kontrolki. Wtedy musisz wprowadzić nazwy dla etykiet i ustawić źródła danych dla pól tekstowych.

Obraz 72

  1. Zaznacz kontrolkę Podsumowanie walidacji i przejdź na panel Właściwości i kliknij w opcję Walidowane kontrolki.
  2. W kolejnym oknie użyj strzałki i wybierz pole do walidacji dodatkowej i przenieś je do sekcji Wybrane.

Obraz 115

  1. Zaznacz pola użyte na formularzu, dla których ma zostać wyświetlony dodatkowy komunikat walidacji i na panelu Właściwości wybierz opcję Tak w sekcji Pole wymagane.

Obraz 117

Przy próbie zapisu formularza, bez wypełnienia pól, zostanie wyświetlony komunikat główny o błędach walidacji oraz komunikaty dodatkowe obok wymaganych pól do uzupełnienia, które zostały ustawione dzięki kontrolce Podsumowanie walidacji.

Obraz 122

Pole danych relacyjnych​

Kontrolka umożliwia zmianę elementu powiązanego relacją. W strukturze danych musi być zawarta relacja do innej struktury danych, a także należy stworzyć listę, która będzie wyświetlana w celu zmiany elementu.

  1. Przeciągnij kontrolkę na obszar roboczy i na panelu Właściwości wskaż listę, która będzie wyświetlana po wybraniu kontrolki zmiany elementu relacyjnego.
  2. Wskaż pole struktury danych.

Obraz 134

  1. Możesz także skonfigurować przyciski wyświetlane na formularzu przed wybraniem danych z listy oraz po.

Obraz 136

  1. Na formularzu po naciśnięciu Wybierz zostanie wyświetlona lista, którą podałeś we Właściwościach kontrolki.

Obraz 137

Po wybraniu rekordu z listy możesz go zmienić lub usunąć.

Obraz 138

wskazówka

W kontrolce relacyjnej wyświetlana jest tylko lista bez zdefiniowanych przycisków na liście.

Dla przykładu:

Na liście klientów zdefiniowane zostały akcje takie jak dodanie lub usunięcie elementu z listy oraz wykonanie mapowania dla danego rekordu na liście - akcja zdefiniowana w kolumnie akcji.

image

Po wykorzystaniu listy w kontrolce relacyjnej na formularzu, na liście nie są wyświetlane akcje listy, jedynie akcja umożliwiająca wybranie rekordu Wybierz lub Anuluj.

image

Właściwości

  1. Wyświetlana lista - Lista, która będzie wyświetlana.
  2. Tytuł okna - tytuł okna popup.
  3. Szerokość i wysokość okna - możliwość określenie szerokości i wysokości okna popup w pikselach lub procentach. Wartość bez wpisanej jednostki traktowana jest jako piksele.
  4. Uprawnienie - Wybór definicji uprawnienia do zmiany lub usunięcia elementu relacyjnego.
  5. Id elementu nadrzędnego
  6. Parametry - Parametry przekazywane do listy.

Przyciski

  1. Zmień
  • Tekst - Napis, który pojawia się na przycisku zmiany relacji, gdy wybrana jest dowolna relacja.
  • Tekst, gdy nie wybrano relacji - Napis pojawiający się na przycisku służącym do zmiany relacji, gdy nie jest zaznaczona żadna relacja.
  • Podpowiedź - Tooltip, który pojawia się po najechaniu myszką na przycisk akcji.
  • Ikona - Ikona dla przycisku na liście.
  • Style - Dodatkowe style dla przycisku zmiany elementu relacyjnego.
  1. Usuń
  • Tekst - Napis, który pojawia się na przycisku zmiany relacji, gdy wybrana jest dowolna relacja.
  • Podpowiedź - Tooltip, który pojawia się po najechaniu myszką na przycisk akcji
  • Ikona - Ikona dla przycisku na liście.
  • Style - Dodatkowe style dla przycisku zmiany elementu relacji.

Komunikaty

  1. Zmiana elementu - Komunikat, który jest wyświetlany po dokonaniu zmiany.
  2. Usunięcie elementu - Komunikat, który jest wyświetlany po usunięciu elementu relacyjnego.
ostrzeżenie

Jeżeli w strukturze danych została dodana relacja do innej struktury, wówczas na formularzu należy ją dodać w Mapowaniach startowych, gdyż relacja jeszcze nie jest widoczna w strukturze danych formularza.

  1. Przejdź na zakładkę Mapowania startowe, kliknij prawym przyciskiem na rekordzie i wybierz z menu kontekstowego opcję Popraw>Dodaj element.

image

  1. Po wykonaniu akcji, relacja zostanie dodane do Struktury danych formularza.

Obraz 160

Pole daty i czasu​

Kontrolka umożliwia określenie daty i godziny. Na panelu Właściwości możesz wskazać format wyświetlanej daty i czasu.

image

To w jakim formacie jest wyświetlana data i czas na formularzu jest uzależnione od tego czy został określony niestandardowy format daty i czasu w pliku konfiguracji aplikacji - patrz: Konfiguracja aplikacji.

Przykładowo, jeżeli format daty i czasu został określony w taki sposób jak na poniższym rysunku, wówczas w takim formacie będzie prezentowana data i czas na formularzu.

image

  1. Jeżeli chcesz zastosować inny format daty i czasu, wówczas przejdź do Właściwości kontrolki Pole daty i czasu i wybierz format Niestandardowy.
  2. Następnie wprowadź format w sekcji Niestandardowy format daty.

image

Pole GUID (unikalny identyfikator)​

Kontrolka umożliwia wprowadzenie wartości GUID. Źródłem danych dla kontrolki jest pole ze struktury danych typu GUID.

Pole liczbowe dla wartości procentowych​

Kontrolka umożliwiająca wprowadzanie wartości procentowych. Źródłem danych dla kontrolki jest pole typu Liczba stałoprzecinkowa.

Obraz 130

Właściwości

  1. Format - Format danych zgodny z Kendo

    (https://docs.telerik.com/kendo-ui/framework/globalization/numberformatting).

Możliwe opcje:

  • Standardowy nX (separator tysięczny " ", ilość miejsc po przecinku zgodna z ustawieniem pola w strukturze danych),
  • Kwota (c) - (format kwoty "c"),
  • Niestandardowy- ustawiony przez użytkownika w polu Format niestandardowy.
  1. Autouzupełnianie- Opcja określa czy wcześniej wprowadzone wartości mają być zapamiętane i użyte w formie podpowiedzi przy późniejszych uzupełnianiach pola. Dodaj klasę "k-secret-data"do stylu kontrolki.
  2. Wartość minimalna - Minimalna dozwolona wartość wyrażona w procentach.
  3. Wartość maksymalna - Maksymalna dozwolona wartość wyrażona w procentach.
  4. Konwertuj na ułamek - Zapisanie wartości ułamkowej w bazie danych (100% na kontrolce zapisze w bazie danych wartość 1).
  5. Pokaż spinnery - Pokaż strzałki w górę i w dół.

Pole opcji (przycisk radiowy)​

Kontrolka pola wyboru umożliwiająca wybranie jednej z opcji. Niezbędne jest wskazanie pola struktury danych typu słownikowego, którego wartości będą wyświetlane na formularzu.

image

Wartość pusta

  1. Dodatkowa opcja - Określa, czy pole ma pustą wartość.
  2. Tekst - Tekst pustej wartości.

Powiązane dane

  1. Obsługa wartości pustej - Sposób zachowania się kontrolki w przypadku konieczności "wyświetlenia" pustej wartości.
  2. Zawężenie do widoku - Umożliwia zawężenie wyświetlanych elementów do tych, które należą do danego widoku.
  3. Wyświetlane wartości - Określa, które wartości słownika będą wyświetlane.
  4. Lokalizacja - Określa, czy wyświetlane wartości mają być lokalizowane.

Pole tekstowe z maską​

Kontrolka umożliwia maskowanie wprowadzanej wartości. Służy do wprowadzania takich numerów jak NIP, REGON, PESEL.

  1. Przejdź na panel Właściwości i wybierz Rodzaj pola oraz wskaż pole ze struktury danych, jako źródło danych dla kontrolki.

Obraz 120

Kontrolka ma wbudowaną walidację, dzięki czemu niemożliwe będzie zapisanie formularza jeśli numery PESEL, REGON czy NIP będą niepoprawne.

Obraz 121

Możesz także wprowadzić niestandardowy/własny format dla kontrolki. Wszystkie dostępne opcje dotyczące konfiguracji maski można znaleźć w dokumentacji kendo https://docs.telerik.com/kendo-ui/api/javascript/ui/maskedtextbox/configuration/mask

Na panelu Właściwości także znajdziesz informacje dotyczące podstawowych niestandardowych formatów.

image

W poniższym przykładzie przy tak zdefiniowanym formacie niestandardowym dla pola: LLL, możliwe będzie wprowadzenie w polu tylko i wyłącznie 3 liter.

image

W przypadku gdy chcielibyśmy umożliwić wprowadzenie w polu oprócz liter, także określonej ilości cyfr zmień format danych.

image

Format możesz określać za pomocą stałej lub korzystając z wyrażeń:

image

Istnieje też możliwość konfiguracji niestandardowej maski z wykorzystaniem Java Script zgodnie z regułą opisaną w dokumentacji kendo: https://docs.telerik.com/kendo-ui/api/javascript/ui/maskedtextbox/configuration/rules.

Poniżej zastosowano maskę, w której reguła W zezwala tylko na duże znaki A-Z.

  1. Przeciągnij kontrolkę pole tekstowe z maską na formularz.
  2. Określ niestandardowy format poprzez stałą lub wyrażenie. Duże litery reprezentowane są tutaj przez regułę W.

image

  1. Przeciągnij kontrolkę html na formularz i umieść przed polem tekstowym z maską.
  2. Przejdź do właściwości Html i wprowadź skrypt. W poniższym przykładzie wykorzystano regułę, która umożliwia wprowadzenie tylko dużych liter.

image

Pole wyboru do zmiany elementu relacyjnego​

Kontrolka umożliwia zmianę elementu relacyjnego. W strukturze danych musi zostać utworzona relacja do struktury danych, z której chcesz aby korzystała kontrolka. Dodawanie relacji do struktury danych patrz: Definiowanie relacji w strukturze danych.

  1. Przed przystąpieniem do projektowania formularza pamiętaj o dodaniu relacji do innej struktury na zakładce Mapowania startowe.

  2. Przejdź na zakładkę, kliknij prawym na rekordzie i wybierz z menu kontekstowego Popraw>Dodaj element. Po wykonaniu akcji pola ze struktury relacyjnej będą już widoczne na panelu Struktura danych formularza. Więcej patrz: Pole danych relacyjnych.

  3. Teraz możesz przystąpić do projektowania formularza z użyciem kontrolki.

  4. Przeciągnij kontrolkę na obszar roboczy.

  5. Na panelu Właściwości wskaż pole relacyjne ze struktury danych.

Obraz 141

  1. Następnie wskaż pole ze struktury relacyjnej, które będzie się wyświetlać w polu wyboru. W tym przypadku chcemy wyświetlić dostępnych użytkowników, którzy mogą zgłosić wniosek urlopowy (na podstawie nazwy konta).

Obraz 142

Na formularzu pole wyświetlane jest jako pole wyboru z możliwością rozwinięcia i wybrania danej opcji.

Obraz 144

Dodatkowa opcja

  1. Dodatkowa opcja - Określa, czy dla tego pola istnieje pusta wartość.
  2. Tekst - Tekst pustej wartości.

Pole wyboru zasilane listą​

Kontrolka, której dostępne wartości są pobierane ze skojarzonej listy.

  1. Wcześniej należy stworzyć listę, której wartości będą wyświetlane w polu wyboru. Patrz: Tworzenie listy.
  2. Przeciągnij kontrolkę na obszar roboczy.
  3. Na panelu Właściwości wskaż pole struktury danych, którego wartości będą się pojawiać.

image

  1. Następnie w sekcji Lista zasilająca wybierz z serwera wersji listę, której zawartość będzie się pojawiać w polu wyboru.

Obraz 145

  1. W polach Tekst opcji i Wartość opcji przejdź do edytora wyrażeń i określ tekst oraz wartość opcji, jaka będzie wyświetlana w polu wyboru – musisz wskazać nazwy pól danych z zapytania SQL listy, na podstawie której są generowane opcje w polu wyboru.
  2. W edytorze wyrażeń przejdź na zakładkę List i przeciągnij pole do edytora.

Obraz 146

Pole na formularzu wygląda w analogiczny sposób jak kontrolka Pole wyboru do zmiany elementu relacyjnego.

Obraz 147

Informacje podstawowe

  1. Id elementu nadrzędnego - identyfikator elementu nadrzędnego.

Zachowanie - tryb pracy

  1. Czy wyszukiwanie włączone - Opcja określa czy w kontrolce możliwe jest wyszukiwanie tekstu.
  2. Auto - szerokość - Szerokość kontrolki będzie dostosowana do długich tekstów znajdujących się na liście.

Wartość pusta

  1. Widoczny - Określa, czy dla pola jest pusta wartość.
  2. Tekst - Tekst pustej wartości.

Źródło danych

  1. Lista zasilająca - Lista, której wyniki będą wyświetlane w kontrolce.
  2. Tekst opcji - Tekst opcji wyświetlany w combo.
  3. Wartość opcji - Formuła określająca wartość opcji w kontrolce. Typ formuły jest zgodny z typem elementu danych.
  4. Asynchroniczne ładowanie - Asynchroniczne ładowanie danych.
  5. Parametry - Parametry przekazywane do listy.

Separator​

Kontrolka umożliwia wprowadzenie przerwy (znacznik hr) na formularzu w postaci poziomej kreski.

Na panelu Właściwości możesz skonfigurować podstawowe parametry jak szerokość kontrolki czy widoczność a także wygląd kontrolki i jej charakterystyczne ustawienia jak: rozmiar, kolor i marginesy.

  1. Dodaj kontrolkę na formularz.
  2. Przejdź na panel Właściwości i do szczegółów opcji Dodatkowe style.
  3. Określ rozmiar separatora, kolor oraz marginesy.

image

W poniższym przykładzie użyto 2 kontrolki Separatora, dla których zdefiniowano różną szerokość, rozmiar oraz kolor.

image

Stepper​

Stepper umożliwia wizualizację postępu aktywności poprzez wyświetlanie sekwencji logicznych kroków.

  1. Dla kontrolki źródłem danych jest pole słownikowe.

image

  1. Na panelu Właściwości poza standardowymi ustawieniami jak Widoczność czy Szerokość możesz także określić:
  • Układ: Etykieta i wskaźnik, Tylko etykieta, Tylko wskaźnik - określa czy kroki w stepperze będą wyświetlać swój wskaźnik (ikonę lub liczbę umieszczoną w okręgu nad etykietą kroku) lub etykietę (tekst umieszczony poniżej okręgu wskaźnika kroku).
  • Orientacja: Pozioma lub Pionowa.

image

  1. Możesz zmienić kolor kontrolki wybierając jedną z dostępnych opcji we właściwości Dodatkowe style.

image

Suwak​

Kontrolka umożliwia ustawienie wartości poprzez przesuwanie wskaźnika. Źródłem danych dla kontrolki może być Liczba całkowita oraz stałoprzecinkowa.

Na panelu Właściwości możesz skonfigurować wygląd kontrolki i jej charakterystyczne ustawienia jak:

  1. Skonfigurować wartość jaka ma zostać dodana lub odjęta po kliknięciu przycisku dodawania/odejmowania.
  2. Wprowadzić wartość minimalną i maksymalną dla podziałki.
  3. Zmienić orientację na poziomą /pionową.
  4. Ukryć lub pokazać przyciski obok podziałki.
  5. Wskazać położenie podziałki.
  6. Wybrać typ wprowadzanych danych na liczbowy lub procentowy.

Obraz 131

ostrzeżenie

Kontrolka Suwak zarówno w orientacji pionowej jak i poziomej może nie wyświetlać skali podziałki, jeżeli jej dane nie będą w stanie się zmieścić w obrębie kontrolki.

Dla przykładu:

Jeżeli szerokość kontrolki została ustalona na 4 kolumny, a dane jakie chcemy w niej prezentować posiadają skalę od 1 do 200, przy czym dodatkowo określono iż mały krok jest przykładowo 1 wówczas podziałka może zostać niewyświetlona.

image

W takim przypadku możesz:

  1. zwiększyć opcje przeskoku we właściwości Mały krok i Duży krok lub zwiększyć szerokość kontrolki.

image

Różne

  1. Powiązana kontrolka danych - Kontrolka, z której wartość będzie przyjmować kontrolka suwaka.
  2. Kontrolka powiązana - blokuj wprowadzanie danych - Blokuje zmianę danych przy pomocy kontrolki powiązanej.

Ustawienia

  1. Mały krok - Wartość, która ma być dodana lub odjęta po kliknięciu przycisku dodaj lub odejmij.
  2. Duży krok - Wartość, która ma być dodana lub odjęta po naciśnięciu przycisku PageUp lub PageDown.
  3. Wartość minimalna
  4. Wartość maksymalna
  5. Orientacja - Orientacja pozioma lub pionowa.
  6. Pokaż przyciski - Włączenie lub wyłączenie przycisków dodawania i usuwania.
  7. Położenie podziałki - Skaluj pozycje.
  8. Typ wprowadzanych danych - Liczbowy - przyjmuje wartość liczbową, Procentowy- zapisuje do bazy wartość w postaci ułamka (100%-1).

Wybór pliku​

Wybór pliku to element współdziałający z Podglądem danych binarnych, pozwalający Użytkownikowi na wybór pliku, przechowywanego na jego dysku i umieszczenie go na serwerze (w strukturze danych związanej z formularzem). Aby plik mógł być przechowywany w strukturze danych, muszą się w niej znajdować pola przechowujące nazwę pliku (pole Tekst) oraz jego zawartość (pole binarne).

  1. Oprócz wskazania plików z nazwą i zawartością możesz także skonfigurować wyświetlanie przycisków Zmień, Usuń i Wybierz plik, które będą wyświetlane obok kontrolki, a także opcję wyświetlania nazwy pliku.

Obraz 132

Po wybraniu pliku z dysku jest on przechowywany w pamięci tymczasowej do momentu zapisania całego formularza. Po zapisaniu formularza można plik pobrać zmienić go lub usunąć.

Obraz 133

Informacje podstawowe

  1. Pokazuj nazwę pliku - Określa, czy nazwa pliku jest widoczna.
  2. Widoczność przycisku "Zmień" - Określa widoczność przycisku Zmień, który pozwala na zmianę pliku. Nie ustawienie tej wartości powoduje, że przycisk jest widoczny.
  3. Widoczność przycisku "Wybierz plik" - Określa widoczność przycisku Wybierz plik. Nie ustawienie tej wartości powoduje, że przycisk jest widoczny.
  4. Maksymalny rozmiar pliku (w bajtach) - Określa maksymalny rozmiar pliku (w bajtach).
  5. Widoczność przycisku "Usuń" - Określa widoczność przycisku Usuń. Nie ustawienie tej wartości powoduje, że przycisk jest widoczny.
  6. Dopuszczalne rozszerzenia plików - Rozdzielona przecinkami lista dozwolonych rozszerzeń plików. Dla rozszerzeń z poniższej listy zawartość pliku jest sprawdzana, czy pasuje do rozszerzenia: bmp, xlsx, xls, exe, gif, jpg, msg, pdf, png, ppt, rtf, tif, docx, doc, xps, zip, img, jpeg, tiff.
ostrzeżenie

Jeżeli w strukturze danych zostało dodane pole binarne, wówczas na formularzu należy je dodać w Mapowaniach startowych, gdyż pole jeszcze nie jest widoczne w strukturze danych formularza.

  1. Przejdź na zakładkę Mapowania startowe, kliknij prawym przyciskiem na polu i wybierz z menu kontekstowego opcję Popraw>Dodaj element.

Obraz 158

  1. Po wykonaniu akcji pole zostanie dodane do Struktury danych formularza.

image

Wybór wielu plików​

Wybór wielu plików to kontrolka służąca do dodawania wielu plików jednocześnie. Po dodaniu plików kontrolka umożliwia ich podgląd, pobranie, a także usunięcie.

Do struktury danych musi zostać dodana Lista, która będzie zawierać pola typu binarnego do przechowywania zawartości pliku oraz tekstowe do przechowywania nazwy pliku. Dodawanie listy do struktury danych patrz: Definiowanie listy w strukturze danych.

  1. Przeciągnij kontrolkę na obszar roboczy.
  2. Na panelu Właściwości wskaż w polu Struktura listy ścieżkę do pola z nazwą pliku oraz do pola z plikiem.
  3. W wyświetlonym oknie dostępne są listy ze struktury danych.
  4. Kliknij na listę, a następnie zaznacz wybrane pola i wybierz OK.

Obraz 162

Na formularzu kolejno dodawane pliki są w formie tabeli. Po zapisaniu status pliku zostaje zmieniony. Pliki możesz usunąć, pobrać lub podejrzeć.

Obraz 163

Informacje podstawowe

  1. Widoczność przycisku "Usuń" - Określa widoczność przycisku Usuń. Nie ustawienie tej wartości powoduje, że przycisk jest widoczny.
  2. Dopuszczalne rozszerzenia plików - Rozdzielona przecinkami lista dozwolonych rozszerzeń plików. Dla rozszerzeń z poniższej listy zawartość pliku jest sprawdzana, czy pasuje do rozszerzenia: bmp, xlsx, xls, exe, gif, jpg, msg, pdf, png, ppt, rtf, tif, docx, doc, xps, zip, img, jpeg, tiff.

Powiązane dane

  1. Struktura listy - Lista, która będzie wykorzystywana przez kontrolkę.
  2. Pole z zawartością pliku - Pole struktury danych, do którego zostanie zapisana zawartość pliku.

Walidacja

  1. Maksymalny rozmiar pliku (w bajtach) - Określa w bajtach maksymalną wielkość pliku.
  2. Komunikat walidacji wielkości pliku - Komunikat, który pojawia się po przekroczeniu rozmiaru pliku. Dopuszczalne zmienne:
  • #file# - nazwa pliku,
  • #fileSize# - rozmiar pliku,
  • #maxSize# - maksymalny dozwolony rozmiar pliku.
  1. Maksymalna wielkość plików - Maksymalna dopuszczalna łączna wielkość plików.
  2. Komunikat walidacji wielkości plików - Komunikat wyświetlany, gdy sumaryczna wielkość plików zostanie przekroczona.

Dopuszczalne zmienne:

  • #filesSize# - całkowity rozmiar plików,
  • #maxFilesSize# - maksymalny dozwolony rozmiar plików.
ostrzeżenie

Jeżeli w strukturze danych zostało dodane pole binarne, wówczas na formularzu należy je dodać w Mapowaniach startowych, gdyż pole jeszcze nie jest widoczne w strukturze danych formularza. Podobnie jeśli do struktury danych zostało dodane pole typu Lista również należy je dodać w mapowaniach startowych.

  1. Przejdź na zakładkę Mapowania startowe, kliknij prawym przyciskiem na polu i wybierz z menu kontekstowego opcję Popraw>Dodaj element.
  2. Po wykonaniu akcji pole zostanie dodane do Struktury danych formularza. To samo wykonaj z elementem Lista.

Obraz 164

Wykres​

Kontrolka Wykres umożliwia wyświetlenie danych w formie wykresu.

wskazówka

Zakres danych, które należy wprowadzić na panelu Właściwości jest zależny od typu wybranego wykresu.

Serie danych

Aby skonfigurować wykres wprowadź dane, które mają być prezentowane na wykresie we właściwości Serie danych.

  1. Przejdź na panel Właściwości i kliknij w pole Serie danych.

image

  1. W wyświetlonym oknie Edytor kolekcji wybierz przycisk Dodaj i określ kolor dla wykresu, kolumnę z podpisem i wartością - wskaż pole z bazy danych.
  2. Określ także nazwę serii.

image

  1. Otwórz okno Zapytanie SQL i doprecyzuj jakie parametry mają zostać wyświetlone na wykresie. Po lewej stronie definiujesz zapytanie a po prawej stronie masz dostęp do drzewek danych. Analogicznie jak podczas definiowania wyrażenia. Możesz także skorzystać z podpowiadania składni wybierając Ctrl+Spacja. Więcej o wyrażeniach i oknie edytora wyrażeń znajdziesz tutaj: Wyrażenia.

image

Format danych

  1. W zależności od danego typu wykresu możesz określić formaty osi wartości oraz osi kategorii i format danych. Przejdź do sekcji Formatowanie i określ właściwości w polach:
  • Format etykiet danych - Format danych dla wartości prezentowanych na osi wartości (Y).
  • Format danych - Format danych dla wartości prezentowanych na wykresie.
  • Format osi kategorii - Format danych dla wartości prezentowanych na osi kategorii (X).

image

  1. Aby wprowadzić format danych należy użyć składni string.format aby nadać cyfrom określony napis.

Dla przykładu:

  1. Dla przedstawienia wartości waluty użyj formatu {0:c}

image

Inne formaty danych:

  1. Dziesiętny - {0:d}
  2. Liczba z przecinkami do tysięcy - {0:n}
  3. Zaokrąglanie- {0:r}
  4. Procentowy- {0:%}

Ustawienia

  1. Tytuł wykresu
  2. Styl linii - określa styl rysowania (wygładzony, schodkowy):
  • Normal - opcja domyślna.
  • Step - Linia wykresu będzie rysowana w sposób krokowy.
  • Smooth - Linia wykresu zostanie wygładzona.

Osie

  1. Skalowanie automatyczne - jeżeli właczysz tą opcję wówczas zakres osi dopasuje się do minimalnych/maksymalnych danych. Jeżeli wyłączysz wówczas oś zazwyczaj zaczyna się od 0.
  2. Tytuł osi X
  3. Tytuł osi Y

Legenda

Możesz określić czy legenda ma być widoczna na wykresie. Jeżeli tak to nastepnie określ jej pozycję.

image

QR kod​

Kontrola generuje obrazy canvas i svg, które reprezentują kody QR. Jako źródło danych kontrolka przyjmuje pole tekstowe.

image

Dodatkowo dla kontrolki możesz określić:

  1. Poziom korekcji błędów - Poziom korekcji błędów używanych do kodowania wartości. Możliwe wartości to:
  • L - można przywrócić około 7% słów kodowych
  • M - można przywrócić około 15% słów kodowych
  • Q - można przywrócić około 25% słów kodowych
  • H - można przywrócić około 30% słów kodowych
  1. Kodowanie - tryb kodowania używany do kodowania wartości (domyślnie ISO_8859_1). Możliwe wartości:
  • ISO_8859_1 - obsługuje wszystkie znaki z zestawu znaków ISO/IEC 8859-1
  • UTF_8 - obsługuje wszystkie znaki Unicode.
ważne

Kodowanie UTF-8 nie jest uwzględnione w specyfikacjach i nie jest obsługiwane przez wszystkie czytniki.

  1. Kolor tła - Kolor tła kodu QR. Akceptuje prawidłowy ciąg znaków koloru CSS, w tym hex i rgb (domyślnie #FFF).
  2. Rozmiar - Określa rozmiar kodu QR w pikselach (np. 200px). Wartości liczbowe są traktowane jako piksele. Jeśli rozmiar nie zostanie określony, zostanie on ustawiony na podstawie szerokości i wysokości elementu. W przypadku, gdy element ma szerokość lub wysokość równą 0 zostanie użyta wartość domyślna 200 pikseli.
  3. Kolor - Kolor kodu QR. Akceptuje prawidłowy ciąg znaków koloru CSS, w tym hex i rgb (domyślnie #000).
  4. Margines wewnętrzny - Ustawia minimalną odległość w pikselach, która powinna pozostać między obramowaniem a modułami QR.
  5. Renderuj jako - Ustawia preferowany silnik renderujący. Jeśli nie jest on obsługiwany przez przeglądarkę, kod QR przełączy się na pierwszy dostępny tryb (domyślnie svg). Obsługiwane wartości to:
  • canvas - renderuje widżet jako element Canvas, jeśli jest dostępny,
  • svg - renderuje widżet jako dokument SVG wbudowany, jeśli jest dostępny.
  1. Obraz - wyświetlany obraz nakładki.

  2. Obramowanie:

  • Kolor - Kolor obramowania. Akceptuje prawidłowy ciąg znaków koloru CSS, w tym hex i rgb.
  • Szerokość - szerokość obramowania w pikselach. Domyślnie szerokość obramowania jest ustawiona na 0, co oznacza, że obramowanie nie będzie widoczne.

image

Wszystkie dostępne opcje dotyczące konfiguracji kontrolki można też znaleźć w dokumentacji kendo https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/dataviz/ui/qrcode

Zobacz również​

Tworzenie niestandardowego nagłówka i stopki strony aplikacji

Wykorzystanie własnych grafik i ikon

Ustawianie tła kontenerów