1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Call a javascript event and access the row data based on a click

Call a javascript event and access the row data based on a click

Hi,

I'm building a prove of concept (based on your examples) for a larger project, where I want a javascript event to be called based on the click of any row of the grid, and afterwards access the data of the respective row.

I attached the file so you can compile it.

@usingSyncfusion.EJ2
@{
ViewBag.Title="Index";
}
 
<!DOCTYPEhtml>
<htmllang="pt-pt">
 
<head>
@*SyncfusionEssentialJS2Styles*@
<linkrel='nofollow' href="https://cdn.syncfusion.com/ej2/ej2-grids/styles/fabric.css"rel="stylesheet"/>
 
head>
<body>
@Html.EJS().Grid("pendingModalResults").DataSource((IEnumerable<object>)ViewBag.Pending).Columns(col=>
{
col.Field("Id").HeaderText("Id").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Visible(false).Add();
col.Type("checkbox").Width("20").Add();
col.Field("Code").HeaderText("Código").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Width("60").Add();
col.Field("PendingType").HeaderText("TipodeDocumento").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Width("100").Add();
col.Field("CreatedDate").HeaderText("Data").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Width("100").Add();
col.Field("Value").HeaderText("Valor").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Width("60").Add();
col.Field("User").HeaderText("Utilizador").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Width("60").Add();
}).AllowPaging().PageSettings(page=>page.PageCount(5)).AllowSorting().SelectionSettings(
select=>select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple).PersistSelection(true).CheckboxOnly(true)).Aggregates(
agg=>
{
agg.Columns(newList(){
newSyncfusion.EJ2.Grids.GridAggregateColumn(){
Field="Value",Type="Custom",FooterTemplate="Total:${Custom}",CustomAggregate="invoiceFunction"}}).Add();
}).Render()
 
<scriptsrc="~/Content/js/jquery-3.3.1.min.js">script>
<scriptsrc="~/Content/js/jquery.easing.1.3.js">script>
<scriptsrc="~/Content/js/jsrender.min.js">script>
<scriptsrc="~/Content/js/ej2.min.js">script>
 
 
 
@(Html.EJS().ScriptManager())
 
<script>
functioninvoiceFunction(data){
varTotal=0;
data.result.forEach(function(element){
Total+=parseInt(element['Value']);
});
}
script>
body>
html>

Attachment: Syncufusion.Grid.Test_5206a817.rar

1 Reply
HJ Hariharan J V Syncfusion Team August 10, 2018 05:55 AM UTC

Hi Carlos, 
 
Thanks for contacting Syncfusion support. 
 
Query: Where I want a javascript event to be called based on the click of any row of the grid, and afterwards access the data of the respective row. 
 
We have validated your query and you can achieve your requirement by using the below method. Here, we have achieved your requirement by using click event. In this solution, we have bound a click event to the Grid and get row information based on the click. Please find the below code example for your reference. 
 
[code example] 
<div> 
   @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
       ... 
       ... 
}).AllowPaging().PageSettings(page => page.PageSize(8)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
</div> 
 
<script> 
    var grid = document.getElementById("Grid"); 
    grid.addEventListener("click", getInfo);        
 
    function getInfo(args) { 
        if (args.target.classList.contains("e-rowcell")) { 
            console.log(this.ej2_instances[0].getRowInfo(args.target));  // for getting row info based on click 
        } 
    } 
</script> 
 
We have prepared a simple sample based on your requirement. Please find the sample in below link. 
 

Please get back to us if you need further assistance on this. 

Regards, 
Hariharan 


Loader.
Up arrow icon