Row Reorder
The current article discussed how the rows of the Kendo UI for Vue Native Grid component can be reordered.
There are two examples below. Each example styles the line that shows where a given row will be moved through a different approach.
Use separate component to style the drop line inside the Grid
The below example uses the DragPointer
component to visualize where the moved row will be dropped.
Use CSS to style the drop line inside the Grid
The drop position of the moved Grid row in the below example is styled only with CSS. In the template of the CustomCell
component there is the following Grid cell definition. Each of the td
elements in the below code has a tdClass
class that is used to visualize the drop line.
<td :data-itemid="dataItem.ProductID" :class="tdClass">
<span class="k-icon k-i-reorder"
:style="{cursor: 'move'}">
</span>
</td>
<td v-else :data-itemid="dataItem.ProductID" :class="tdClass">
{{ getNestedValue(field, dataItem) }}
</td>
The tdClass
is a computed property controlled by dropPosition prop passed from the parent component.