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("Изменена ширина столбца таблицы"); });
После выполнения примера вручную изменим ширину второго столбца таблицы. В результате этого фон столбца, ширина которого изменена, будет окрашен в синий цвет:
В консоли браузера будут выведены сообщения об изменении ширины столбца таблицы:
Изменение ширины столбца таблицы...
Изменена ширина столбца таблицы
См. также: