New to Kendo UI for Angular? Start a free 30-day trial
RowDragHandleTemplateDirective
Represents the column row reorder cell template of the Grid.
Helps to customize the content of the drag handle cells. To define the cell template, nest an <ng-template>
tag with the kendoGridRowDragHandleTemplate
directive inside the <kendo-grid-rowreorder-column>
tag.
The template context is set to the current data item and the following additional fields are passed:
columnIndex
—The current column index. Use it as an alias for a template variable by utilizing thelet-columnIndex="columnIndex"
syntax.rowIndex
—The provided data row index. Use it as an alias for a template variable by utilizing thelet-rowIndex="rowIndex"
syntax.
html
<kendo-grid [kendoGridBinding]="data" [rowReorderable]="true">
<kendo-grid-rowreorder-column>
<ng-template kendoGridRowDragHandleTemplate>
<span>Drag here</span>
</ng-template>
</kendo-grid-rowreorder-column>
<kendo-grid-column field="Field1"></kendo-grid-column>
<kendo-grid-column field="Field2"></kendo-grid-column>
</kendo-grid>
Selector
[kendoGridRowDragHandleTemplate]