Введение

Grid - элемент управления, представляющий собой таблицу для отображения и редактирования данных. Один из самых сложных элементов управления, включает в себя множество простых (TextBox, NumberInputBox, CheckBox, и т.п). В отличии от простых элементов управления он привязывается (биндится) не к свойству модели, а к дочерней коллекции (массиву, детейлу).

Свойства

Наименование	Тип	Описание
allowUserToAddRows	Bool	свойство, отвечающее за возможность пользовательского добавления строк в таблицу. Перекрывает свойство readOnly. По умолчанию значение true
allowUserToDeleteRows	Bool	свойство, отвечающее за возможность пользовательского удаления строк в таблице. Перекрывает свойство readOnly. По умолчанию значение true
allowUserToExportRows	Bool	свойство, отвечающее за возможность пользовательского экспорта строк в грид. По умолчанию значение true
autoHeight	Bool	настройка автовысоты таблицы. По умолчанию значение false
bind	Строка	свойство, к которому привязывается элемент управления
caption	Строка	заголовок таблицы (грида)
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки)
columnsHeight	Число	высота заголовка колонок
columnsReorder	Bool	возможность изменения порядка колонок пользователем. По умолчанию значение false
columnsResize	Bool	возможность изменения ширины колонок таблицы. По умолчанию значение false
customizable	Bool	включает режим настраиваемости, управление набором колонок и сохранение состояния таблицы между сеансами.
dataSource	Строка	источник данных таблицы
deferredCreating	Bool	отложенное создание таблицы (подробнее о свойстве ниже в этой статье). По умолчанию значение false.
detailed	Bool	при установке данному свойству значение true будет отображаться детализация строк. В качестве детализации отображается таблица с дочерней коллекцией данной строки
editMode	Строка	режим редактирования.
editorWidth	Число	ширина элемента управления в колонках (для Bootstrap-верстки)
exportCaption	Bool	свойство, устанавливающее заголовок таблицы при экспорте таблицы в эксель
exportGroupWidth	Число	ширина колонки в файле excel, получаемой при выгрузке данных с учетом группировки строк
filterable	Bool	возможность фильтрации. По умолчанию значение false
groupable	Bool	возможность группировки. По умолчанию значение false
groupsExpandedByDefault	Bool	настройка групп по умолчанию в развернутом состоянии. По умолчанию значение true
groupsLevelExpandedByDefault	Bool	уровень вложенности группировок, которые по умолчанию будут в развернутом состоянии. Используется, когда groupsExpandedByDefault = true
height	Число	высота элемента управления. По умолчанию значение 400
hint	Строка	всплывающая подсказка, которая появляется при наведении на элемент управления
id	Срока	nan
readOnly	Bool	режим "только для чтения". По умолчанию значение false
selectionMode	Строка	режим выделения. По умолчанию значение singlerow
showAggregates	Bool	отображение суммовых полей. По умолчанию значение false
showButtonText	Bool	отображение текста кнопок "добавить строки" и "удалить строки". По умолчанию значение true
showFilterMenuItems	Bool	включить/выключить возможность вызывать окно с настройками фильтров. Этот функционал становится недоступным (является взаимоисключающим свойством с showFilterRow), если в гриде включено отображение строки фильтра. Окно фильтрации открывается нажатием на кнопку сортировки, которая отображается рядом с заголовком колонки при наведении на него курсора. По умолчанию значение false
showFilterRow	Bool	отображение полей фильтрации По умолчанию значение false
showGridInfo	Bool	отображение информации о выделенных, отфильтрованных строках. По умолчанию значение true
showStatusBar	Bool	отображение поля для суммовых полей. По умолчанию значение false
sortable	Bool	возможность сортировки. По умолчанию значение false
sortColumn	Строка	колонка для сортировки по умолчанию
sortDirection	Строка	направление сортировки по умолчанию. По умолчанию значение asc. Доступные значения: asc (по возрастанию), desc (по убыванию)
statusBarHeight	Число	высота суммовых полей
tags	Bool	позволяет объединять элементы управления в группы, возвращает массив имен
toolbarVisible	Bool	отображение кнопок таблицы. По умолчанию значение true
visible	Bool	видимость элемента управления, значение по умолчанию - true
width	Число	ширина элемента управления. По умолчанию значение 600

Детальное описание

dataSource

При использовании механизма привязки в форме, например, в документе, заполнение источника данных будет осуществляться автоматически.

Источник данных Grid также можно заполнять без использования привязки. Например, вывести результаты выполнения запроса или объявить его в коде:

import ko from 'knockout'
// ...
// Абстрактный пример заполнения источника данных произвольного элемента управления  Grid
// ...
  this.controls.gridExample.dataSource = ko.mapping.fromJS([{
    id: 90,
    typeIndex: 1,
    text: 'abc',
    flag: true,
    number: 33.3
  }, {
    id: 91,
    typeIndex: 2,
    text: 'def',
    flag: true,
    number: 100.05
  }, {
    id: 92,
    typeIndex: 1,
    text: 'ghi',
    flag: false,
    number: 200
  }])

Здесь с помощью вспомогательных функций из плагина mapping библиотеки Knockout явно объявленный массив объектов преобразуется в observableArray и присваивается в качестве источника данных в свойство dataSource.

selectionMode

Режимы выделения изменяют способ выделения строк/ячеек таблицы. Доступные режимы:

• none - выделение невозможно
• singlecell - возможно выделить только одну ячейку
• multiplecells - при каждом клике на ячейку она будет выделена(множественное выделение). Повторный клик снимет выделение
• multiplecellsextended - выделение группы ячеек. Аналогично выделению иконок на рабочем столе
• multiplecellsadvanced - выделение группы ячеек. Аналогично выделению ячеек в таблице Excel
• singlerow - возможно выделить только одну строку
• multiplerows - при каждом клике на строку она будет выделена (множественное выделение). Повторный клик снимет выделение
• multiplerowsextended - выделение группы строк. Аналогично выделению иконок на рабочем столе
• multiplerowsadvanced - выделение группы строк. Аналогично выделению ячеек в таблице Excel
• checkbox - выделение строк чекбоксами, используется в аналитическом гриде.
• standard – Выделение одной ячейки. Навигация стрелками с клавиатуры.

editMode

Для различных режимов выделения (selection mode) более удобными могут оказаться другие режимы редактирования, кроме стандартного. Режим редактирования определяет каким образом будет начинаться и заканчиваться редактирование. Для того чтобы задать режим редактирования необходимо задать свойство data-lx-editMode, оно может принимать следующие значения:

• selectedcell - редактирование начинается при клике по уже выделенной ячейке
• click - редактирование начинается при клике по ячейке
• selectedrow - редактируется сразу вся строка, т.е. открываются сразу все едиторы строки
• dblclick - редактирование начинается при двойном клике по ячейке
• programmatic - редактирование запрещено, начать и закончить редактирование можно только программно через API таблицы

Методы

Наименование	Действия
beginUpdate	информирует grid о начале процесса изменения его свойств (ускоряет работу при выполнении нескольких операций)
endUpdate	информирует grid об окончании процесса изменения его свойств
render	вызывает перерисовку всех элементов таблицы (колонок, строк, ячеек и т.д.), включая навигационные ссылки
getSelectedObjects	возвращает массив observable-объектов с данными, привязанными к выделенным строкам таблицы.
clearSelection	снимает все выделенные строки/ячейки
create	выполняет создание элемента управления. Используется для отложенного создания таблицы (свойство deferredCreating=true). Повторный вызов метода после создания игнорируется
unselectRow	снимает выделение для переданной строки (работает только в построчном режиме выделения)
getIndexByData	возвращает массив индексов строк, удовлетворяющих переданному селектору. Принимает на вход 1 параметр - объект-селектор.
getGrouping	возвращает массив текущих группировок
addGrouping	добавляет группировку по колонке в конец списка или по индексу.
addGroupingSet	добавляет набор группировок в конец списка или по индексу.
removeGrouping	удаляет группировку по колонке.
clearGrouping	убирает все установленные группировки
addFilter	добавляет фильтрацию
removeFilter	удаляет фильтрацию
clearFilters	удаляет все фильтры у таблицы
addSorting	добавляет сортировку по колонке (по умолчанию в порядке возрастания)
getSorting	возвращает установленную на текущий момент сортировку таблицы
removeSorting	удаляет сортировку.
getGroup	Возвращает описание группы строк. Работает только с группами самого верхнего уровня. Возвращает null, если группа не найдена. Метод принимает индекс группы (индекс зависит от примененной сортировки и фильтров).
getRootGroupsCount	Возвращает количество сгруппированных строк верхнего уровня.
collapseGroup	Скрывает группу строк. Первым параметром принимает путь до целевой группы. Указывается в формате '0.0.0'. Числом является индекс группы (индекс зависит от примененной сортировки и фильтров), точкой разделяется уровень вложенности группы. Вторым параметром принимает объект с дополнительными опциями. Доступные опции: collapseSubGroups - позволяет скрывать вложенные группы (если целевая группа уже скрыта, то эта опция игнорируется)
expandGroup	Раскрывает группу строк. Первым параметром принимает путь до целевой группы. Указывается в формате '0.0.0'. Числом является индекс группы (индекс зависит от примененной сортировки и фильтров), точкой разделяется уровень вложенности группы. Вторым параметром принимает объект с дополнительными опциями. Доступные опции: expandSubGroups - позволяет раскрывать вложенные группы (если целевая группа уже раскрыта, то эта опция игнорируется).
collapseAllGroups	Скрывает все группы строк. Если корневая группа была скрыта, то вложенные в нее группы не будут скрываться.
expandAllGroups	Раскрывает все группы строк. Если корневая группа была раскрыта, то вложенные в нее группы не будут раскрываться.

Детальное описание

unselectRow

Пример:

var grid = lx.view.grid1;
console.log(grid.getSelectedObjects()); //вернет массив observable-объектов
var vCode = grid.getSelectedObjects()[0].VCode(); //получаем VCode из полученных данных

getIndexByData

Пример:

var grid = lx.view.grid1;
console.log(grid.getIndexByData({ 'VCode': 1 })); //вернет массив индексов строк, VCode которых равен 1
console.log(grid.getIndexByData({ 'Name': 'qwe' })); //вернет массив индексов строк, в поле Name которых встречается строка 'qwe'

clearGrouping

Пример:

grid.addGrouping(grid.columns.Column1.datafield); //добавление группировки по колонке
grid.addGrouping(grid.columns.Column2.datafield, 0); //добавление группировки по колонке в начало списка
grid.removeGrouping(grid.columns.Column1.datafield); //получаем VCode из полученных данных
grid.addGroupingSet([grid.columns.Column1.datafield, grid.columns.Column1.datafiel2, ...]); //добавление набора группировок
grid.addGroupingSet([grid.columns.Column1.datafield, grid.columns.Column1.datafiel2, ...], 0); //добавление набора группировок в начало списка
grid.clearGrouping() //очищение группировок

clearFilters

Пример:

grid.addFilter('Name', 'Text'); //добавление фильтр колонке со свойством datafield = 'Name'
grid.removeFilter('Name'); //удаляет фильтр у колонки со свойством datafield = 'Name'
grid.getFilters(); //получение установленных фильтров
grid.addFilters([{ datafield: 'VCode', value: 1 }, { datafield: 'Name', value: 'Text' }]);
grid.clearFilters();

removeSorting

Возможна сортировка только по 1 колонке. Добавление новой сортировки удаляет предыдущую.

Пример:

grid.addSorting({ //добавление сортировки по колонке в порядке возрастания
  datafield: grid.columns.Column1.datafield
});
grid.addSorting({ //добавление сортировки по колонке в порядке убывания
  datafield: grid.columns.Column1.datafield,
  order: 'desc'
});
grid.removeSorting();

Работа с колонками

Свойства колонок

Наименование	Тип	Значение
datafield	nan	Задает имя свойства для биндинга (обязательное свойство). Должно быть уникальным в рамках одного Grid-а. По значению этого свойство можно обращаться к объектной модели колонки.
text	nan	Задает заголовок колонки
width	nan	Задает ширину колонки. Значение можно указывать в пикселях(px) или процентах(%)
aggregateType	nan	Задает тип агрегирования, который будет использоваться при отображении группировок строк в гриде. Доступные значения: none sum avg min max count
align	nan	Задает выравнивание по горизонтали для заголовка. Доступные значения: left right center
cellsalign	nan	Задает выравнивание текста внутри ячеек колонки по горизонтали. Доступные значения: left right center
pinned	nan	Делает колонку заблокированной от прокрутки по горизонтали.
editable	nan	Задает возможность редактировать колонку.
columngroup	nan	Задает имя группы, в которую помещается колонка.
visible	nan	Задает видимость колонки. Значение по умолчанию - true
groupingIndex	nan	Задает индекс группировки, начиная с 0. Свойство недоступно в объектной модели колонки
cellsforma	nan	Задает формат ячейки. Перекрывает свойства symbol и decimalDigits при использовании в качестве эдитора элемента управления NumberInput. числовые форматы: Dx - десятичный, где x - количество знаков после запятой, число от 1 и больше. Fx - с плавающей точкой, где x - количество знаков после запятой, число от 1 и больше. Px - процент, где x - количество знаков после запятой, число от 1 и больше. N - целочисленный. формат даты

События

Наименование	Действие
cellClicked	срабатывает при клике по ячейке
cellDoubleClicked	срабатывает при двойном клике по ячейке
cellOpener	срабатывает перед редактированием ячейки. Запрещает или разрешает редактирование ячейки.
cellPainter	срабатывает при закраске ячейки
cellSelected	срабатывает при выделении ячейки
cellValueChanged	срабатывает при изменении значения в ячеек
filtered	срабатывает при фильтрации
grouped	срабатывает при изменении группировки
rowClicked	срабатывает при клике по строке
rowDoubleClicked	срабатывает при двойном клике по строк
rowExpanded	срабатывает при раскрытии вложенного грида
rowSelecte	срабатывает при выделении строки
rowUnselected	срабатывает при снятии выделения строки
exportCellsFormatter	срабатывает при экспорте таблицы в Excel, служит для определения стилей ячеек
exportGroupsFormatter	срабатывает при экспорте таблицы в Excel, служит для определения стилей ячеек

Колонки и группы колонок

Основная часть свойств колонок отвечает за их отображение. Главным свойством, отвечающим за привязку колонки к полям источника данных Grid, является datafield.

Рассмотрим следующий пример:

<Grid id="grid" caption="grid" editorWidth="6" bind="collection" showStatusBar="false" selectionMode="standard" width="100%" height="300px">
  <Column datafield="id" text="id" width="75">
    <TextBox/>
  </Column>
  <ColumnGroup name="group1" text="(group1) writing disabled" readRoles="super">
    <Column datafield="typeIndex" text="type" width="120">
      <TextBox/>
    </Column>
    <Column datafield="text" text="text" width="150">
      <TextBox/>
    </Column>
    <ColumnGroup name="group2" text="(group2) writing enabled" writeRoles="super">
      <Column datafield="flag" text="flag" width="75" readRoles="super">
        <CheckBox/>
      </Column>
      <Column datafield="number" text="number" width="100" cellsformat="N">
        <NumberInput/>
      </Column>
    </ColumnGroup>
  </ColumnGroup>
</Grid>

С помощью шаблона формы колонки можно располагать в иерархии групп колонок.

Эдиторы

В качестве эдиторов элемента управления Grid могут выступать основные элементы управления системы и элементы управления, предназначенные для использования только как эдиторы:

<Grid id="grid1" caption="Форматы ячеек и эдиторов" editorWidth="12" selectionMode="standard" width="100%" height="300px">
  <Column datafield="text" text="TextBox" width="170px">
    <TextBox/>
  </Column>
  <Column datafield="number1" text="NumberInput" width="170px">
    <NumberInput symbol=" руб." decimalDigits="2"/>
  </Column>
  <Column datafield="number2" text="NumberInput + column format" width="170px" cellsformat="d3">
    <NumberInput symbol=" руб." decimalDigits="2"/>
  </Column>
  <Column datafield="lookup" text="Lookup" width="200px" editorPrepared="lookupTableParams">
    <Lookup dataSource="../lookups/treeForLookup.query.json"/>
  </Column>
  <Column datafield="memo" text="Memo" width="200px">
    <Memo/>
  </Column>
  <Column datafield="memo2" text="Memo (html)" width="200px">
    <Memo format="html"/>
  </Column>
  <Column datafield="date1" text="None" width="150">
    <DateTimeInput/>
  </Column>
  <Column datafield="date2" text="Column" width="150" cellsformat="dd.MM.yyyy">
    <DateTimeInput/>
  </Column>
  <Column datafield="date3" text="Editor" width="150">
    <DateTimeInput format="dd.MM.yyyy"/>
  </Column>
  <Column datafield="date4" text="Column + editor" width="150" cellsformat="dd.MM.yyyy">
    <DateTimeInput format="dd.MM"/>
  </Column>
  <Column datafield='time1' text='Time' width="150px" cellsformat="HH:mm">
    <DateTimeInput visible="true" bindingMode="time" showTimePicker="true" showCalendar="false" format="HH:mm"/>
  </Column>
  <Column datafield="pageableLookup" text="PageableLookup" width="200px">
    <PageableLookup dataSource="../basic/client.model.json" topCount="7" rowsCount="5"/>
  </Column>
  <Column datafield='scalePercent' text='ScalePercent' width="200" hint="Столбчатая диаграмма с относительным значением">
    <Scale min="0" max="100" symbol="%"/>
  </Column>
  <Column datafield='scale' text='Scale' width="200" hint="Диаграмма с большим диапазоном">
    <Scale min="100" max="20000" symbol=" гр."/>
  </Column>
  <Column datafield='glyphText' text='GlyphTextBox' width="200" hint="Текст с картинкой">
    <GlyphTextBox imageRenderer="imageRenderer"/>
  </Column>
</Grid>

Набор свойств элементов управления при использовании их в качестве эдиторов в Grid не меняется. Задавать их можно точно так же, как и при обычном использовании.

При использовании элементов управления в качестве эдиторов необходимо учитывать то, что свойства некоторых элементов управления могут пересекаться со свойствами колонок. Например, свойство cellsformat колонки является аналогичным и приоритетным по отношению к свойству format элементов управления NumberInput и DateTimeInput.

В примере выделены элементы управления, доступные для использования только в качестве эдиторов таблицы. Элемент управления Scale представляет собой столбчатую диаграмму, отражающее отношение значения в ячейке к заданному диапазону значений. Свойства min и max позволяют указывать произвольные диапазоны значений, а в свойстве symbol указывается строка, позволяющая дополнительно раскрыть смысл значения ячейки.

Элемент управления GlyphTextBox позволяет добавлять к текстовому содержимому ячейки произвольную иконку. Добавление иконки выполняется методом-обработчиком класса формы. В примере для чётных и нечётных строк используется соответствующая картинка:

imageRenderer (grid, data) {
  return data.row % 2 ? addIMG : delIMG
}

Фильтрация по условию

Для задания точных условий фильтрации значений, отображаемых в элементе управления, можно использовать свойство showFilterMenuItems. Данное свойство управляет доступностью специального всплывающего окна, в котором отображаются элементы управления, задающие условие фильтрации столбца.

Окно открывается при нажатии на кнопку фильтрации только при закрытом поле ввода фильтров в столбцах (свойство showFilterRow). Условия фильтрации зависят от типа данных выбранного столбца.

Настройка и сохранение состояния

Включение свойства customizable позволяет активировать режим пользовательской настройки внешнего вида элемента управления: изменение набора и порядка отображения колонок и сохранение этих изменений между сеансами.

Экспорт данных

Для включения интерфейса функционала экспорта данных, которые отображает элемент управления, необходимо включить свойство allowUserToExportRows. Также данные можно экспортировать программно:

this.controls.Grid1.exportToExcel('doc.xlsx') //doc.xlsx - имя файла

Режим выделения

На форму примеров добавлены элементы управления Grid, отличающиеся только свойством режима выделения. Для каждого возможного значения этого свойства добавлен отдельный элемент управления:

<Grid caption="checkbox" editorWidth="6" bind="collection10" sortable="true" height="200px" selectionMode="checkbox">
  <Column datafield="id" text="id" width="30%">
    <TextBox />
  </Column>
  <Column datafield="typeIndex" text="type" width="30%">
    <TextBox />
  </Column>
  <Column datafield="text" text="text" width="40%">
    <TextBox />
  </Column>
</Grid>
<Grid caption="standard" editorWidth="6" bind="collection11" sortable="true" height="200px" selectionMode="standard">
  <Column datafield="id" text="id" width="30%">
    <TextBox />
  </Column>
  <Column datafield="typeIndex" text="type" width="30%">
    <TextBox />
  </Column>
  <Column datafield="text" text="text" width="40%">
    <TextBox />
  </Column>
</Grid>

Итоговые поля

Элемент управления Grid поддерживает вывод итоговых полей - особых информационных полей по колонкам, которые отображают значение, вычисленное согласно установленному правилу. Например, в итоговом поле можно отображать максимальное значение из всех строк колонки или сумму этих значений. Итоговые поля в основном применяются для колонок, которые отображают числовую информацию.

Для включения режима отображения итоговых полей необходимо установить соответствующие свойства элемента управления Grid (showAggregates и showStatusBar) и добавить в нужную колонку элемент ColumnAggregate:

<Grid id="grid1" caption="Grid" editorWidth="6" bind="collection" columnsResize="true" groupable="true" selectionMode="standard" width="100%" height="350px" showAggregates="true" showStatusBar="true">
  <Column datafield="id" text="id" width="75">
    <TextBox/>
    <ColumnAggregate type="sum" groupping="true"/>
  </Column>
  <Column datafield="typeIndex" text="type" width="120">
    <TextBox/>
    <ColumnAggregate type="max"/>
  </Column>
  <Column datafield="text" text="text" width="150">
    <TextBox/>
  </Column>
  <Column datafield="text1" text="text" width="150">
    <TextBox/>
  </Column>
</Grid>

Элемент управления AnalyticalGrid также поддерживает итоговые поля:

<AnalyticalGrid id="anGrid1" caption="AnGrid (простой)" bind="collection" sortable="true" viewName="projectForm" primaryKeyName="id" editorWidth="6" width="100%" height="350px" groupable="true" showAggregates="true" showStatusBar="true">
  <Column datafield="id" text="id" width="75">
    <TextBox/>
  </Column>
  <Column datafield="typeIndex" text="type" width="120">
    <TextBox/>
    <ColumnAggregate type="avg"/>
  </Column>
  <Column datafield="text" text="text" width="150">
    <TextBox/>
  </Column>
</AnalyticalGrid>

Группировка строк

Функционал группировки строк позволяет выделять и визуально выделять строки, обладающие одинаковыми значениями в колонках, как выбранных пользователем (путём перетаскивания заголовка колонки в область группировки), так и указанных программно (в шаблоне или коде).

Пример:

<Grid id="grid1" caption="Grid" editorWidth="6" bind="collection" showStatusBar="false" selectionMode="standard" width="100%" height="300px" groupable="true">
  <Column datafield="id" text="id" width="75">
    <TextBox/>
  </Column>
  <Column datafield="typeIndex" text="type" width="120" groupingIndex="0">
    <TextBox/>
  </Column>
  <Column datafield="text" text="text" width="150" groupingIndex="1">
    <TextBox/>
  </Column>
</Grid>
<AnalyticalGrid id="anGrid1" caption="AnGrid (простой)" bind="collection" sortable="true" viewName="projectForm" primaryKeyName="id" editorWidth="6" width="100%" height="300px" showStatusBar="false" groupable="true">
  <Column datafield="id" text="id" width="75" aggregateType="sum">
    <NumberInput groupping="true" symbol="$"/>
  </Column>
  <Column datafield="typeIndex" text="type" width="120" groupingIndex="0">
    <TextBox/>
  </Column>
  <Column datafield="text" text="text" width="150" aggregateType="count" groupingIndex="1">
    <TextBox/>
  </Column>
</AnalyticalGrid>

Grid позволяет осуществлять группировку по нескольким полям в определённом порядке. Для указания порядка группировки в шаблоне необходимо указать нужный индекс в свойстве groupingIndex колонки, по которой должны группироваться поля. Для включения группировки необходимо настроить у элемента управления свойство groupable. В примере у обоих элементов управления настраивается группировка по двум колонкам.

С помощью реализованных в элементе управления методов можно программно полностью управлять набором группировок. Например, удалить имеющиеся группировки:

this.controls.grid1.removeGroupping(this.controls.grid1.columns.text.datafield)

Метод removeGrouping принимает в качестве параметра наименование поля источника данных в виде строки. Его можно передать как явно в виде строки, либо обратиться к свойству datafield соответствующей колонки.

События и обработчики

Элемент управления Grid предоставляет возможность добавления обработчиков различных событий. Обработчики должны представлять собой методы класса формы. Ознакомиться с полным списком возможных событий и их описанием можно в главе События.

<AnalyticalGrid id="anGrid1" caption="AnGrid1" bind="collection" sortable="true" viewName="projectForm" primaryKeyName="id" editorWidth="6" width="100%" height="350px" groupable="true" showAggregates="true" filterable="true" showFilterRow="true" showStatusBar="true" rowSelected="gridRowSelected" rowUnselected="gridRowUnselected" cellPainter="gridCellPainter" rowClicked="gridRowClicked" cellClicked="gridCellClicked" rowDoubleClicked="gridRowDoubleClicked" cellDoubleClicked="gridCellDoubleClicked" filtered="gridFiltered" grouped="gridGrouped">
  <Column datafield="id" text="id" width="75">
    <TextBox/>
  </Column>
  <Column datafield="typeIndex" text="type" width="120">
    <TextBox/>
    <ColumnAggregate type="avg"/>
  </Column>
  <Column datafield="text" text="text" width="150">
    <TextBox/>
  </Column>
</AnalyticalGrid>

Обработчики можно устанавливать в макете формы. При этом, как было сказано выше, необходимо чтобы указанные методы имелись в экземпляре класса формы.

Пример содержимого методов-обработчиков:

gridRowDoubleClicked(s, e) {
  console.log('gridRowDoubleClicked')
  console.log(s)
  console.log(e)
}
gridCellDoubleClicked(s, e) {
  console.log('gridCellDoubleClicked')
  console.log(s)
  console.log(e)
}
gridCellPainter(s, e) {
  console.log('gridCellPainter')
  let result = Colors.green
  let vCode = 0
  if (e.data) {
    vCode = e.data.id  0
  }
  if ((vCode % 2) === 0) {
    result = Colors.yellow
  }
  return result
}
gridCellOpener(s, e) {
  return !!(e.row % 2)
}

В обработчике события окрашивания ячеек gridCellPainter представлен абстрактный сценарий, когда требуется чередовать цвета чётных и нечётных строк.

Горячие клавиши

Элемент управления Grid обладает поддержкой различных сочетаний клавиш для работы с ним, используя только клавиатуру. Поддерживаются они по умолчанию и не требуют дополнительной обработки. Пользоваться можно следующими комбинациями:

• Cтрелки клавиатуры вверх-вниз-влево-вправо - быстрая навигация по ячейкам таблицы.
• Shift + стрелки вверх/вниз позволяет выделять множество строк таблицы.
• Ctrl + Delete вызывает диалоговое окно стандартное окно "Удалить все выбранные записи?". После закрытия окна фокус возвращается на строки грида для продолжения работы с помощью клавиатуры.
• Ctrl + Insert добавляет новую строку в таблицу. Если в гриде не было строк, добавить первую строку можно путем нажатия стрелки Вниз.
• Пробел в ячейке с эдитором CheckBox ставит или снимает галочку.
• Пробел в ячейке с эдитором Link открывает ссылку из данной ячейки.

При начале ввода значение сразу вводится в выделенную ячейку. Режим редактирования завершается клавишей Tab или Enter. Если ячейка с эдитором Lookup то для ввода выделяется поле DispayMember.

События копирования и вставки

Элемент управления Grid также поддерживает работу с сочетаниями клавиш копирования, вырезания и вставки из буфера обмена. Для этого предназначены следующие свойства:

• cutHandler
• copyHandler
• pasteHandler

Если задавать эти свойства элемента управления, то стандартный механизм копирования и вставки браузера отключается, и обработка осуществляется полностью на основе указанных в свойствах обработчиках.

Поскольку стандартные механизмы полностью отключаются, то реализовывать буфер обмена и работу с ним необходимо самостоятельно.

Пример:

Макет формы

<AnalyticalGrid id="anGrid1" caption="AnGrid (copy)" bind="source" sortable="true" disableNavigation="true" editorWidth="4" width="100%" height="300px" showAggregates="true" showStatusBar="true" showGridInfo="false" copyHandler="anGridCopyHandler">
  <Column datafield="id" text="id" width="50">
    <TextBox/>
  </Column>
  <Column datafield="typeIndex" text="type" width="75">
    <TextBox/>
  </Column>
  <Column datafield="text" text="text" width="150">
    <TextBox/>
  </Column>
</AnalyticalGrid>
<Grid id="grid2" caption="Grid (copy, paste)" editorWidth="4" bind="target1" selectionMode="multiplecellsextended" width="100%" height="300px" showAggregates="true" showStatusBar="true" showButtonText="false" columnsResize="true" showGridInfo="false" copyHandler="grid2CopyHandler" pasteHandler="grid2PasteHandler" editMode="selectedcell">
  <Column datafield="id" text="id" width="50">
    <TextBox/>
  </Column>
  <Column datafield="typeIndex" text="type" width="75">
    <TextBox/>
  </Column>
  <Column datafield="text" text="text" width="150">
    <TextBox/>
  </Column>
</Grid>

Класс формы

// ...
get buffer() {
  return this._buffer
}
set buffer(buffer) {
  this._buffer = buffer
}
anGridCopyHandler(grid, { selection }) {
  if (!selection.length) {
    return
  }
  const source = grid.dataSource()
  this.buffer = selection.map(({ rowindex }) => {
    return source[rowindex]
  })
}
// ...
grid2PasteHandler(grid) {
  if (!this.buffer || !this.buffer.length || !this.buffer.every(item => {
      return item.typeIndex && (item.text !== undefined)
    })) {
    return
  }
  grid.dataSource.push(...this.buffer)
}

---