Динамически изменять или устанавливать класс ячейки в Ag Grid

#html #css #angular #ag-grid #ag-grid-ng2

#HTML #css #angular #ag-grid #ag-grid-ng2

Вопрос:

У меня есть Div, размер которого может меняться (изменять размер только div) в зависимости от действий пользователя (маленький и большой просмотр), и этот div содержит ag-grid.
Изначально div / grid загружался в размере сжатия, поэтому я использовал класс в соответствии с этим (размер маленького шрифта, высота, заполнение и т.д.) Для удаления прокрутки
Но я хочу, чтобы при увеличении пользователем размера div класс менялся на другой класс (размер большого шрифта, высота и т.д.), Но я не смог найти никакого grid api или метода для динамической настройки cellClass и headerClass.

Еще одна вещь, которую я могу обновить в gridOptions и загрузить grid в соответствии с новой опцией.

1. Попробуйте, если это поможет ag-grid.com/javascript-grid-cell-styling

2. @dileepkumarjami Я уже установил cellClass и правила cellClass, но мой сценарий немного отличается cellClassRule применяется на основе параметров сетки, но я хочу изменить свойства сетки в родительском div resize

Ответ №1:

Добавьте прослушиватель к событию gridSizeChanged. В прослушивателе проверьте размер окна / div и соответствующим образом примените классы CSS.

 var gridOptions = {
  ...
  onGridSizeChanged: onGridSizeChanged
};

function onGridSizeChanged(params) {
  let newClass = (css class for new width)
  gridOptions.api.getColumnDef(colId).headerClass = newClass;
  gridOptions.api.refreshHeader()
}

1. Эта строка не работает в angular 6, let newClass = (css class for new width) поэтому просто добавьте новый класс во время выполнения этим способом function onGridSizeChanged(params) { gridOptions.api.getColumnDef(colId).headerClass = 'expanded-grid-header'; gridOptions.api.refreshHeader() } Спасибо @Chris, ты указал мне правильное направление

2. Спасибо. Да, ‘(css-класс для новой ширины)’ является заполнителем кода. Рад, что это помогло вашему продвижению.