Documentation

Class: DataGrid

mvcomponents/datagrid. DataGrid

DataGrid

Grid simples para exibição de dados tabulados. Faz a exibição de dados de acordo com os valores informados em DataGrid#setColumns e DataGrid#setData.

new DataGrid()

Returns:
Type
DataGrid
Examples
interface Pessoa {
     id: number;
     nome: string;
     sobrenome: string;
     idade: string;
     pais: string;
 }
 let gridForm: Form = new Form();
 let grid:DataGrid<Pessoa> = new DataGrid<Pessoa>()
   .setColumns([
       {name: "nome", title: "Nome", sortable: true, width: 25},
       {name: "sobrenome", title: "Sobrenome", sortable: true, width: 25},
       {name: "idade", title: "Idade", sortable: true, width: 25},
       {name: "pais", title: "País", sortable: true, width: 25}
   ])
   .addTableStyle(EGridStyle.TABLE_HOVER, EGridStyle.TABLE_BORDERED, EGridStyle.TABLE_STRIPED);

   gridForm.append(grid);

   grid.setData([
       {id: 1, nome: "Magee", sobrenome: "Ross", idade: "47", pais: "Italy"},
       {id: 2, nome: "Beau", sobrenome: "Parrish", idade: "40", pais: "Uruguay"}
   ]);
//custumizando o html do cabeçalho do campo 'id' e a exibição da coluna 'País'.
 let grid:DataGrid<Pessoa> = new DataGrid<Pessoa>()
   .setColumns([
       {name: "id", title: "", width: 25,headerRender:col=>`${col.title}*`},
       {name: "nome", title: "Nome", sortable: true, width: 25},
       {name: "sobrenome", title: "Sobrenome", sortable: true, width: 25},
       {name: "idade", title: "Idade", sortable: true, width: 25},
       {name: "pais", title: "País", sortable: true, width: 25,render:item=>`Nacionalidade de ${item.pais}`}
   ]);


   gridForm.append(grid);

   grid.setData([
       {id: 1, nome: "Magee", sobrenome: "Ross", idade: "47", pais: "Italy"},
       {id: 2, nome: "Beau", sobrenome: "Parrish", idade: "40", pais: "Uruguay"}
   ]);
//custumizando o html das linhas do campo 'idade' com um componente.
 let grid:DataGrid<Pessoa> = new DataGrid<Pessoa>()
   .setColumns([
       {name: "id", title: "", width: 25,
       {name: "nome", title: "Nome", sortable: true, width: 25},
       {name: "idade", title: "Idade", sortable: true, width: 25, renderElement : $row => new NumericStepper().setValue($row.idade).setSize(12) }
   ]);


   gridForm.append(grid);

   grid.setData([
       {id: 1, nome: "Magee", sobrenome: "Ross", idade: "47", pais: "Italy"},
       {id: 2, nome: "Beau", sobrenome: "Parrish", idade: "40", pais: "Uruguay"}
   ]);
//custumizando a coluna 'id' como checkable (automaticamente as linhas tambem serao ajustadas para checkbox).
 let grid:DataGrid<Pessoa> = new DataGrid<Pessoa>()
   .setColumns([
       {name: "id" , width: 25, checkable:true},
       {name: "nome", title: "Nome"},
       {name: "sobrenome", title: "Sobrenome"}
   ]);

   gridForm.append(grid);

   grid.setData([
       {id: 1, nome: "Magee", sobrenome: "Ross", idade: "47", pais: "Italy"},
       {id: 2, nome: "Beau", sobrenome: "Parrish", idade: "40", pais: "Uruguay"}
   ]);

Methods

addData(data)

Adiciona novos dados ao conjunto de dados existente na grid.

Parameters:
Name Type Description
data Array.<T>

addSelectedIndexes(lista)

adiciona mais os registros da tabela pelo array de indeces passados como parametro

Parameters:
Name Type Description
lista Array

de indices para selecionar
Returns:
Type
DataGrid

addSort(index, asc)

Método interno utilizado para controlar as colunas que foram clicadas para ordenação.

Parameters:
Name Type Description
index number
asc boolean
See:
  • DataGrid.onSortingChange

addTableStyle(style)

Adiciona estilos à grid.

Parameters:
Name Type Argument Description
style Array.<EGridStyle> <repeatable>

Estilos a serem adicionados
See:
  • EGridStyle EGridStyle.TABLE_CONDENSED
Examples

Faz com que as linhas da tabela exibam cores intercaladas.

myGrid.addTableStyle(EGridStyle.TABLE_STRIPED);

Aplica bordas à todas as células da tabela.

myGrid.addTableStyle(EGridStyle.TABLE_HOVER, EGridStyle.TABLE_BORDERED, EGridStyle.TABLE_STRIPED);

Diferencia visualmente a linha da tabela na qual o cursor do mouse está sobre.

myGrid.addTableStyle(EGridStyle.TABLE_HOVER, EGridStyle.TABLE_BORDERED, EGridStyle.TABLE_STRIPED);

Aplica bordas apenas às linhas da tabela.

myGrid.addTableStyle(EGridStyle.TABLE_HOVER, EGridStyle.TABLE_BORDERED, EGridStyle.TABLE_STRIPED);

block(block)

Bloqueia a grid, não permitindo que nenhuma ação do usuário possa ser realizada sobre ela.

Parameters:
Name Type Description
block boolean
See:
  • DataGrid.blocked

clear()

Limpa os dados exibidos pela grid.

See:
  • DataGrid#data

clearSelection()

Returns:
Type
DataGrid

getCheckeds()

Retorna todos os valores representados pelas linhas que estão checadas na grid para a coluna que está marcada como checkable.

See:
  • DataGrid.selectedData

getCheckedsIndexes()

Retorna um array com o indice de todos os valores checados na grid para a coluna que está marcada como checkable.

See:
  • DataGrid.selectedData

getColumns()

Retorna as colunas que estão sendo exibidas pela grid.

See:
  • DataGrid.setColumns

getData()

Retorna os dados que estão sendo exibidos pela grid.

See:
  • DataGrid.setData

getEmptyText()

Retorna o texto que será exibido caso a grid não possua dados para listar.

getHeight()

Retorna o height do tbody da grid

Returns:
Type
DataGrid

getInfiniteScrollClass()

Retorna a classe css que adiciona o estilo de inifite scroll à grid.

getSelectedItems()

Retorna todos os valores representados pelas linhas que estão selecionadas na grid.

See:
  • DataGrid.selectedData

getStyle()

Transcreve os valores do estilo da grid de acordo com as classes css que representam cada estilo.

See:
  • DataGrid.styles

isInfiniteScroll()

Retorna o true caso a grid esteja com rolagem infinita

Returns:

isInfiniteScroll

Type
boolean

isSingleSelection()

Returns:
Type
boolean

refresh()

Atualiza o DataGrid.

Returns:
Type
DataGrid

selectAll()

seleciona todos os registros da tabela

Returns:
Type
DataGrid

selectRow()

Método interno utilizado para selecionar a linha que foi clicada. Caso a linha já esteja no conjunto de DataGrid.selectedData, será removida do mesmo se a grid tiver o valor da proprieade DataGrid.isSingleSelection = false.

See:
  • DataGrid.onItemSelect

setBottom(bottom)

Configura o height do DataGrid de acordo com a altura do mesmo. este método conflita com {DataGrid.setHeight} e para que o mesmo funcione adequadamente o container em qual o DataGrid está adicionado deve ter um height definido seja em 'px' ou '%'

Parameters:
Name Type Description
bottom number
Returns:
Type
DataGrid

setCheckeds(indice)

marcar como checado um ou varios itens da datagrid de acordo com o indice informado para a coluna marcada como checkable.

Parameters:
Name Type Description
indice Array.<number>
Returns:
Type
DataGrid

setColumns(columns)

Atribui as colunas que serão exibidas na grid

Parameters:
Name Type Description
columns Array.<ITreeGridColumn>
Returns:
Type
DataGrid

setData(data)

Atribui os dados que serão exibidos pela grid. Toda vez que este método é chamado a listagem é atualizada.

Parameters:
Name Type Description
data Array.<T>

setEmptyText(text)

Atribui o texto que será exibido caso a grid não possua dados para listar.

Parameters:
Name Type Description
text string

setHeight(height)

Atribui um height em 'px' para o tbody da grid, este metodo é conflitante com {DataGrid.setBotton}

Parameters:
Name Type Description
height number
Returns:
Type
DataGrid

setInfiniteScroll(isInfiniteScroll)

Parameters:
Name Type Description
isInfiniteScroll boolean

setSelectedIndex(indice)

seleciona um item da datagrid de acordo com o indice informado

Parameters:
Name Type Description
indice number
Returns:
Type
DataGrid

setSelectedIndexes(lista)

seleciona os registros da tabela pelo array de indeces passados como parametro

Parameters:
Name Type Description
lista Array

de indices para selecionar
Returns:
Type
DataGrid

setSingleSelection(yes)

Atribui o valor que indica se a grid permite seleção múltipla ou não.

Parameters:
Name Type Description
yes boolean