а

Click on font awesome icon and trigger event


#1

I have added a font awesome icon in my custom column(ropath). Now I want to add a click event on the icon and display the row data in form of icons. I have used following code to add the icon and the event:

function eXcell_ropath(cell)
{
if (cell)
{
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}

this.getValue = function ()
{
    return this.cell.innerHTML;
};

this.setValue = function (val)
{
    if (val === '')
    {
        this.setCValue('');
        return;
    }

    var template = $("<div><i style=\"padding-right: 4px;\"></i><span></span></div>");
    template.find("i").addClass("fa fa-plus-circle");
   template.find("i").css("color", "limegreen");
    template.find("span").html(val);

    // Custom function to create a DHTMLX window and disply icons
$('.fa.fa-plus-circle').click(function(){CreateDiagram(val);});
	
    this.setCValue(template.html());
};

}

eXcell_ropath.prototype = new eXcell;

Issue: As of now if I click on the first row icon, it triggers the rest of the events too. Because all the click events are being added to the same class. I was thinking to add these to the row IDs. Is it possible to get row ids in the custom column function? Is there another way DHTMLX can suggest?

Please Help.


#2

Please Advise… Any help would be appreciated… :slight_smile:


#3

I apologize for the delay
If you need to get the id of the current rendering row you may get int right in the setValue function:

  this.setValue=function(val){
        var row_id=this.cell.parentNode.idd;     // gets the id of the related row
//...

#4

Thanks a lot… You are the best :slight_smile: