DEV Community

Cover image for Como personalizar uma Tag Fixa usando kendo multiselect e AngularJS.
Joabe Ramone
Joabe Ramone

Posted on

Como personalizar uma Tag Fixa usando kendo multiselect e AngularJS.

Resolvi fazer esse post por 3 motivos:

  1. Não achei bastante conteúdo em português.
  2. Quero ajudar a comunidade DEV.
  3. Aprender a fazer publicação.

Eu tinha uma tarefa para ser feita na empresa que eu trabalho, onde precisava fazer um Multi Select com uma Tag fixa. Contendo o nome do primeiro item selecionado e mais a quantidade de itens selecionados.

Alt Text

Só que o problema era que a versão do Kendo era antiga e não tinha muitos recursos, então procurei algumas soluções para fazer esse Multi Select.

  <select id="idCombo"
          kendo-multi-select
          k-ng-model="valoresSelecionados"
          k-options="kendoOptions">
  </select>
Enter fullscreen mode Exit fullscreen mode

Para controlar o nome fixo no input, eu precisei colocar como atributo no Options do Kendo, ou seja, primeiramente o campo tagMode deve ser 'single'. Depois eu precisei fazer um template pra ficar do jeito que queria, aparecendo o nome no campo. Exemplo do atributo options passado pro kendo, pode variar de acordo da estrutura do projeto.

options = {
            dataTextField: 'nome', //campo que vai aparecer na combo
            autoClose: true, //fechar toda vez que selecionar 
            tagMode: 'single', //Deixa uma tag fixa
            tagTemplate: '<span> {{ nome }} + {{ valoresSelecionados.length }} </span>', 
        };
Enter fullscreen mode Exit fullscreen mode

Para fazer com que o nome do campo ficasse dinâmico, eu criei um observador $watch do AngularJS. Então toda vez que o meu array $scope.valoresSelecionados tivesse alguma modificação é executado um função anônima que coloca o primeiro nome no $scope. Saiba mais sobre isso nesse link. https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

$scope.$watch('valoresSelecionados', function () {
                if ($scope.valoresSelecionados.length > 0) {
                    $scope.nome = $scope.valoresSelecionados[0].nome);
            });
Enter fullscreen mode Exit fullscreen mode

Espero ter ajudado em algo, esse foi meu primeiro post aqui no DEV e pretendo postar mais sugestões.

Qual quer duvida ou sugestão pode comentar que vou ficar feliz!

Vlw!

Top comments (0)