1. Home
  2. Forum
  3. Angular - EJ 2
  4. Change background color of last item selected

Change background color of last item selected

Greetings,


in my application I have implemented grid toolbar. I have 2 questions regarding this.

  1. I have implemented class in css (.e-select) that is added to toolbar item in click handler event that changes border of selected item, but in addition I would like to remove that border from any other toolbar item except the one that has been clicked last
  2. Instead of border, I would like to change background color of toolbar item. I have tried to add that property in same class aas above, but background did not change

Thank you in advance :)




Attachment: files_551971f0.7z

3 Replies 1 reply marked as answer
SK Satheesh Kumar Balasubramanian Syncfusion Team December 1, 2021 12:33 PM UTC

Hi Ivan, 
  
Thanks for using Syncfusion Products. 
  
Query 1: 
  
We have validated your reported query "I would like to remove that border from any other toolbar item except the one that has been clicked last" and suggest you to use the below customization in toolbar item click handler to achieve your requirement. 
  
app.component.ts: 
  clickHandler(args: ClickEventArgs): void { 
    let target = document.querySelector( 
      '.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item.e-select' 
    ); 
    if (target) { 
      for (let i = 0; i < this.toolbar.items.length; i++) { 
        if (this.toolbar.items[i].id == target.firstElementChild.id) { 
          this.toolbar.items[i].cssClass = ''; 
        } 
      } 
    } 
    if (args.item.id === 'january') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'february') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'march') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'april') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'may') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'june') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'july') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'august') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'september') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'october') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'november') { 
      args.item.cssClass = 'e-select'; 
    } else if (args.item.id === 'december') { 
      args.item.cssClass = 'e-select'; 
    } 
  } 
  
Query 2: 
  
We have validated your reported query "I would like to change background color of toolbar item." and suggest you to use the below customized style to achieve your requirement. 
  
app.component.css: 
.e-grid .e-toolbar .e-toolbar-items, 
.e-grid .e-toolbar .e-toolbar-item, 
.e-grid .e-toolbar .e-tbar-btn { 
  background-color: #f6f6f6; 
} 
  
.e-grid .e-toolbar .e-toolbar-item.e-select, 
.e-grid .e-toolbar .e-toolbar-item.e-select .e-tbar-btn { 
  background-color: red; 
} 
  
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 


Marked as answer
IG Ivan Galetic December 1, 2021 02:26 PM UTC

Hello,


thank you. this solved my problem. 

The only change I had to make was at @ViewChild.

My line of code is : 

@ViewChild('toolbar', {static:false}) toolbar: ToolbarComponent;


Thank you,


Ivan


VM Vengatesh Maniraj Syncfusion Team December 2, 2021 07:34 AM UTC

Hi Ivan,


You are most welcome.


We are happy that your problem has been resolved now.


Please get in touch with us if you need any further assistance.


Regards,

Vengatesh


Loader.
Up arrow icon