Hi Alis,
Thanks for contacting Syncfusion support.
Query: “ I want to display the small arrow on the right hand side of the grid instead of the left hand side.”
From your query, we understand that you need to render the hierarchy Grid arrow icon on right side. We have achieved your requirement using the column template feature of the Grid. Please refer the below link for the sample.
Refer the below code example.
In the below code example we have hidden the expand icon in the grid in left side. Using the column template we have placed the plus icon in the last column of the grid.
|
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div id="Grid"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: data,
allowSorting: true,
columns: [
-------
{ headerText: "", template: "#check",textAlign: ej.TextAlign.Center, width: 25 },
],
childGrid: {
columns: [
-----
],
},
});
});
</script>
<script id="check" type="text/x-jsrender">
<div class="e-detailrowcollapse icon-flipped">
<div class="e-icon e-gnextforward rightexpand"></div>
</div>
</script>
<style>
.icon-flipped {
transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
border-top-width:0px !important;
}
.e-detailheadercell + .e-headercell{
border-left-width:0px !important;
}
.e-gnextforward:not(.rightexpand){
visibility:hidden
}
.rightexpand::before{
content: "\e676" !important;
}
</style> |
Please refer the below help documentation.
We also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive and lightweight.
We suggest you look into our following product page for more details.
Demo page for ej2 Grid
Please get back to us if you need further assistance on this.
Regards,
Vignesh Natarajan
