Шаблонизация данных в компоненте DataGrid

Формулировка задачи

Настроить содержимое ячеек в компоненте DataGrid для отображения в ячейке:

• кнопки вместо текста;
• поля ввода;
• флажка;
• значения в отформатированном виде.

Также в компоненте DataGrid необходимо изменить цвет фона строки.

Предварительные требования

Создана экранная форма, на которую добавлен компонент DataGrid.

Рекомендуемое решение задачи

Рекомендуемый подход к решению описанной задачи включает следующие шаги:

1. Настройка чередования цвета фона строк таблицы в зависимости от четности сроки.

   1. Выберите ячейку.
   2. Выберите свойство Background компонента Group.
   3. Укажите в качестве значения свойства Background функцию проверки четности строки, как показано в следующем фрагменте кода:

   Background={(i) => {
               return i % 2 ? "GRAY_2" : "GRAY_1";             
           }}
   подсказка

   Имя переменной i можно переопределить с помощью свойства ItemIndexVariable компонента DataGrid.

2. Добавление компонента Icon в ячейку таблицы.

   1. Выберите ячейку и удалите текст.
   2. Добавьте в ячейку компонент Group.
   3. Добавьте в компонент Group компонент Icon.
   4. Определите значение свойства Name компонента Icon с помощью переменной item, как показано в следующем фрагменте кода:

   <Icon
       Name-var="item.status"
   />
   подсказка

   Имя переменной item можно переопределить с помощью свойства ItemAlias компонента DataGrid.

3. Добавление компонента Checkbox в ячейку таблицы.

   1. Выберите ячейку и удалите текст.
   2. Добавьте в ячейку компонент Group.
   3. Добавьте в компонент Group компонент Checkbox.
   4. Определите значение свойства Model компонента Checkbox с помощью переменной item, как показано в следующем фрагменте кода:

   <Checkbox 
           Model-var="item.booleanField" Label=""
   />

4. Форматирование текста в ячейке по заданным правилам.

   Для форматирования текста в ячейке, например, для отображения вместо фамилии, имени и отчества в столбце только фамилии и инициалов сделайте следующее:

   1. Выберите ячейку.
   2. Определите значение свойства Value компонента Text с помощью функции, возвращающей отформатированное значение, как показано в следующем фрагменте кода:

    <Text
        Value={(item) => {
            return `${item.manager.sirname} ${item.manager.name.charAt(0)}. ${item.manager.middleName.charAt(0)}.`; 
        }}
    />  

5. Добавление компонента Button в ячейку таблицы.

   1. Выберите ячейку и удалите текст.
   2. Добавьте в ячейку компонент Group.
   3. Добавьте в компонент Group компонент Button.
   4. Опишите обработчик события OnClick() компонента Button, как показано в следующем фрагменте кода:

   <Button
   OnClick={(item) => { console.log('Current item data: ', item); }}  
   />
   
   подсказка

   Переменные item и i также доступны в обработчике события OnClick() с помощью метода getValue().

6. Размещение в ячейке текстового поля ввода, имеющего по умолчанию значение из ячейки таблицы.

   1. Выберите ячейку и удалите текст.
   2. Добавьте в ячейку компонент Group.
   3. Добавьте в компонент Group компонент Input.
   4. Определите значение свойства Model компонента Input с помощью переменной item, как показано в следующем фрагменте кода:

   <Input
   Model-var="item" 
   />
   

7. Форматирование даты в ячейке таблицы.

   1. Выберите ячейку.
   2. Определите значение свойства Value компонента Text с помощью функции, возвращающей отформатированное значение даты, как показано в следующем фрагменте кода:

   <Text
           Value={ (date = item.dateColumn) => new Date(date).toLocaleDateString(); }
   />

8. Размещение в ячейке текстового поля ввода, имеющего по умолчанию значение из ячейки таблицы.

   1. Выберите ячейку и удалите текст.
   2. Добавьте в ячейку компонент Group.
   3. Добавьте в компонент Group компонент Input.
   4. Определите значение свойства Model компонента Input с помощью переменной item, как показано в следующем фрагменте кода:

   <Input
   Model-var="item" 
   />