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

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

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

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

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

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

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

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

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

Настройка чередования цвета фона строк таблицы в зависимости от четности сроки.
1. Выберите ячейку.
2. Выберите свойство Background компонента Group.
3. Укажите в качестве значения свойства Background функцию проверки четности строки, как показано в следующем фрагменте кода:
```
Background={(i) => {
    return i % 2 ? "GRAY_2" : "GRAY_1";             
}}
```
  подсказка
  Имя переменной i можно переопределить с помощью свойства ItemIndexVariable компонента DataGrid.
Добавление компонента Icon в ячейку таблицы.
1. Выберите ячейку и удалите текст.
2. Добавьте в ячейку компонент Group.
3. Добавьте в компонент Group компонент Icon.
4. Определите значение свойства Name компонента Icon с помощью переменной item, как показано в следующем фрагменте кода:
```
<Icon
    Name-var="item.status"
/>
```
  подсказка
  Имя переменной item можно переопределить с помощью свойства ItemAlias компонента DataGrid.
Добавление компонента Checkbox в ячейку таблицы.
1. Выберите ячейку и удалите текст.
2. Добавьте в ячейку компонент Group.
3. Добавьте в компонент Group компонент Checkbox.
4. Определите значение свойства Model компонента Checkbox с помощью переменной item, как показано в следующем фрагменте кода:
```
<Checkbox 
    Model-var="item.booleanField" Label=""
/>
```
Форматирование текста в ячейке по заданным правилам.

Для форматирования текста в ячейке, например, для отображения вместо фамилии, имени и отчества в столбце только фамилии и инициалов сделайте следующее:
1. Выберите ячейку.
2. Определите значение свойства Value компонента Text с помощью функции, возвращающей отформатированное значение, как показано в следующем фрагменте кода:
```
<Text
    Value={(item) => {
        return `${item.manager.sirname} ${item.manager.name.charAt(0)}. ${item.manager.middleName.charAt(0)}.`; 
    }}
/>  
```
Добавление компонента Button в ячейку таблицы.
1. Выберите ячейку и удалите текст.
2. Добавьте в ячейку компонент Group.
3. Добавьте в компонент Group компонент Button.
4. Опишите обработчик события OnClick() компонента Button, как показано в следующем фрагменте кода:
```
<Button
    OnClick={(item) => { console.log('Current item data: ', item); }}  
/>
```
  подсказка
  Переменные item и i также доступны в обработчике события OnClick() с помощью метода getValue().
Размещение в ячейке текстового поля ввода, имеющего по умолчанию значение из ячейки таблицы.
1. Выберите ячейку и удалите текст.
2. Добавьте в ячейку компонент Group.
3. Добавьте в компонент Group компонент Input.
4. Определите значение свойства Model компонента Input с помощью переменной item, как показано в следующем фрагменте кода:
```
<Input
    Model-var="item" 
/>
```
Форматирование даты в ячейке таблицы.
1. Выберите ячейку.
2. Определите значение свойства Value компонента Text с помощью функции, возвращающей отформатированное значение даты, как показано в следующем фрагменте кода:
```
<Text
    Value={ (date = item.dateColumn) => new Date(date).toLocaleDateString(); }
/>
```
Размещение в ячейке текстового поля ввода, имеющего по умолчанию значение из ячейки таблицы.
1. Выберите ячейку и удалите текст.
2. Добавьте в ячейку компонент Group.
3. Добавьте в компонент Group компонент Input.
4. Определите значение свойства Model компонента Input с помощью переменной item, как показано в следующем фрагменте кода:
```
<Input
    Model-var="item" 
/>
```

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

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

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

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

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

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