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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add click event for hypelink in each row

Thread ID:

Created:

Updated:

Platform:

Replies:

144282 Apr 19,2019 07:59 AM UTC Apr 30,2019 12:04 PM UTC ASP.NET Core 7
loading
Tags: Grid
Timo
Asked On April 19, 2019 07:59 AM UTC

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.

Hariharan J V [Syncfusion]
Replied On 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 


Timo
Replied On April 24, 2019 05:54 AM UTC

Could you please give me a complete code sample?

Hariharan J V [Syncfusion]
Replied On 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 


Timo
Replied On 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

Vignesh Natarajan [Syncfusion]
Replied On 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. 


Timo
Replied On 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.

Vignesh Natarajan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon