@zeedhi/zd-drag-grid-common

Componente Drag Grid para Zeedhi

Instalação   |    Uso Básico   |    Propriedades   |    Eventos   |   

O componente DragGrid é uma especialização do GridEditable, permitindo alterar a ordem com que as linhas são exibidas com a funcionalidade de arrastar e soltar. Para o funcionamento do componente é necessária uma coluna de ordenação contendo números a partir de 0.

Instalação

Para instalar o pacote basta rodar o seguinte comando:

  npm install @zeedhi/zd-drag-grid

Ou instale os pacotes separadamente:

  npm install @zeedhi/zd-drag-grid-vue @zeedhi/zd-drag-grid-common

Com isso, dois pacotes serão instalados: o @zeedhi/zd-drag-grid-common e o @zeedhi/zd-drag-grid-vue.
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-drag-grid-vue dentro de seu arquivo de configuração zeedhi.ts

import ZdDragGrid from '@zeedhi/zd-drag-grid-vue';

Vue.component('ZdDragGrid', ZdDragGrid);

Já o pacote @zeedhi/zd-drag-grid-common deve ser importado no arquivo controller do componente.

Uso Básico

Para usar, defina a propriedade component como 'ZdDragGrid'.

{
  "name": "example",
  "component": "ZdDragGrid"
}

Propriedades

Nome	Tipo	Default	Descrição
orderColumnName	string	''
orderMode	'asc' | 'desc'	'asc'

---

Eventos

Nome	Propriedades	Descrição
onDragMove	{ component, row, element, event }	Evento disparado ao mover uma linha
onDragStart	{ component, row, element, event }	Evento disparado ao começar a mover uma linha
onDragEnd	{ component, row, element, event }	Evento disparado ao terminar de mover uma linha

---

IDraggable

export interface IDraggable {
  orderColumnName: string;
  orderMode: 'asc' | 'desc';
  getDragChanges: (oldIndex: number, newIndex: number, datasource: IDatasource, editedRows: IDictionary[])
  => { row: IDictionary, value: any }[];
}