Как настроить ghost-текст (перетащить имя элемента) с AgGrid - PullRequest
Новая
       34

Как настроить ghost-текст (перетащить имя элемента) с AgGrid

0 голосов
/ 10 июня 2018

В соответствии с заголовком, есть ли способ настроить «призрачный текст» с помощью (неуправляемой) реализации перетаскивания строк в AgGrid через API ?

drag ghost text

Ответы [ 3 ]

0 голосов
/ 26 ноября 2018

onRowDragEnter event, вы можете найти элемент-призрак и затем добавить к нему свой пользовательский класс.

document.querySelectorAll('.ag-dnd-ghost')[0] .classlist.add('my-custom-ghost-element');

Не забывайте следовать иерархии классов, иначе вы быв конечном итоге используйте !important в пользовательском классе :-)

// Для обновления текста

найдите элемент с помощью className ag-dnd-ghost-label

document.querySelectorAll('.ag-dnd-ghost-label')[0] .innerHTML = 'your_custom_text';

Призрачный элемент добавляется только во время перетаскивания, после окончания перетаскивания Ag-Grid удаляет его из домена.

Надеюсь, это поможет

0 голосов
/ 06 июня 2019

Я нашел обходной путь, используя свойство valueGetter для изменения этого текста.Пример конфигурации столбца: 

private dragDropColumn= {
    rowDrag: true,
    ...
    valueGetter: (params) => {
      return params.data.myVariableFromRow;
    }
  }

Надеюсь, это поможет

0 голосов
/ 05 июля 2018

Я исследовал это, и в ag-grid ничего нет.Я достиг этого, прикрепив к событиям onRowDragMove и onRowDragMove.

Я установил переменную класса 'isRowDragging', чтобы делать это только один раз при перетаскивании.

Я использую класс Angular Renderer2 (this.ui), чтобы найти и обновить Элемент метки-призрака.

Все это доступно с vanilla javascript или другими поддерживаемыми средами ag-grid. 

this.gridOptions.onRowDragMove = (params: RowDragMoveEvent) => {
    const overNode = params.overNode;
    const movingNode = params.node;

    if (!this.isRowDragging) {
        this.isRowDragging = true;

        if (!movingNode.isSelected()) {
            if (params.event && params.event.ctrlKey) {
                movingNode.setSelected(true);
            }

            if (params.event && !params.event.ctrlKey) {
                movingNode.setSelected(true, true);
            }
        }

        let labelText: string = '';
        const selectedNodes = this.gridOptions.api.getSelectedNodes();

        if (selectedNodes.length === 1) {
            labelText = selectedNodes[0].data.Name;
        }
        else {
            const guids: string[] = [];
            let folderCount: number = 0;
            let docCount: number = 0;

            selectedNodes.forEach((node: RowNode) => {

                guids.push((node.data.FolderGuid || node.data.DocumentGuid).toLowerCase());

                if (node.data.FolderGuid !== undefined) {
                    folderCount++;
                }
                else {
                    docCount++;
                }
            });

            if (folderCount === 1) {
                labelText = '1 folder';
            }
            else if (folderCount > 1) {
                labelText = folderCount + ' folders';
            }

            if (docCount === 1) {
                labelText += (labelText !== '' ? ', ' : '') + '1 document';
            }
            else if (docCount > 1) {
                labelText += (labelText !== '' ? ', ' : '') + docCount + ' documents';
            }
        }

        console.log(this.ui.find(document.body, '.ag-dnd-ghost').outerHTML);

        this.ui.find(document.body, '.ag-dnd-ghost-label').innerHTML = labelText;
    }
}

this.gridOptions.onRowDragEnd = (event: RowDragEndEvent) => {
    this.isRowDragging = false;
}
...