kendo-vue-ui how to add a buttons to the end of dropdown list

Question

I am trying to add the button to the end of the list in Kendo Dropdownlist using Vue templates.

The sample is given on the link

The sample shown in the examples add the button to each iteration of the items in the list.

But i wanted to display the items as shown in the below images:

What i did for now:

<template>
     <kendo-dropdownlist v-model="dropdownlistValue" 
                        :template="itemTemplate"
                        :data-source="CompanyList"
                        :data-text-field="'text'"
                        :data-value-field="'value'"
                        :filter="'contains'">
     </kendo-dropdownlist>
</template>

<script>
   import Vue from 'vue'
   import Template from "./Template.vue";
   var itemTemplate = Vue.component(Template.name, Template);
   export default {
    methods: {
      itemTemplate: function(e) {
         return {
           template: itemTemplate,
           templateArgs: e
         };
      }
    }
  }
</script>

Template.Vue

<template>
    <span>
        <button @click="buttonClick">{{templateArgs.value}}</button>
        {{templateArgs.text}}
    </span>
</template>

<script>
export default {
  name: "template1",
  methods: {
    buttonClick: function(e) {
      alert("Button click");
    }
  },
  data() {
    return {
      templateArgs: {}
    };
  }
};
</script>

How can i add the Button templates on the kendo dropdownlist at the end. not on the each iteration on the items in the list.

Or, is there any other work around?

Please help!

Answer 1

I am able to solve this issue by using the footer-template, available on Kendo-Ui-Vue by default.

Below is the some code snippet which i used.

HTML

<kendo-dropdownlist 
         @open="onOpen" 
         :footer-template="footerTemplate"
         v-model="dropdownlistValue" 
         :data-source="CompanyList"
         :data-text-field="'text'"
         :data-value-field="'value'"
         filter="'contains'"> 
</kendo-dropdownlist>

SCRIPT

methods: {
    onOpen(e) {
        var deleteAction = document.body.querySelectorAll(".k-footer");
        deleteAction.forEach(el => {
            el.addEventListener("click", this.buttonClick);
        });
    },
    buttonClick() {
        alert("hello")
    } 
},
data() {
      return {
       Title: null,
       footerTemplate: '<button type="button" class="btn btn-link btn-sm">Add New...</button>'
   }
}