Quando utilizar a diretiva totvs-select, a mesma assumirá o comportamento de um campo de entrada de dados com funcionalidades para a seleção de dados.
<totvs-field totvs-select>
...
</totvs-field>
Propriedades que podem ser utilizadas em ambas diretivas, totvs select com zoom ou totvs select com remote data.
Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| select-id | String | - | (Obrigatório) Código do campo principal no model |
| select-description | String | - | (Obrigatório) Código do campo de descrição no model |
| delay | Number | 500 (0,5 segundos) | Indica quanto tempo após o ultimo caracter no campo que será disparada a função para carregar os dados. |
| min-length | Number | 1 | Número mínimo de caracteres que o usuário deve digitar antes que a pesquisa seja realizada |
| filter | String | contains | Utilizado para filtrar as sugestões, conforme passado no campo de busca. Pode ser utilizado: contains, startswith ou endswith. |
| return-object | Attribute | select-id | Caso você queira que ao selecionar um dado, retorne um objeto, você pode adicionar este atributo, return-object, na tag da sua diretiva. O padrão é que retorne o valor que contém no atributo select-id. |
| t-no-data | String | 'l-no-data' | Tradução da literal que é mostrada quando não houver dados na lista do Totvs Select. Por padrão será adicionado a literal de tradução 'l-no-data', portanto deve ser adicionado ao translations.js da aplicação. Caso queria adicionar ao translations.js do módulo, pode utilizar esta propriedade e passar da seguinte maneira: t-no-data="{{ ::'l-no-data' | i18n : [] : 'js/exemplo' }}". |
| ng-required | Boolean | - | Adiciona um validador e faz ser obrigatório informar algum valor no campo. Verifique como utiliza-lo para fazer validações: Validação |
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| select-service | String | - | (Obrigatório) Nome do serviço do zoom (utilizado na busca das informações no momento da digitação) |
| select-init | Object/Array | - | Objeto ou array para que seja considerado no applyFilter como filtro. Este valor pode ser recuperado na função applyFilter no serviço do zoom, vai estar atributo ao parâmetro: init. Deve ser informado através de um valor do controller ou passando direto o objeto para o select-init. |
| select-match | Object | Utiliza os valores do select-id e select-description | Pode ser passado objeto json contendo os atributos e os separadores que serão utilizados na apresentação dos dados. Deve seguir o padrão a seguir: '[{"field": "cod_country", "separator": " - "}, {"field": "des_country"}]' |
| link | String | - | Quando utilizado apresenta-se como um item na lista de itens retornados do servidor e ao selecionar o item o mesmo acessará a URL passada na propriedade link, por exemplo: link="/customer/new". |
| link-text | String | "Adicionar" | Corresponde ao texto do link que será apresentado na lista de itens retornados. |
Observação
Caso utilizar o totvs-select com a opção de zoom, é necessário pelo menos, passar o atributo zoom-service Totvs Zoom.
Os demais atributos para o funcionamento do zoom devem ser passados como atributos do totvs-select.
| Nome | Tipo | Padrão | Versão | Descrição |
|---|---|---|---|---|
| t-data-source | Object | Array | kendo.data.DataSource | - | A partir da 12.1.15 | Este atributo é responsável carregas os items no totvs select. Através do dataSource é possível carregar itens remotos. Informações básicas a ser informada:
Para mais detalhes como serverPaging, ParameterMap, etc.. Veja mais em: http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#configuration-dataSource e http://docs.telerik.com/kendo-ui/api/javascript/data/datasource |
<totvs-page-form>
<totvs-field
totvs-select
ng-model="selectedCountry"
select-id="cod_country"
select-description="des_country"
select-service="module.country.zoom">
</totvs-field>
</totvs-page-form>
<totvs-page-form>
<totvs-field
totvs-select
ng-model="controller.model"
label="Cliente:"
t-no-data="{{ ::'l-no-data' | i18n }}"
placeholder="Selecione.."
canclean
select-id="id"
select-description="name"
t-data-source="controller.dataSource">
</totvs-field>
</totvs-page-form>
// JS - Controller
ctrl.dataSource = kendo.data.DataSource({
transport: {
read: {
url: "http://187.94.59.40:8081/rest/demo/hotels/",
dataType: "json"
}
},
serverFiltering: true,
schema: {
data: "data"
}
});