Resizing: function(sender, args);
sender. Источник события;
args. Информация о событии.
Событие Resizing наступает при начале изменения размеров заголовка таблицы.
Для выполнения примера необходимо наличие на html-странице компонента DataGrid с наименованием «grid» (см. «Пример создания компонента DataGrid»). Обработаем события BeforeProcessResize, ColumnResized и Resizing:
// Обработаем событие Resizing
grid.Resizing.add(function(sender, args) {
// Получаем наименование столбца, размеры которого изменяются
var columnName = args.Coord.colIndex;
// Получаем DOM-элемент, представляющий таблицу с ячейками заголовка
var headerTable = grid.getHeaderTable();
// Получаем массив DOM-элементов, представляющих заголовки столбцов
var headers = headerTable.getElementsByClassName("PPDGHeaderCell PPDGColHeader");
// Перебираем в цикле заголовки столбцов
for (var i = 0; i < headers.length; i++) {
// Получаем заголовок столбца
var header = headers[i];
// Получаем идентификатор заголовка столбца
var cellId = header.getAttribute("cell_id");
// Проверяем, содержится ли в идентификаторе наименование изменяемого столбца
if (cellId.indexOf(columnName) != -1) {
// Получаем атрибут заголовка, представляющий стиль
var style = header.style;
// Устанавливаем цвет фона для заголовка столбца
style.backgroundColor = "#86B7FB";
// Прерываем цикл
break;
}
}
});
// Обработаем событие BeforeProcessResize
grid.BeforeProcessResize.add(function(sender, args) {
console.log("Изменение ширины столбца таблицы...");
});
// Обработаем событие ColumnResized
grid.ColumnResized.add(function() {
console.log("Изменена ширина столбца таблицы");
});
После выполнения примера вручную изменим ширину второго столбца таблицы. В результате этого фон столбца, ширина которого изменена, будет окрашен в синий цвет:
В консоли браузера будут выведены сообщения об изменении ширины столбца таблицы:
Изменение ширины столбца таблицы...
Изменена ширина столбца таблицы
См. также: