Row Reorder
The current article discussed how the rows of the Kendo UI for Vue Native Grid component can be reordered.
Two examples are provided below, each demonstrating a different approach to styling the line that indicates where a given row will be moved.
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.
The following example demonstrates how to implement row reordering in the Kendo UI for Vue Native Grid using CSS to style the drop line. The tdClass is used to apply the appropriate CSS class to the td elements based on the current drop position.