Vue Grid (Native) setting classes for custom template cells different for header and data cells

[Oliver]

HI,

 

I'm using the recent version of vue grid (native) and found an unexpected behavior when setting css classes to cells. I'm using slot templates.

Let's assume the following data item definiton for a grid. The definition uses a template "h-common", with a headerClassName "cssHeader" for the header cells and a template "common" with className "cssClassData" for the data cells.

{ field: 'aFieldname', title: 'aTitle', headerCell: 'h-common', headerClassName: 'cssClassHeader', cell: "common", className: 'cssClassData' }

 

• When debbuging in the browser I see the "th" tag with an applied class attribute "cssClassHeader". So this works fine as expected.
• When inspecting the correspondend "td" tag, the attribute class "cssClassData" is missing. But it is only missing, when I use the slot templates. If I use the standard cells (without slot templates) then the attribute is applied. So data cells seem to work differently than header cells.

I would expect the data cells to behave like the header cells, when setting the class attribute, regardsless of the mode I use (standard, slot templates, render function).

Or did I miss something?

 

[Ivan Danchev]

Hi Oliver,

In the case of cell template since the template contains the td element you need a slightly different approach to apply the class:

const common = Vue.component("template-component", {
    props: {
        dataItem: Object,
        className: String,
    },
    template: `<td :class="className" @dragover="dragOver">
                <span class="k-icon k-i-reorder"
                      draggable="true"
                      style="cursor: 'move'"
                      @dragstart="dragStart"
                      @dragend="dragEnd">
                </span>
              </td>`,
    methods: {
        dragOver(e){
          this.$emit('dragover', this.dataItem);
        },
        dragStart(e) {
          this.$emit('dragstart', this.dataItem);
        },
        dragEnd(e) {
          this.$emit('dragend');
        }
    }
});

The td element will get the class from the className prop:

{ field: 'ProductID', title: '', headerCell: headerCommon, cell: common, headerClassName: 'cssClassHeader', className: 'cssClassData', width: '80px', title: 'Reorder' },

Here's a stackblitz example.

Regards,
Ivan Danchev
Progress Telerik

[Oliver]

Hi Ivan,

 

thank you very much. Your native grid is so flexible, I really learn to love it.

Your solution with component templates is helpfull and works. Here another approach I found out, when just using the "slot" approach:

 

<template v-slot:aSlotName="{props, listeners}">
    <td :class="props.className">
        Some Content
    </td>
</template>

 

So simple that it earned a face palm ;-) Simply access the className via the props attribute which is given to the slot template.

Thank you for you great tools.

[Ivan Danchev]

Hi Oliver,

Thank you for the follow up and for the kind words. I am glad you found another viable approach and setting the cell class worked out as expected.

Regards,
Ivan Danchev
Progress Telerik