Kendo Grid Column for v-slot and radio button

[S]

I have below item in my 'columns' in 'data' function of my grid component. How can I write it in <kendo-grid-column> tag format?

I also need my isActive to render as a radio button all the time. Please help with these 2 things.

{ cell: "myTemplate", filterable: false, width: "210px" }

 

This is what I have so far. It display all columns except my v-slot.

<grid :style="{ height: '300px', width: '60%' }"

      ref="grid"

      :data-items="gridData"

      :pageable="pageable"

      :sortable="sortable"

      :skip="skip"

      :total="total"

      :edit-field="'inEdit'"

      @itemchange="itemChange"

    >

      <kendo-grid-column field="emailAddress" title="Account" :width="120">

      </kendo-grid-column>

      <kendo-grid-column

        field="Description"

        title="Description"

        :width="120"

      ></kendo-grid-column>

      <kendo-grid-column

        field="isActive"

        title="Is Active"

        :width="120"

      ></kendo-grid-column>

      <kendo-grid-column

        cell="myTemplate"

        filterable="false,"

        :width="120"

      ></kendo-grid-column>

      <template v-slot:myTemplate="{ props }">

        <custom

          :data-item="props.dataItem"

          @edit="edit"

          @save="save"

          @cancel="cancel"

      /></template>

[Petar]

HI S,

The current thread is tagged with Kendo UI for Vue Wrapper but the shared definition is from the Kendo UI for Vue Native Grid. Which Grid do you use? 

If you are using the Native Grid, it doesn't support the kendo-grid-column syntax. The reason why data is visualized in the Native Grid is that when the "columns" prop is not defined all gridData is displayed. 

If you want to use the Native Grid, here is an implementation similar to the one you shared but without the kendo-grid-column definition.

Regards,
Petar
Progress Telerik

[S]

Hi Peter, I was trying to work with kendo-grid-column to make my own checkbox element using grid wrapper. But, I can see from the link you sent that I can achieve that using native grid too. I'll give that a try. Thanks.

One question about native grid, I do see a "GridVue3" component in the native grid library. How is that different from "Grid" component imported from Native Grid Library? I did'nt find it in the documentation (may have missed!). But I see it prompted in my VSCode intellisense. Can you share any documentation about GirdVue3 imported from "@progress/kendo-vue-grid".?

[S]

I was able to get the checkbox working with the native grid. Thanks. Can you point me to using kendo-grid-column to achieve the same result. i.e  kendo-grid-column element of input type checkbox as one of the columns.

[Plamen]

I would like to elaborate once again - kendo-grid-column is an element that is part of Kendo Vue Wrapper Grid - (a wrapper of the Kendo jQuery grid). If you  want to use it you can take this approach by any reason - https://stackblitz.com/edit/fatoax-rgmcby?file=src/main.vue

If you don't have special need to use the wrapper we strongly recommend using Native Vue Grid - in it we just use the 'columns' prop to define the columns of the grids. It have the ability to use the native Vue named slots as cell template as for example it is done here - https://stackblitz.com/edit/k5ipko?file=src%2Fmain.vue

As for the GridVue3 - it is a vue 3 improved type object - if you observe some issues with the 'Grid' item you can try the 'GridVue3'. A documentation about it is not live yet but it is expected in the few next weeks.

Hope this information will be helpful.

Greetings,

Plamen