1. Home
  2. Forum
  3. Angular - EJ 2
  4. Remove an icon

Remove an icon

HI team,

How to remove expand icon and replace with our own icon?



Regards,
Bhavya

4 Replies
AG Ajith Govarthan Syncfusion Team April 15, 2020 10:49 AM UTC

Hi Bhavya, 

Greetings from Syncfusion. 

Based on the requirement we have prepared sample in that we have added custom CSS to achieve your requirement. In the sample we have replaced  the actual icons by plus and minus icons using the same way you can customize icons based on your requirement. 

Code Snippet:  
app.component.css 

        .e-grid .e-icon-grightarrow::before, 
        .e-grid-menu .e-icon-grightarrow::before { 
            content: '\e7f9'; 
        } 

    .e-grid .e-icon-gdownarrow::before, 
        .e-grid-menu .e-icon-gdownarrow::before { 
            content: '\e934'; 
        } 



Regards, 
Ajith G. 


BH Bhavya Harini April 15, 2020 12:24 PM UTC

Hi

    .e-grid .e-icon-up-arrow-1::before,
        .e-grid-menu .e-icon-up-arrow-1::before {
            content: '\e85e';
        }
    .e-grid .e-icon-down-arrow-1::before,
        .e-grid-menu .e-icon-down-arrow-1::before {
            content: '\e84f';
        }


I have chnaged the below with some other content but unable to get it. please help on it.
Note: we have bootstrap 4

BH Bhavya Harini April 17, 2020 09:31 AM UTC

HI Team,

I haven't got any reply till 2 days, i have couple of other queries

1. can i increase and decrease the width of table header each cell?
2. How to change onhover effect and selected effect for complete row?
3. how to change complete table background color?
4. how to change menu background color(from white to some other color).see below code

.MT_Menu::before {  
        content: '\e984';  
}  



TS Thiyagu Subramani Syncfusion Team April 17, 2020 02:01 PM UTC

Hi Bhavya, 

Sorry the for the late reply. 

Based on your style sheet code the content (e85e and e84f) is related to the fabric. But in note you have mentioned that are using Bootstrap 4.  

So, we have created an sample using bootstrap 4 icon contents only 


Using below code we have changed contents for bootstrap 4.  

  .e-grid .e-icon-grightarrow::before, 
        .e-grid-menu .e-icon-grightarrow::before { 
            content: '\e734';  // Bootstrap 4’s ChevronUp icon content 
        } 
    .e-grid .e-icon-gdownarrow::before, 
        .e-grid-menu .e-icon-gdownarrow::before { 
            content: '\e705';  // Bootstrap 4’s ChevronDown icon content  
       } 


 
Query 1:  can i increase and decrease the width of table header each cell?  

We suspect your requirement is decrease and increase the width of column. For this case by default we have an option to resizing(Click and drag at the right corner of each column header to resize the column) the column width by defining allowResizing as true. 
 


Query 2: How to change on hover effect and selected effect for complete row? 

Using below CSS code we achieve your requirement. Here we have changed green for row selection and greenyellow for row hover. 

    td.e-selectionbackground.e-active {  
          background-color: green; 
    } 
    tr.e-row:hover { 
      background-color: greenyellow; 
    } 

Query 3:  how to change complete table background color? 

From this query we suspect your requirement is change compete grid table background color. So using below CSS we can achieve this requirement. 

 tr.e-row, 
    .e-grid .e-headercell, .e-grid .e-detailheadercell { 
      background-color: lightslategray; 
    } 
    .e-grid .e-rowcell, 
    .e-grid .e-detailrowcollapse, 
    .e-grid .e-detailrowexpand, 
    .e-grid .e-headercell, .e-grid .e-detailheadercell, 
    .e-grid .e-gridheader { 
      border-color:  black 
    } 

Query 4:  how to change menu background color(from white to some other color).see below code. 
 
Based on your reported icon content we suspect your requirement is change menu background color. Using below CSS you change color. 

 .e-icons.e-columnmenu{ 
      background-color: antiquewhite; 
    } 
    ul#Grid_columnmenu { 
    background-color: antiquewhite; 
} 


We have prepared sample for all above queries. Please refer it. 
 

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

Regards, 
Thiyagu S. 


Loader.
Up arrow icon