New to Kendo UI for Vue? Start a free 30-day trial

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, 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.

Change Theme

Theme

Loading ...

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.

jsx

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