This is a migrated thread and some comments may be shown as answers.

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

3 Answers 21 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Oliver
Top achievements
Rank 1
Oliver asked on 04 Nov 2019, 11:48 AM

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?

 

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 06 Nov 2019, 10:15 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Oliver
Top achievements
Rank 1
answered on 06 Nov 2019, 10:42 AM

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.

0
Ivan Danchev
Telerik team
answered on 07 Nov 2019, 04:11 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Oliver
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Oliver
Top achievements
Rank 1
Share this question
or