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.

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme: