We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to add click event for hypelink in each row

I use the following method to initialize the Grid.

private void InitializeGrid(GridProperties gridModel,string from,string to, string team)
        {
            
            gridModel.AllowPaging = true;
            gridModel.AllowMultipleExporting = true;
            gridModel.AllowMultipleExporting = true;
            gridModel.AllowResizing = true;
            gridModel.AllowFiltering = true;

            Column column1 = new Column() {Field= "QuestionId" };
            Column column2 = new Column() { Field= "CommentOwnerId" };
            Column column3 = new Column() {Field= "CreationDate" };
            Column column4 = new Column() {Field= "Link",Template= "#columnTemplate" };
            Column column5 = new Column() {HeaderText="Set No Need FollowUp",Template="<a rel='nofollow' href=''>No Need FollowUp</a>"};
            List<Column> columns = new List<Column>() { column1,column2, column3, column4,column5 };

            gridModel.Columns = columns;
            
            gridModel.ExportToExcelAction = string.Format("/Home/ExportToExcel?from={0}&to={1}&team={2}",from,to,team);
            PageSettings pageSettings = new PageSettings();
            pageSettings.PageSize = 100;
            gridModel.PageSettings = pageSettings;
            ToolbarSettings toolbarSettings = new ToolbarSettings();
            toolbarSettings.ToolbarItems = new List<string>() { "excelExport" };
            toolbarSettings.ShowToolbar = true;
            gridModel.ToolbarSettings = toolbarSettings;
        }

You could see there's a column5 on the grid. I want to get the current row data and do some post request when I click the link on this row.

7 Replies

HJ Hariharan J V Syncfusion Team April 23, 2019 11:40 AM UTC

Hi Timo, 
 
Thanks for contacting Syncfusion support. 
 
We suggest you to bind the click event on grid element and you can get the row data from the clicked event arguments. Please refer the below code snippets. 
 
//gridObj - grid instance 
gridObj.element.addEventListener('click',function(e){ // click event binded for grid element 
if(e.target.tagName.toLowerCase()==='a'){ // checking for hyperlink 
var rowIndex =  parseInt(e.target.closest('tr').getAttribute('aria-rowindex')); // clicked row rowIndex 
var rowData = gridObj.getCurrentViewRecords()[rowIndex]; // row data 
} 
}); 
 
 
Regards, 
Hariharan 



TI Timo April 24, 2019 05:54 AM UTC

Could you please give me a complete code sample?


HJ Hariharan J V Syncfusion Team April 25, 2019 11:22 AM UTC

Hi Timo, 

We have prepared a sample based on your concern with getting the current row data when we click the link on this row. Please refer code example and sample for more information. 
[index.cshtml] 

@Html.EJS().Grid("Grid", Model).DataBound("onDataBound").Render() 
 
<script> 
    function onDataBound(args) { 
        var proxy = this; 
        proxy.element.addEventListener('click', function (e) { 
            if (e.target.tagName.toLowerCase() === 'a') { // checking for hyperlink  
                var rowIndex = parseInt(e.target.closest('tr').getAttribute('aria-rowindex')); // clicked row rowIndex  
                var rowData = proxy.getCurrentViewRecords()[rowIndex]; // row data  
                console.log(rowData); 
            } 
        }) 
    } 
</script> 


Please get back to us, if you have further assistance. 

Regards, 
Hariharan 



TI Timo April 26, 2019 08:46 AM UTC

Hi Hariharan J V,

Your code seemed to be different from mine. I do not know how to use your code in my project. I made a simple code sample for you. Please check it.

Attachment: SyncfusionASPNETCoreWebApplication2_c3ebdc72.zip


VN Vignesh Natarajan Syncfusion Team April 29, 2019 09:57 AM UTC

Hi Timo,  
 
Thanks for the demo sample.  
 
Query: “You could see there's a column5 on the grid. I want to get the current row data and do some post request when I click the link on this row. 
 
From your sample we understand that you need to get the row data on a click from a hyperlink. We suggest you to bind the onclick event to hyper link in the server side and in the click event get the current row data using getCurrentViewData() method of ejGrid.  
 
Refer the below code example 
 
private void InitializeGrid(GridProperties gridModel, string from, string to) 
        { 
 
            gridModel.AllowPaging = true; 
            gridModel.AllowMultipleExporting = true; 
            gridModel.AllowMultipleExporting = true; 
            gridModel.AllowResizing = true; 
            gridModel.AllowFiltering = true; 
 
            Column column1 = new Column() { Field = "QuestionId" }; 
            Column column2 = new Column() { Field = "CommentOwnerId" }; 
            Column column3 = new Column() { Field = "CreationDate" }; 
            Column column4 = new Column() { Field = "Link", Template = "#columnTemplate" }; 
            Column column5 = new Column() { HeaderText = "Set No Need FollowUp", Template = "<a rel='nofollow' href='' onclick='clik(this)'>No Need FollowUp</a>" }; 
            List<Column> columns = new List<Column>() { column1, column2, column3, column4, column5 }; 
 
            gridModel.Columns = columns; 
 
            //gridModel.ExportToExcelAction = string.Format("/Home/ExportToExcel?from={0}&to={1}&team={2}", from, to, team); 
            PageSettings pageSettings = new PageSettings(); 
            pageSettings.PageSize = 100; 
            gridModel.PageSettings = pageSettings; 
        } 
 
 
///////////////////////////////////////// 
 
script> 
 
        function clik(e) { 
            var obj = $("#grid").ejGrid("instance"); // take the Grid instance using grid ID 
            var data = obj.getCurrentViewData()[$(e).closest("tr").index()]; // using tr index in getCurrentViewData get the record 
            alert(JSON.stringify(data)); 
        } 
        function renderChart() { 
…………………………………… 
        $.ajax({ 
            ………………………… 
            success: function (data) { 
                var proxy = ej.parseJSON(data.gridModel1); 
                proxy.dataSource = data.dataSource; 
                setTimeout(function () { 
                    $("#grid").ejGrid( 
                        Proxy 
                    ); 
                }, 1); 
               popupobj.hide(); 
            }, 
…………………………… 
        }); 
    } 
</script> 
 
    
Refer the below screenshot for the output 
 
 
 
Due to some reference we are unable to run the provided sample. But we have prepared a sample using code example from it. Kindly refer the below link for the modified sample  
 
 
Refer our API documentation for your reference 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 



TI Timo replied to Vignesh Natarajan April 30, 2019 09:12 AM UTC

Hi Timo,  
 
Thanks for the demo sample.  
 
Query: “You could see there's a column5 on the grid. I want to get the current row data and do some post request when I click the link on this row. 
 
From your sample we understand that you need to get the row data on a click from a hyperlink. We suggest you to bind the onclick event to hyper link in the server side and in the click event get the current row data using getCurrentViewData() method of ejGrid.  
 
Refer the below code example 
 
private void InitializeGrid(GridProperties gridModel, string from, string to) 
        { 
 
            gridModel.AllowPaging = true; 
            gridModel.AllowMultipleExporting = true; 
            gridModel.AllowMultipleExporting = true; 
            gridModel.AllowResizing = true; 
            gridModel.AllowFiltering = true; 
 
            Column column1 = new Column() { Field = "QuestionId" }; 
            Column column2 = new Column() { Field = "CommentOwnerId" }; 
            Column column3 = new Column() { Field = "CreationDate" }; 
            Column column4 = new Column() { Field = "Link", Template = "#columnTemplate" }; 
            Column column5 = new Column() { HeaderText = "Set No Need FollowUp", Template = "<a rel='nofollow' href='' onclick='clik(this)'>No Need FollowUp</a>" }; 
            List<Column> columns = new List<Column>() { column1, column2, column3, column4, column5 }; 
 
            gridModel.Columns = columns; 
 
            //gridModel.ExportToExcelAction = string.Format("/Home/ExportToExcel?from={0}&to={1}&team={2}", from, to, team); 
            PageSettings pageSettings = new PageSettings(); 
            pageSettings.PageSize = 100; 
            gridModel.PageSettings = pageSettings; 
        } 
 
 
///////////////////////////////////////// 
 
script> 
 
        function clik(e) { 
            var obj = $("#grid").ejGrid("instance"); // take the Grid instance using grid ID 
            var data = obj.getCurrentViewData()[$(e).closest("tr").index()]; // using tr index in getCurrentViewData get the record 
            alert(JSON.stringify(data)); 
        } 
        function renderChart() { 
…………………………………… 
        $.ajax({ 
            ………………………… 
            success: function (data) { 
                var proxy = ej.parseJSON(data.gridModel1); 
                proxy.dataSource = data.dataSource; 
                setTimeout(function () { 
                    $("#grid").ejGrid( 
                        Proxy 
                    ); 
                }, 1); 
               popupobj.hide(); 
            }, 
…………………………… 
        }); 
    } 
</script> 
 
    
Refer the below screenshot for the output 
 
 
 
Due to some reference we are unable to run the provided sample. But we have prepared a sample using code example from it. Kindly refer the below link for the modified sample  
 
 
Refer our API documentation for your reference 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 


Thank you. It works successfully.


VN Vignesh Natarajan Syncfusion Team April 30, 2019 12:04 PM UTC

Hi Xavier,  
 
Thanks for the update.  
 
We are glad to hear that your query has been resolved by our solution.  
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 


Loader.
Live Chat Icon For mobile
Up arrow icon