Add buttons to row hover

[Zachary]

When you use gmail the emails are in a table. As the user hovers over a row, the row changes color and a couple icon buttons appear on the right hand side. The buttons only appear when the mouse is hovering over the row, when the user moves out they disappear.

is it possible to add buttons on hover for the treegrid in a similar fashion>

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Greetings from Syncfusion Support.

We have achieved your requirement using load event to bind the mouseover event to the Treegrid. Please refer to the below code snippet. For your convenience, we have also prepared a sample on the same.

Code snippet:  

[app.component.html]
  
 ngOnInit(): void { 

        this.data = sampleData; 

        let btn = document.createElement("input"); 

        btn.type = "button"; 

        btn.id = "btn"; 

        btn.classList.add("e-btn"); 

        btn.value = "button"; 

        btn.style.marginLeft = "10px"; 

        btn.onclick = function(e) { 

          console.log("Button clicked"); 

        }; 

        this.button = btn; 

    } 

    load(args) { 

        this.treegrid.element.addEventListener("mouseover", function(e){ 

          if((e.target as HTMLElement).classList.contains("e-rowcell")) { 

              let ele: Element = e.target as Element; 

              let row = parentsUntil(ele, "e-row"); 

              let previousButton = document.getElementById("btn"); 

              if(!isNullOrUndefined(previousButton)) { 

                previousButton.remove(); 

              } 

              row.lastChild.appendChild(this.button); 

          } 

        }.bind(this)) 

      } 

Sample: https://stackblitz.com/edit/angular-f169000?file=app.component.ts
Documentation: https://ej2.syncfusion.com/angular/documentation/api/treegrid/#load

Please get back to us for further assistance. 

Regards,
Jagadesh Ram 

[Zachary]

Thanks Jagadesh, what does the bind(this) part of the statement do?

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Thanks for the update.

We are glad to hear that your query has been solved.

The Function.prototype.bind() method lets you establish a fixed "this" context for all subsequent calls — bypassing problems where it's unclear what "this" will be, depending on the context from which your function was called. Here in the mouseover event, to provide the "this" context we have used "this" during the load event to bind it to that mouse event so, whenever the mouseover event is triggered it will always be using the "this" context which was set earlier.

Please refer below for more information on the same,
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#specifying_this_using_bind
https://stackoverflow.com/questions/50203685/why-should-i-use-bindthis-with-a-method-in-a-class 

Regards,
Jagadesh Ram