DEV Community

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

Posted on

4 2

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!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay