Sticky Rows

[Trevor]

Is it possible to make rows sticky similar to the locked option we have for columns?

[Petar]

Hi Trevor,

Here is a StackBlitz example demonstrating how you can achieve the desired functionality.  To achieve the sticky rows functionality we have to use the cellRender property of the Grid and pass a custom template to it. In the provided example the template we use is the following one:

<template v-slot:cellRenderTemplate="{ props }">
  <td
    v-if="props.dataItem.locked || props.field === 'locked'"
    :style="[
      {
        top: getTop(props.dataItem) + 'px',
        bottom: getBottom(props.dataItem) + 'px',
        'text-align': centerText(props.field),
      },
    ]"
    :class="classNames(props.dataItem, props.className)"
    @click="handleLockRowChange(props.dataItem) && props.field === 'locked'"
  >
    <span
      v-if="props.dataItem.locked && props.field === 'locked'"
      class="k-icon k-i-pin"
    ></span>
    <span
      v-else-if="!props.dataItem.locked && props.field === 'locked'"
      class="k-icon k-i-unpin"
    ></span>
    <span v-else> {{ getNestedValue(props.field, props.dataItem) }} </span>
  </td>
  <td v-else>
    {{ getNestedValue(props.field, props.dataItem) }}
  </td>
</template>

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

Regards,
Petar
Progress Telerik

[Trevor]

Thank you for this! I was already using templates for formatting cell backgrounds so I added the class in there and the top/bottom indicators and it worked perfect!

[Petar]

Hi, Trevor.

I am happy to hear that the suggested implementation has helped you achieve what you need in your application :).