We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

CSS for hierarchical grid.

Thread ID:

Created:

Updated:

Platform:

Replies:

142314 Jan 28,2019 06:34 AM UTC Jan 30,2019 03:36 AM UTC JavaScript 5
loading
Tags: ejGrid
Alis
Asked On January 28, 2019 06:34 AM UTC

Hello,
I have implemented a hierarchical grid using theChildGrid element. The grid is working fine except that I want to display the small arrow on the right hand side of the grid instead of the left hand side.
I also want to change the icon, display another icon, something like a +, instead of the arrow.
(see picture below)

Any idea of how I can do this?
I know I have therowdatabound event which I have used to display the arrow icon in some cases only.
But I can't manage to move the arrow from left to right and change the icon,

Vignesh Natarajan [Syncfusion]
Replied On January 28, 2019 11:54 AM UTC

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 


Alis
Replied On January 28, 2019 01:16 PM UTC

Hi Vignesh,

Thanks for your help. I just tried it and it works.
However, I can see that there is still a column at the start of the grid:

A td with class "e-detailrowcollapse"  having a div with  class="e-icon e-gnextforward e-hide"

  Any idea of how I can remove it or at least reduce its width so that it is not visible?

Regards,
Alis

Vignesh Natarajan [Syncfusion]
Replied On January 29, 2019 07:17 AM UTC

Hi Alis, 
 
Thanks for the update. 
 
Query: “ Any idea of how I can remove it or at least reduce its width so that it is not visible?” 
 
We have modified the sample as per your requirement. Kindly refer the below link for the sample 
 
 
We have achieved your requirement by applying the below styles to ejGrid. 
 
<style> 
    .e-detailrowcollapse:not(.icon-flipped), .e-detailheadercell, .e-detailindentcell {    /*to hide the extra cell space*/  
        display: none; 
    } 
 
    table > colgroup:first-child {  /*to hide the colgroup of header and content*/  
        display: none; 
    } 
 
    .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> 
 
 
Note: We have provided the solution as an workaround. If you are facing issue with customization then we suggest you to enableRTL in your sample. Refer our help documentation for your sample 
 
 
Regards, 
Vignesh Natarajan  
 


Alis
Replied On January 29, 2019 01:04 PM UTC

Hi Vignesh,

It works! Thank you for your help.

Regards,
Alis

Vignesh Natarajan [Syncfusion]
Replied On January 30, 2019 03:36 AM UTC

Hi Alis, 

Thanks for the update. 

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;