Category / Section
How to customize the drag icons while Drag and Drop?
1 min read
TreeGrid allows us to customize the row drag and drop indicators and we can achieve this by defining custom styles in the below class names of the HTML elements.
- e-aboveIcon e-icon - Class name to define the insert above drop icon.
- e-belowIcon e-icon - Class name to define the insert below drop icon.
- e-childIcon e-icon - Class name to define the insert as child row drop icon.
- e-cancelIcon e-icon - Class name to define the row drop restricted icon.
The below code snippet explains how to customize the row drag icons
<style>
.e-treegrid .e-aboveIcon,.e-treegrid .e-belowIcon,.e-treegrid .e-childIcon,.e-treegrid .e-cancelIcon{
color:red;
}
.e-treegrid .e-aboveIcon:before, .e-treegrid .e-belowIcon:before, .e-treegrid .e-childIcon:before, .e-treegrid .e-cancelIcon:before {
font-size: 24px;
}
</style>
< body>
<div id="Container" style="width:100%;height:450px;" />
<script type="text/javascript">
$(function () {
$("#Container").ejTreeGrid({
dataSource: data,
//..
allowDragAndDrop:true,
},
});
});
</script>
< /body>
The below screenshot depicts the color customized row drop icon in TreeGrid
You can find a sample for customizing the row drag and drop icons in TreeGrid here.
