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, or
• Use CSS to style the drop line.

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.

Copy Code<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.

Suggested Links

• API Reference of the Grid
• API Index of the Grid
• Grid - Drag and Drop Rows Between Two Grids
• Add Style to a Dragged Row in the Native Grid