Custom header template with sorting

[ANTONIO]

Hi. The documentation (https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/custom-headers/) shows how to make custom headers, but there is no example of a custom header with functional sorted colums (like the first grid on this page -> https://www.telerik.com/kendo-vue-ui/components/grid/sorting/ ).

I want to have a custom header template and I also want to click on it to sort the column. I actually managed to do that, but the arrows are missing. Here's a code sample:

<template #headerTemplate="{props}">
   <span @click="headerTemplateClickHandler(props)">{{ props.title }}</span>
</template>

headerTemplateClickHandler(props){
      const existentRuleIndex = this.sort.findIndex(rule => rule.field === props.field);
      if (existentRuleIndex >= 0) {
        this.sort[existentRuleIndex ].dir =
          this.sort[existentRuleIndex ].dir === "desc" ? "asc" : "desc";
      } else{
        this.sort.push({
          dir: 'desc',
          field: props.field
        })
      }
      props.sortchange({
         sort: this.sort
      });
    }

With this code I managed to sort the column, but the arrow indicators do not show up in the header.

[Petar]

Hi ANTONIO,

When using custom templates we have to define the whole functionality of an element that is customized. In your scenario, this includes also the sorting arrows.

Here is a StackBlitz example demonstrating a possible approach to defining a custom header template in which the sort arrows are visible. The template used for the header is as follows:

<template v-slot:headerTemplate="{ props, listeners }">
    <a class="k-link" @click="listeners.click" :title="props.title"
    >{{ props.title }} Custom
    <span
        class="k-icon k-i-sort-asc-sm"
        :class="{ hide: hideUpArrow }"
    ></span>
    <span
        class="k-icon k-i-sort-desc-sm"
        :class="{ hide: hideDownArrow }"
    ></span>
    </a>
</template>

With the code in yellow, we are defining the sorting arrows in the custom template. 

I hope the provided example will help you achieve what you need in your application.

Regards,
Petar
Progress Telerik

[ANTONIO]

Your example led me to a custom solution, thanks again Petar!