Kendo Grid Column for v-slot and radio button

1 Answer 447 Views
Grid wrapper
S
Top achievements
Rank 1
S asked on 01 Sep 2021, 06:39 PM | edited on 01 Sep 2021, 06:40 PM

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>

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 02 Sep 2021, 08:00 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

S
Top achievements
Rank 1
commented on 03 Sep 2021, 03:21 PM | edited

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
Top achievements
Rank 1
commented on 03 Sep 2021, 05:31 PM | edited

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
Telerik team
commented on 06 Sep 2021, 08:34 AM

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

 

Tags
Grid wrapper
Asked by
S
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or