Completed
Last Updated: 22 Mar 2023 14:02 by ADMIN
Romain
Created on: 22 Mar 2023 12:04
Category: Kendo UI® for Vue
Type: Feature Request
0
Grid Component should add a `selected-cell` option that works like Cell Template

Hey there!

It would be great to add an option to the <Grid /> component that allows specifying a custom cell template specifically for the "select" column.
Looking at the documentation, there is an example that shows how to do something similar, but it overrides the complete CellRenderer for all columns.

Here is a minimum example of the API we could have:

<script lang="ts" setup>
  import { Grid } from '@progress/kendo-vue-grid';
</script>

<template>
  <Grid
    selected-field="selectedField"
    selected-cell="mySelectCell"
  >
    <template #mySelectCell="{ props }">
      <!-- Checkbox or whatever you want -->
    </template>
  </Grid>
</template>


1 comment
ADMIN
Petar
Posted on: 22 Mar 2023 14:02

Hi, Romian.

The desired functionality of defining a custom template for the select column inside the Grid can be achieved with the current implementation of the component. 

Here is a StackBlitz example demonstrating how we can define our own template for the selection column. In this project we have the following template:

<template #mySelectCell="{ props }">
    <td colspan="1" class="k-table-td" role="gridcell" dataindex="1">
    <KCheckbox
        :id="props.id"
        :size="'large'"
        @change="onSelectionChange({ dataItem: props.dataItem })"
    />
    <label class="k-checkbox-label" :for="props.id"></label>
    </td>
</template>

and the following configuration for the selected column:

columns() {
    return [
    {
        field: 'selected',
        width: '50px',
        headerSelectionValue: this.areAllSelected,
        cell: 'mySelectCell',
    },
    ...this.staticColumns,
    ];
}

The important thing in the above definition is that we should wrap the content of the selected column using the code in green. In the current example, we are using the Kendo UI for Vue Native Checkbox component with a size property set to "large". Based on your scenario you can use the component you need. The important thing is to call the onSelectionChange event once you want to select/deselect a given row.

Because of the above example, I am marking the status of the current FR to "Completed" as the desired functionality is already available for the Native Grid.

Please check the above solution and let me know if you have questions about the suggested implementation.

Looking forward to your reply.

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.