Data Grid detailTemplate - Shift collapse arrow from most left to most right of row

[ONG YU FENG]

Hi all

May i ask if there is any way to shift the collapse arrow in data grid detailTemplate from most left to most right?

Thanks
Yu Feng

[Joseph Christ Nithin Issack]

Hi Yu Feng, 

Thanks for contacting Syncfusion support. 

  We have validated your requirement, if you want to change entire Grid from left to right we suggest you to use the `enableRtl` property of the EJ2 Grid.  

  Please find the code example for your reference .  

<GridComponent dataSource={employeeData} 

               detailTemplate={this.template.bind(this)} 

               width="auto" 

               enableRtl={true}> 

 

    <ColumnsDirective> 

 

        <ColumnDirective field="FirstName" 

                         headerText="First Name" 

                         width="110" /> 

 

        <ColumnDirective field="LastName" 

                         headerText="Last Name" 

                         width="110" /> 

  

Sample : https://stackblitz.com/edit/react-nqxwmj?file=index.js 

API : https://ej2.syncfusion.com/react/documentation/api/grid/#enablertl  

If this does not meet your requirement, could you please confirm whether you want to shift only collapse icon from left to right?  

Please get back to us, if you need any further assistance.  

Regards, 

Joseph I. 

[ONG YU FENG]

Hi Joseph

I would just want to shift the collapse icon from left to right without affecting the rest of the text layout. By doing enableRtl would affect the text alignment 

[Joseph Christ Nithin Issack]

Hi Yu Feng, 

  Thanks for your update. 

  Based on your requirement you want to move the expand and collapse icon to the right side without affecting the text layout in the grid. We have logged your requirement as a custom sample and we will provide further details about this  on 7^th September, 2021. We appreciate your patience until then. 

Regards, 

Joseph I. 

[Joseph Christ Nithin Issack]

Hi Yu Feng, 

Thanks for your patience. 

  Based on your requirement you want to move the expand and collapse icon of the group header to the right side of the grid. We have prepared a custom sample to achieve your requirement. 

  Your requirement can be achieved by cloning the expand collapse icon’s cell element and then inserting after the group caption’s cell element with some css style to position the icon to the right side of the grid in the `dataBound` event of the EJ2 Grid. 

Please refer the code example below. 

dataBound() { 

    var expandIcon = $('.e-recordplusexpand') 

      .last() 

      .clone(); 

    $('.e-recordplusexpand').remove(); 

    $('.e-groupcaption').after(expandIcon); 

    $('.e-recordplusexpand').each(function() { 

      $(this) 

        .children() 

        .css('float', 'right'); 

      $(this) 

        .children() 

        .css('padding-right', '15px'); 

    }); 

 

Sample: https://stackblitz.com/edit/react-uv5otg?file=index.js 

Please find the attached sample and revert for more queries. 

Regards, 

Joseph I