@talxis/base-controls 1.2406.2

package/src/components/Grid/paging/components/Paging/Paging.tsx

@@ -0,0 +1,76 @@
+import { ComboBox, CommandBarButton, ContextualMenuItemType, IComboBoxOption, IContextualMenuItem, useTheme } from '@fluentui/react';
+import { CommandBar } from '@fluentui/react/lib/components/CommandBar/CommandBar';
+import React from 'react';
+import { useGridInstance } from '../../../core/hooks/useGridInstance';
+import { usePagingController } from '../../controllers/usePagingController';
+import { getPagingStyles } from './styles';
+
+export const Paging = () => {
+    const labels = useGridInstance().labels;
+    const paging = usePagingController();
+    const styles = getPagingStyles(useTheme());
+
+    const getPageSizeOptions = (): IContextualMenuItem[] => {
+        const sizes = ['25', '50', '75', '100', '250'];
+        return sizes.map(size => {
+            return {
+                key: size,
+                text: size,
+                checked: parseInt(size) === paging.pageSize,
+                className: styles.pageSizeOption,
+                onClick: () => paging.setPageSize(parseInt(size))
+            }
+        })
+    }
+    return (
+        <div className={styles.root}>
+            <div className={styles.pageSizeBtnWrapper}>
+                <CommandBarButton
+                    text={labels['paging-pages']({ start: paging.pageFirstRecordOrder, end: paging.pageLastRecordOrder, recordcount: paging.totalResultCount >= 0 ? paging.totalResultCount : "5000+" })}
+                    menuProps={{
+                        items: [
+                            {
+                                key: 'header',
+                                itemType: ContextualMenuItemType.Header,
+                                text: 'Počet záznamů na stránce',
+                            },
+                            {
+                                key: 'divider',
+                                itemType: ContextualMenuItemType.Divider,
+                            },
+                            ...getPageSizeOptions()
+                        ]
+                    }}
+                />
+            </div>
+            <CommandBar
+                className={styles.pagination}
+                items={[]}
+                farItems={[{
+                    key: 'FirstPage',
+                    iconOnly: true,
+                    iconProps: { iconName: 'DoubleChevronLeft' },
+                    disabled: !paging.hasPreviousPage,
+                    onClick: () => paging.reset()
+                }, {
+                    key: 'PreviousPage',
+                    iconOnly: true,
+                    iconProps: { iconName: 'Back' },
+                    disabled: !paging.hasPreviousPage,
+                    onClick: () => paging.loadPreviousPage()
+                }, {
+                    key: 'CurrentPage',
+                    text: `${labels['paging-page']()} ${paging.pageNumber.toString()}`,
+                    className: styles.currentPageBtn,
+                    disabled: true,
+                }, {
+                    key: 'NextPage',
+                    iconOnly: true,
+                    iconProps: { iconName: 'Forward' },
+                    disabled: !paging.hasNextPage,
+                    onClick: () => paging.loadNextPage()
+                }]}
+            />
+        </div>
+    )
+}

package/src/components/Grid/paging/components/Paging/styles.ts

@@ -0,0 +1,38 @@
+import { mergeStyleSets, ITheme } from "@fluentui/react";
+
+export const getPagingStyles = (theme: ITheme) => {
+    return mergeStyleSets({
+        root: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center'
+        },
+        pagination: {
+            '.ms-CommandBar': {
+                paddingLeft: 0,
+                paddingRight: 0,
+            }
+        },
+        currentPageBtn: {
+            '.ms-Button-label': {
+                color: theme.semanticColors.bodyText
+            }
+        },
+        pageSizeBtnWrapper: {
+            flexGrow: 1,
+            display: 'flex',
+            '.ms-Button-label': {
+                whiteSpace: 'nowrap',
+            },
+            '.ms-Button': {
+                height: 44
+            }
+        },
+        pageSizeOption: {
+            '& .is-checked': {
+                backgroundColor: theme.semanticColors.buttonBackgroundHovered,
+                fontWeight: 600
+            }
+        }
+    });
+};

package/src/components/Grid/paging/controllers/usePagingController.ts

@@ -0,0 +1,34 @@
+import { useGridInstance } from "../../core/hooks/useGridInstance"
+
+interface IPagingController {
+    pageNumber: number,
+    pageSize: number,
+    totalResultCount: number,
+    hasPreviousPage: boolean,
+    hasNextPage: boolean,
+    pageFirstRecordOrder: number,
+    pageLastRecordOrder: number,
+    loadNextPage: () => void,
+    loadPreviousPage: () => void,
+    loadExactPage: (pageNumber: number) => void,
+    setPageSize: (pageSize: number) => void,
+    reset: () => void
+}
+
+export const usePagingController = (): IPagingController => {
+    const paging = useGridInstance().paging;
+    return {
+        pageNumber: paging.pageNumber,
+            pageSize: paging.pageSize,
+            totalResultCount: paging.totalResultCount,
+            hasPreviousPage: paging.hasPreviousPage,
+            hasNextPage: paging.hasNextPage,
+            pageFirstRecordOrder: paging.pageFirstRecordOrder,
+            pageLastRecordOrder: paging.pageLastRecordOrder,
+            loadExactPage: (pageNumber: number) => paging.loadExactPage(pageNumber),
+            loadNextPage: () => paging.loadNextPage(),
+            loadPreviousPage: () => paging.loadPreviousPage(),
+            setPageSize: (pageSize) => paging.setPageSize(pageSize),
+            reset: () => paging.reset()
+    }
+}

package/src/components/Grid/paging/model/Paging.ts

@@ -0,0 +1,49 @@
+import { GridDependency } from "../../core/model/GridDependency";
+
+export class Paging extends GridDependency {
+
+    public get pageNumber() {
+        return this._dataset.paging.pageNumber;
+    }
+    public get pageSize() {
+        return this._dataset.paging.pageSize;
+    }
+    public get totalResultCount() {
+        return this._dataset.paging.totalResultCount;
+    }
+    public get hasPreviousPage() {
+        return this._dataset.paging.hasPreviousPage;
+    }
+    public get hasNextPage() {
+        return this._dataset.paging.hasNextPage;
+    }
+    public get pageFirstRecordOrder() {
+        return (this.pageNumber - 1) * this.pageSize + (this.totalResultCount === 0 ? 0 : 1);
+    }
+
+    public get pageLastRecordOrder() {
+        return this.pageNumber * this.pageSize;
+    }
+
+    public loadNextPage() {
+        this.loadExactPage(this.pageNumber + 1)
+    }
+    public loadPreviousPage() {
+        this.loadExactPage(this.pageNumber - 1);
+    }
+    public loadExactPage(pageNumber: number) {
+        this._dataset.paging.loadExactPage(pageNumber);
+    }
+    public setPageSize(pageSize: number) {
+        this._dataset.paging.setPageSize(pageSize);
+        this._dataset.refresh();
+        //in Power Apps the new page size can sometimes come only after second refresh #smh
+        //@ts-ignore - Portal types
+        if (!window.TALXIS?.Portal) {
+            this._dataset.refresh()
+        }
+    }
+    public reset() {
+        this._dataset.paging.reset();
+    }
+}

package/src/components/Grid/selection/controllers/useSelectionController.ts

@@ -0,0 +1,25 @@
+import { useGridInstance } from "../../core/hooks/useGridInstance";
+import { IEntityRecord } from "../../interfaces";
+
+interface ISelectionController {
+    type: "multiple" | "single" | undefined;
+    selectedRecordIds: string[],
+    allRecordsSelected: boolean;
+    toggle: (record: IEntityRecord, state: boolean) => void;
+    clear: () => void,
+    selectAll: () => void
+}
+
+export const useSelectionController = (): ISelectionController => {
+    const grid = useGridInstance();
+    const selection = grid.selection;
+
+    return {
+        type: selection.type,
+        selectedRecordIds: selection.selectedRecordIds,
+        allRecordsSelected: selection.allRecordsSelected,
+        toggle: (record: IEntityRecord, state: boolean) => selection.toggle(record, state),
+        clear: () => selection.clear(),
+        selectAll: () => selection.selectAll()
+    }
+}

package/src/components/Grid/selection/model/Selection.ts

@@ -0,0 +1,60 @@
+import { GridDependency } from "../../core/model/GridDependency";
+
+export class Selection extends GridDependency {
+    private _selectedRecordIdsSet: Set<string> = new Set<string>();
+    private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+    public toggle(record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord, newState: boolean, clearExistingSelection?: boolean, disableDebounce?: boolean) {
+        const recordId = record.getRecordId();
+        if(!this.debounceTimer) {
+            this._selectedRecordIdsSet = new Set(this.selectedRecordIds);
+        }
+        if (clearExistingSelection) {
+            this._selectedRecordIdsSet.clear();
+        }
+        if (newState === false) {
+            this._selectedRecordIdsSet.delete(recordId);
+        }
+        else {
+            if (this.type === 'single') {
+                this._selectedRecordIdsSet.clear();
+            }
+            this._selectedRecordIdsSet.add(recordId);
+        }
+
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+        }
+        if(disableDebounce) {
+            this._setSelectedRecords();
+            return;
+        }
+        this.debounceTimer = setTimeout(() => {
+            this._setSelectedRecords();
+        }, 0);
+    }
+    public get selectedRecordIds() {
+        return this._dataset.getSelectedRecordIds();
+    }
+    public get allRecordsSelected() {
+        return this.selectedRecordIds.length === this._dataset.sortedRecordIds.length;
+    }
+    public get type() {
+        if(this._grid.props.parameters.SelectableRows?.raw === 'none') {
+            return undefined;
+        }
+        return this._grid.props.parameters.SelectableRows?.raw;
+    }
+
+    public clear() {
+        this._grid.dataset.setSelectedRecordIds([]);
+    }
+    public selectAll() {
+        this._grid.dataset.setSelectedRecordIds(this._dataset.sortedRecordIds)
+    }
+    private _setSelectedRecords() {
+        this._grid.dataset.setSelectedRecordIds([...this._selectedRecordIdsSet.values()]);
+        this.debounceTimer = null; // Reset debounce timer after execution
+        this._selectedRecordIdsSet = new Set();
+    }
+}

package/src/components/Grid/sorting/Sorting.ts

@@ -0,0 +1,30 @@
+import { IGridColumn } from "../core/interfaces/IGridColumn";
+import { GridDependency } from "../core/model/GridDependency";
+export class Sorting extends GridDependency {
+    public get(column: IGridColumn) {
+        return {
+            value: this._dataset.sorting.find(x => x.name === column.key),
+            sort: (direction: ComponentFramework.PropertyHelper.DataSetApi.Types.SortDirection) => {
+                const sortMap: Map<string, ComponentFramework.PropertyHelper.DataSetApi.SortStatus> = new Map(this._dataset.sorting.map(x => [x.name, x]));
+                //sorting across multiple columns is currently not supported in Portal
+                //@ts-ignore - types
+                if(window.TALXIS?.Portal) {
+                    sortMap.clear();
+                }
+                sortMap.set(column.key, {
+                    name: column.key,
+                    sortDirection: direction
+                })
+                //Power Apps only allows setting of sorting like this - https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript
+                //this is so stupid
+                while (this._dataset.sorting.length) {
+                    this._dataset.sorting.pop()
+                }
+                for (const sort of sortMap.values()) {
+                    this._dataset.sorting.push(sort);
+                }
+                this._dataset.refresh();
+            }
+        }
+    }
+}

package/src/components/Grid/sorting/components/SortingContextualMenu/SortingContextualMenu.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react';
+import { ContextualMenu, ContextualMenuItemType, IContextualMenuItem, IContextualMenuProps, useTheme } from '@fluentui/react';
+import { IGridColumn } from '../../../core/interfaces/IGridColumn';
+import { DataType } from '../../../core/enums/DataType';
+import { getColumnHeaderContextualMenuStyles } from './styles';
+import { useGridInstance } from '../../../core/hooks/useGridInstance';
+import { useColumnSortingController } from '../../controllers/useColumnSortingController';
+import { useColumnFilterConditionController } from '../../../filtering/controller/useColumnFilterConditionController';
+
+export interface ISortingContextualMenu extends Omit<IContextualMenuProps, 'items'> {
+    column: IGridColumn;
+    onDismiss: (e?: Event | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, dismissAll?: boolean, showFilterCallout?: boolean) => void;
+}
+
+export const SortingContextualMenu = (props: ISortingContextualMenu) => {
+
+    const grid = useGridInstance();
+    const labels = grid.labels;
+    const styles = getColumnHeaderContextualMenuStyles(useTheme());
+    const {column, onDismiss} = {...props};
+    const sorting = useColumnSortingController(column);
+    const condition = useColumnFilterConditionController(column);
+    const [items, setItems] = useState<IContextualMenuItem[]>([]);
+
+    useEffect(() => {
+        (async() => {
+            setItems(await getItems())
+        })();
+    }, [condition]);
+
+    const getTwoOptionsSortLabel = async (isDesc?: boolean) => {
+        const [defaultValue, options] = await grid.metadata.getOptions(column);
+        if(!isDesc) {
+            return `${options[0].Label} ${labels['filtersortmenu-sorttwooption-joint']()} ${options[1].Label}`
+        }
+        return `${options[1].Label} ${labels['filtersortmenu-sorttwooption-joint']()} ${options[0].Label}`
+    }
+    const getLabel = async (isDesc?: boolean) => {
+        switch (column.dataType) {
+            case DataType.WHOLE_NONE:
+            case DataType.DECIMAL:
+            case DataType.FP:
+            case DataType.CURRENCY: {
+                if (!isDesc) {
+                    return labels['filtersortmenu-sortnumber-a-z']()
+                }
+                return labels['filtersortmenu-sortnumber-z-a']()
+            }
+            case DataType.DATE_AND_TIME_DATE_AND_TIME:
+            case DataType.DATE_AND_TIME_DATE_ONLY: {
+                if (!isDesc) {
+                    return labels['filtersortmenu-sortdate-a-z']()
+                }
+                return labels['filtersortmenu-sortdate-z-a']()
+            }
+            case DataType.TWO_OPTIONS: {
+               return getTwoOptionsSortLabel(isDesc);
+            }
+            default: {
+                if (!isDesc) {
+                    return labels['filtersortmenu-sorttext-a-z']()
+                }
+                return labels['filtersortmenu-sorttext-z-a']()
+            }
+        }
+    }
+
+    const getItems = async (): Promise<IContextualMenuItem[]> => {
+        if(!condition) {
+            return []
+        }
+        const items: IContextualMenuItem[] = [
+            {
+                key: 'sort_asc',
+                checked: column.isSorted && !column.isSortedDescending,
+                disabled: !column.isSortable || column.dataType === DataType.MULTI_SELECT_OPTIONSET,
+                text: await getLabel(),
+                className: styles.item,
+                iconProps: {
+                    iconName: 'SortUp'
+                },
+                onClick: () => sorting.sort(0)
+            },
+            {
+                key: 'sort_desc',
+                checked: column.isSorted && column.isSortedDescending,
+                disabled: !column.isSortable || column.dataType === DataType.MULTI_SELECT_OPTIONSET,
+                text: await getLabel(true),
+                className: styles.item,
+                iconProps: {
+                    iconName: 'SortDown'
+                },
+                onClick: () => sorting.sort(1)
+            },
+            {
+                key: 'divider',
+                itemType: ContextualMenuItemType.Divider
+            },
+            {
+                key: 'filter',
+                className: styles.item,
+                disabled: !column.isFilterable,
+                text: labels['filtermenu-filterby'](),
+                iconProps: {
+                    iconName: 'Filter'
+                },
+                onClick: (e) => onDismiss(e, false, true)
+            }
+        ];
+        if (condition.isAppliedToDataset) {
+            items.push({
+                key: 'clearFilter',
+                text: labels['filtersortmenu-clearfilter'](),
+                iconProps: {
+                    iconName: 'ClearFilter'
+                },
+                onClick: () => {
+                    condition.remove();
+                    condition.save();
+                }
+            });
+        }
+        return items
+    }
+    return <ContextualMenu {...props} items={items} />;
+};

package/src/components/Grid/sorting/components/SortingContextualMenu/styles.ts

@@ -0,0 +1,12 @@
+import { mergeStyleSets, ITheme } from "@fluentui/react";
+
+export const getColumnHeaderContextualMenuStyles = (theme: ITheme) => {
+    return mergeStyleSets({
+        item: {
+            '& .is-checked': {
+                backgroundColor: theme.semanticColors.buttonBackgroundHovered,
+                fontWeight: 600
+            }
+        }
+    });
+};

package/src/components/Grid/sorting/controllers/useColumnSortingController.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import { useGridInstance } from "../../core/hooks/useGridInstance";
+import { IGridColumn } from "../../core/interfaces/IGridColumn";
+
+interface ISortingController {
+    value: ComponentFramework.PropertyHelper.DataSetApi.SortStatus | undefined;
+    sort: (sortDirection: ComponentFramework.PropertyHelper.DataSetApi.Types.SortDirection) => void;
+}
+
+export const useColumnSortingController = (column: IGridColumn): ISortingController => {
+    const grid = useGridInstance();
+    const sorting = grid.sorting.get(column);
+
+    const getController = (): ISortingController => {
+        return {
+            value: sorting.value,
+            sort: (direction) => sorting.sort(direction)
+        }
+    }
+    const [controller, setController] = useState<ISortingController>(() => getController())
+
+    useEffect(() => {
+        setController(getController())
+    }, [sorting.value]);
+    return controller;
+}

package/src/components/Grid/translations.ts

@@ -0,0 +1,80 @@
+import { IGridTranslations } from "./interfaces";
+
+export const gridTranslations: IGridTranslations = {
+    "condition-none": { 1029: "Žádná", 1033: "None" },
+    "condition-equal": { 1029: "Je rovno", 1033: "Equals" },
+    "condition-notequal": { 1029: "Není rovno", 1033: "Does not equal" },
+    "condition-greaterthan": { 1029: "Větší než", 1033: "Greater than" },
+    "condition-lessthan": { 1029: "Menší než", 1033: "Less than" },
+    "condition-greaterequal": { 1029: "Větší než nebo rovno", 1033: "Greater than or equal to" },
+    "condition-lessequal": { 1029: "Menší než nebo rovno", 1033: "Less than or equal to" },
+    "condition-like": { 1029: "Obsahuje", 1033: "Contains" },
+    "condition-notlike": { 1029: "Neobsahuje", 1033: "Does not contain" },
+    "condition-null": { 1029: "Neobsahuje data", 1033: "Does not contain data" },
+    "condition-notnull": { 1029: "Obsahuje data", 1033: "Contains data" },
+    "condition-beginwith": { 1029: "Začíná na", 1033: "Begins with" },
+    "condition-doesnotbeginwith": { 1029: "Nezačíná na", 1033: "Does not begin with" },
+    "condition-endswith": { 1029: "Končí na", 1033: "Ends with" },
+    "condition-doesnotendwith": { 1029: "Nekončí na", 1033: "Does not end with" },
+    "condition-yesterday": { 1029: "Včera", 1033: "Yesterday" },
+    "condition-today": { 1029: "Dneska", 1033: "Today" },
+    "condition-tomorrow": { 1029: "Zítra", 1033: "Tomorrow" },
+    "condition-last7days": { 1029: "Posledních 7 dnů", 1033: "Last 7 days" },
+    "condition-next7days": { 1029: "Příštích 7 dnů", 1033: "Next 7 days" },
+    "condition-lastweek": { 1029: "Minulý týden", 1033: "Last week" },
+    "condition-thisweek": { 1029: "Tento týden", 1033: "This week" },
+    "condition-lastmonth": { 1029: "Minulý měsíc", 1033: "Last month" },
+    "condition-thismonth": { 1029: "Tento měsíc", 1033: "This month" },
+    "condition-on": { 1029: "V den", 1033: "On" },
+    "condition-onorbefore": { 1029: "Před dnem (včetně)", 1033: "On or before" },
+    "condition-onorafter": { 1029: "Po dni (včetně)", 1033: "On or after" },
+    "condition-lastyear": { 1029: "Poslední rok", 1033: "Last year" },
+    "condition-thisyear": { 1029: "Tento rok", 1033: "This year" },
+    "condition-lastxdays": { 1029: "Posledních X dnů", 1033: "Last X days" },
+    "condition-nextxdays": { 1029: "Příštích X dnů", 1033: "Next X days" },
+    "condition-lastxmonths": { 1029: "Posledních X měsíců", 1033: "Last X months" },
+    "condition-nextxmonths": { 1029: "Příštích X měsíců", 1033: "Next X months" },
+    "condition-contains": { 1029: "Obsahuje", 1033: "Contains" },
+    "condition-infiscalperiodandyear": { 1029: "Toto fiskální období a rok", 1033: "In fiscal period and year" },
+    "condition-above": { 1029: "Nad", 1033: "Above" },
+    "condition-under": { 1029: "Pod", 1033: "Under" },
+    "condition-notunder": { 1029: "Není pod", 1033: "Not under" },
+    "condition-aboveorequal": { 1029: "Je nad nebo se rovná", 1033: "Above or equal" },
+    "condition-underorequal": { 1029: "Je pod nebo se rovná", 1033: "Under or equal" },
+    "condition-containvalues": { 1029: "Obsahuje hodnoty", 1033: "Contain values" },
+    "condition-doesnotcontainvalues": { 1029: "Neobsahuje hodnoty", 1033: "Does not contain values" },
+    "filtermenu-filterby": { 1029: "Filtrovat podle", 1033: "Filter By" },
+    "filtermenu-applybutton": { 1029: "Použít", 1033: "Apply" },
+    "filtermenu-clearbutton": { 1029: "Vymazat", 1033: "Clear" },
+    "filtersortmenu-sorttext-a-z": { 1029: "Seřadit od A do Z", 1033: "Sort A to Z" },
+    "filtersortmenu-sorttext-z-a": { 1029: "Seřadit od Z do A", 1033: "Sort Z to A" },
+    "filtersortmenu-sortdate-a-z": { 1029: "Seřadit od nejstarších", 1033: "Sort older to newer" },
+    "filtersortmenu-sortdate-z-a": { 1029: "Seřadit od nejnovějších", 1033: "Sort newer to older" },
+    "filtersortmenu-sortnumber-a-z": { 1029: "Seřadit od nejmenších", 1033: "Sort smaller to larger" },
+    "filtersortmenu-sortnumber-z-a": { 1029: "Seřadit od největších", 1033: "Sort larger to smaller" },
+    "filtersortmenu-sorttwooption-a-z": { 1029: "Seřadit od nejmenších", 1033: "No to Yes" },
+    "filtersortmenu-sorttwooption-z-a": { 1029: "Seřadit od největších", 1033: "Yes to No" },
+    "filtersortmenu-sorttwooption-joint": { 1029: "až", 1033: "to" },
+    "filtersortmenu-filterby": { 1029: "Filtrovat podle", 1033: "Filter by" },
+    "filtersortmenu-clearfilter": { 1029: "Vymazat filtr", 1033: "Clear filter" },
+    "paging-of": { 1029: "z", 1033: "of" },
+    "paging-firstpage": { 1029: "První strana", 1033: "First page" },
+    "paging-previouspage": { 1029: "Předchozí", 1033: "Previous" },
+    "paging-page": { 1029: "Strana", 1033: "Page" },
+    "paging-nextpage": { 1029: "Další", 1033: "Next" },
+    "paging-lastpage": { 1029: "Poslední strana", 1033: "Last page" },
+    "paging-pages": {1029: "{{start}} - {{end}} z {{recordcount}}", 1033: "{{start}} - {{end}} of {{recordcount}}"},
+    "norecordsfound": {1029: 'Nenašli jsme nic, co by se zde dalo zobrazit', 1033: 'No records found'},
+    "saving-changenotification": {1029: "Počet upravených záznamů: <b>{{numOfChanges}}</b>. Klikněte <u>zde</u> pro jejich zobrazení.", 1033: "Number of updated records: <b>{{numOfChanges}}</b>. Click <u>here</u> to review."},
+    "saving-save": {1029: "Uložit", 1033: "Save"},
+    "saving-saving": {1029: "Ukládání...", 1033: "Saving..."},
+    "saving-changepreview-title": {1033: 'Number of updated rows: {{numOfChanges}}', 1029: 'Počet upravených záznamů: {{numOfChanges}}'},
+    "saving-validation-error": {1029: 'Pro uložení záznamu je nutné opravit chybové hodnoty následujících sloupců: <b>{{columnDisplayNames}}</b>', 1033: 'Folowing columns have validation errors: <b>{{columnDisplayNames}}</b>'},
+    "validation-input-value":  {1029: 'Zadejte hodnotu', 1033: 'Please enter value.'},
+    "validation-email":  {1029: 'Neplatný formát emailové adresy.', 1033: 'Invalid Email address format.'},
+    "validation-url":  {1029: 'Neplatný formát webové adresy.', 1033: 'Invalid URL format.'},
+    "validation-date": {1029: 'Neplatný formát datumu.', 1033: 'Invalid Date format.'},
+    "validation-number": {1029: 'Neplatný formát čísla.', 1033: 'Invalid Number format.'},
+    "no-name": {1029: '(Bez názvu)', 1033: '(No Name)'},
+};
+   

package/src/components/Grid/validation/controllers/useRecordValidationController.ts

@@ -0,0 +1,31 @@
+import { useEffect, useMemo, useState } from "react";
+import { useGridInstance } from "../../core/hooks/useGridInstance";
+import { IGridColumn } from "../../core/interfaces/IGridColumn";
+import { ColumnValidation } from "../model/ColumnValidation";
+
+interface IRecordValidation {
+    column: IGridColumn;
+    record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;
+}
+
+export const useColumnValidationController = (props: IRecordValidation): [boolean, string] => {
+    const grid = useGridInstance();
+    const column = props.column;
+    const record = props.record;
+    const columnValidation = useMemo(() => {return new ColumnValidation(grid, column)}, []);
+
+    const [isValid, setIsValid] = useState<boolean>(true);
+    const [errorMessage, setErrorMessage] = useState<string>("");
+
+    useEffect(() => {
+        if(!column.isEditable) {
+            //we are not doing validation for non-editable columns
+            return;
+        }
+        const [isValid, errorMessage] = columnValidation.validate(record.getValue(column.key));
+        setIsValid(isValid);
+        setErrorMessage(errorMessage);
+    }, [record.getValue(column.key)]);
+
+    return [isValid, errorMessage];
+}