Remove an icon

[Bhavya Harini]

HI team,

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

Regards,

Bhavya

[Ajith Govarthan]

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'; 

        } 

Sample Link: https://stackblitz.com/edit/angular-jncsa7-8p1svg?file=app.component.css 

Regards, 

Ajith G. 

[Bhavya Harini]

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';

        }

https://ej2.syncfusion.com/documentation/appearance/icons/

I have chnaged the below with some other content but unable to get it. please help on it.

Note: we have bootstrap 4

[Bhavya Harini]

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';  

}  

[Thiyagu Subramani]

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 

Reference :  https://ej2.syncfusion.com/documentation/appearance/icons/?_ga=2.82815441.610655613.1587054890-93686665.1576498953#bootstrap-4 

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  

       } 

Demo Link : https://ej2.syncfusion.com/angular/demos/#/bootstrap4/grid/detail-template 

 

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. 

 

Reference link : https://ej2.syncfusion.com/angular/documentation/api/grid/#allowresizing 

Demo sample : https://ej2.syncfusion.com/angular/demos/#/material/grid/column/column-resizing 

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. 

 

Sample link : https://stackblitz.com/edit/angular-ceqiku-wmzk3h?file=app.component.css 

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

Regards, 

Thiyagu S.