Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including dts-backoffice-kendo-grid with all npm packages installed. Try it out:

require("@progress/kendo-angular-grid/package.json"); // @progress/kendo-angular-grid is a peer dependency. require("@progress/kendo-angular-inputs/package.json"); // @progress/kendo-angular-inputs is a peer dependency. require("@progress/kendo-angular-excel-export/package.json"); // @progress/kendo-angular-excel-export is a peer dependency. require("@progress/kendo-angular-common/package.json"); // @progress/kendo-angular-common is a peer dependency. require("@progress/kendo-angular-buttons/package.json"); // @progress/kendo-angular-buttons is a peer dependency. require("@progress/kendo-angular-dropdowns/package.json"); // @progress/kendo-angular-dropdowns is a peer dependency. require("@progress/kendo-angular-pdf-export/package.json"); // @progress/kendo-angular-pdf-export is a peer dependency. require("@progress/kendo-angular-popup/package.json"); // @progress/kendo-angular-popup is a peer dependency. require("@progress/kendo-angular-dateinputs/package.json"); // @progress/kendo-angular-dateinputs is a peer dependency. require("@progress/kendo-data-query/package.json"); // @progress/kendo-data-query is a peer dependency. require("@progress/kendo-angular-intl/package.json"); // @progress/kendo-angular-intl is a peer dependency. require("@progress/kendo-angular-l10n/package.json"); // @progress/kendo-angular-l10n is a peer dependency. var dtsBackofficeKendoGrid = require("dts-backoffice-kendo-grid")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

dts-backoffice-kendo-grid v0.0.24

Componente que implementa o Kendo GRID

Exemplo de uso:

Importar o módulo:

import { DtsBackofficeKendoGridModule } from 'dts-backoffice-kendo-grid';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        DtsBackofficeKendoGridModule,
    ],
    providers: [
        ...
    ],
})

Utilizar no html:

<dts-kendo-grid 
    class ="po-md-12"
    [d-columns]="columns"
    [d-data]="dataItems"
    [d-groupable]="true"
    [d-selectable]="true"
    (d-selection-change)="onSelectionChange($event)"
    (d-show-more)="loadMoreData()"
    [d-show-more-disabled]="!hasNext"
    [d-sortable]="true"
    [d-filterable]="true"
    [d-editable]="true"
    [d-reorderable]="true">
</dts-kendo-grid>

Como deve ficar:

Exemplo

Parâmetros:

INPUT - d-sortable (boolean) Habilta a ordenação da coluna ao clicar no cabeçalho.

INPUT - d-selectable (boolean) Cria uma coluna no inicio do GRID para permitir a seleção de uma ou mais linhas.

INPUT - d-groupable (boolean) Habilita a opção para agrupamento de colunas.

INPUT - d-data (Array < any >) Lista de objeto a serem exibidos.

INPUT - d-columns (Array < DtsKendoGridColumn > ) Objeto com as informações das colunas a serem exibidas.

INPUT - d-show-more-disabled (boolean) Habilitar ou desabilitar o botão "Carregar Mais Resultados".

INPUT - d-show-cancel-button (boolean) Habilita o botão "Cancelar" permitindo que o usuário possa cancelar a alteração da linha.

INPUT - d-show-remove-button (boolean) Habilita o botão "Cancelar" permitindo que o usuário possa remover uma linha do grid.

INPUT - d-show-add-button (boolean) Habilita o botão para adicionar linhas.

INPUT - d-save-action (string) Executa um método antes de salvar uma linha editada no dts-kendo-grid. Este método recebe como parâmetro o atributo "event", para acessar o objeto selecionado no dts-kendo-grid utilizando o "event.data". Se o método retornar o valor booleano "true", a edição da linha é confirmada, caso contrário as informações alteradas serão canceladas.

INPUT - d-remove-action (string) Executa um método antes de remover uma linha selecionada no dts-kendo-grid. Este método recebe como parâmetro o atributo "event", para acessar o objeto selecionado no dts-kendo-grid utilizando o "event.data". Se o método retornar o valor booleano "true", a remoção da linha é confirmada, caso contrário as informações serão mantidas.

INPUT - d-add-action (string) Método executado antes de adicionar uma nova linha ao dts-kendo-grid. Esse método recebe como parâmetro o atributo "data" contendo a referência do objeto que será adicionado, dessa forma é possível informar alguns valores para a nova linha. Para que as alterações sejam efetivadas, deve-se retornar "true". É possível cancelar a inclusão de uma nova linha retornando "false", nesse caso as informações serão descartadas e a nova linha não será incluída no dts-kendo-grid.

INPUT - d-literals (objeto) Objeto com as literais que serão utilizadas dentro do componente, caso não seja enviado será utilizado os valores de tradução que o componente já possui em português, inglês e espanhol.

// Pode ser enviado um objeto parcial, por exemplo, quero customizar apenas a tradução do 'groupPanelEmpty' então mando o objeto abaixo:

{
    groupPanelEmpty:  'Minha tradução',
}

// Lista completa de literais
{
    noRecords:  'Nenhum registro encontrado',
    groupPanelEmpty:  'Arraste o cabeçalho da coluna e solte aqui para agrupar os dados por essa coluna',
    filterAndLogic:  'E',
    filterOrLogic:  'Ou',
    filterContainsOperator:  'Contêm',
    filterNotContainsOperator:  'Não contêm',
    filterEqOperator:  'Igual',
    filterNotEqOperator:  'Não é igual',
    filterStartsWithOperator:  'Começa com',
    filterEndsWithOperator:  'Termina com',
    filterIsNullOperator:  'É nulo',
    filterIsNotNullOperator:  'Não é nulo',
    filterIsEmptyOperator:  'É vazio',
    filterIsNotEmptyOperator:  'Não é vazio',
    filterClearButton:  'Limpar',
    filterFilterButton:  'Filtrar',
    filterGteOperator:  'Maior ou igual que',
    filterGtOperator:  'Maior que',
    filterLtOperator:  'Menor que',
    filterLteOperator:  'Menor ou igual que',
    filterAfterOrEqualOperator:  'Depois ou igual que',
    filterAfterOperator:  'Depois de',
    filterBeforeOrEqualOperator:  'Antes ou igual que',
    filterBeforeOperator:  'Antes de',
    filterIsTrue:  'Sim',
    filterIsFalse:  'Não',
    add:  'Salvar',
    showMore:  'Carregar mais resultados'
};

INPUT - d-filterable (boolean) Habilita a opção de filtro nas colunas do GRID.

INPUT - d-actions (Array) Lista de ações que devem ser apresentadas nas linhas do GRID, funciona semelhante a p-actions do portinari.

INPUT - d-reorderable (Boolean) Habilita a mudança da ordem das colunas, através do arrastar e soltar no cabeçalho da coluna.

OUTPUT - d-show-more (Função) Função que deve ser executado ao clicar no botão "showMore" (Carregar mais resultados).

OUTPUT - d-selection-change (Função) Evento de seleção de linha que chama um método do componente. Este atributo é utilizado em conjunto com o atributo "d-selectable".

OUTPUT - d-save-value (Função) Evento disparado ao salvar dados do modo de edição inline, recebendo o modelo que foi alterado.

OUTPUT - d-group-change (Função) Evento disparador quando ocorrer o agrupamento das colunas

Interfaces

DtsKendoGridColumn

PropriedadeTipoDescrição
columnstringNome do atributo do JSON passado no atributo "d-data" do componente
labelstringNome da coluna a ser exibido na tabela
widthnumberTamanho da coluna em pixels
groupHeaderbooleanInforma se a coluna está agrupada
checkboxbooleanSe for passado "true" é habilitado o componente checkbox na coluna
editablebooleanSe for passado o valor "true" é habilitado o campo de edição no modo edição habilitado
requiredbooleanSe for passado o valor "true" o campo se torna obrigatório no modo edição habilitado
typestringDefine o tipo da coluna. Valores válidos: string, number, date, currency, label e subtitle
formatstringFormata os dados da coluna de acordo com o tipo
labelsArray < DtsLabel >Lista de valores que poderão ser exibidos quando "type" = subtitle
currencystringMoeda utilizada para formatar campos do tipo 'currency' usando o Currency PIPE
symbolstringFormato utilizada para formatar campos do tipo 'currency' usando o Currency PIPE

DtsLabel (Interface utilizado nos campos do tipo label e subtitle)

PropriedadeTipoDescrição
valuestringValor do campo
labelstringTexto que será exibido dentro
colorstringCor que será exbido, deve ser utilizad as cores disponíveis no portinari
tooltipstringTexto que será exibido ao passar o mouse por cima, se aplica apenas para o tipo subtitle
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free