issue with dataBound

[Ryan Brown]

I am using the solution from this thread: https://www.syncfusion.com/forums/166043/how-do-i-pass-a-id-value-from-a-grid-row-to-a-asp-route-id-value

Initially, I neglected to add the dataBound="GridDataBound" element to the ejs-grid - which resulted in a button that executed the expected url, but did not include the parameter id. When I added the dataBound property, my grid fails to load at all. What am I missing?

Bonus question- this solution creates an action button for the ClaimId itself- ideally I would like the entire row to be clickable and execute the asp-action - is this possible?

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="GridDataBound" allowFiltering="true" gridLines="Horizontal">

   <e-grid-columns>

       <e-grid-column field="ClaimId" headerText="Id" width="25%" template="#nameAnchor"> </e-grid-column>

       <e-grid-column field="FirstName" headerText="First Name" width="25%"> </e-grid-column>

       <e-grid-column field="LastName" headerText="Last Name" width="25%"> </e-grid-column>

       <e-grid-column field="OrgName" headerText="Firm Name" width="25%"> </e-grid-column>

       <e-grid-column field="ClaimTypeName" headerText="Type" width="25%"> </e-grid-column>

   </e-grid-columns>

</ejs-grid>

<div id="nameAnchor" style="display:none;">

    <a asp-area"" asp-controllor="Claims" asp-action="Detail" class="btn btn-default">

        ${ClaimId}

    </a>

</div>

<script>

    function GridDataBound(args){

        document.getElementsByClassName("e-grid")[0].addEventListener("click", (e)) =>{

            if(event.target.classList.contains("btn-default")){

                var gridObj = document.getElementById("Grid").ej2_instances[0];

                var data = gridObj.getSelectedRecords()[0]['ClaimId'];

                event.target.setAttribute('rel='nofollow' rel='nofollow' href', '/Claims/Detail/' + data);

            }

        });

    }

</script>

[Ryan Brown]

Couple more details- I fixed a typo in the script to remove the closed parathesis after (e): 

   document.getElementsByClassName("e-grid")[0].addEventListener("click", (e) =>{

Even with that I am still getting the same issue with the grid not even loading. Here are the errors on inspect:

Uncaught SyntaxError: missing ) after argument list

VIewName:200 Uncaught ReferenceError: GridDataBound is not defined

    at ViewName:200:16

[Rajapandiyan Settu]

Hi Ryan,

Thanks for contacting Syncfusion support.

When you click the row element, the recordClick event will be triggered. In that event, you can dynamically bind the rel='nofollow' href based on the target element.

recordClick: https://ej2.syncfusion.com/documentation/api/grid/#recordclick

[index.cshtml]

<script>

    function recordClick(args) {

        if (args.target && args.target.classList.contains("btn-default")) {           

           var gridObj = document.getElementById("Grid").ej2_instances[0];

           var idVal = args.rowData["OrderID"]; // get the row data

           event.target.setAttribute('rel='nofollow' href', '/Home/About/' + idVal);

        }

    }

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_recordClick-1765151719.zip

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S

[Ryan Brown]

Thank you - unfortunately I am having the same problem. I am probably missing something basic, I am new to this. I am getting the same errors:

Uncaught SyntaxError: missing ) after argument list

TestGrid:199 Uncaught ReferenceError: recordClick is not defined

    at TestGrid:199:18

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" recordClick="recordClick" allowFiltering="true" gridLines="Horizontal">

   <e-grid-columns>

       <e-grid-column field="ClaimId" headerText="Id" width="20%" template="#nameAnchor"> </e-grid-column>

       <e-grid-column field="FirstName" headerText="First Name" width="20%"> </e-grid-column>

       <e-grid-column field="LastName" headerText="Last Name" width="20%"> </e-grid-column>

       <e-grid-column field="OrgName" headerText="Firm Name" width="20%"> </e-grid-column>

       <e-grid-column field="ClaimTypeName" headerText="Type" width="20%"> </e-grid-column>

   </e-grid-columns>

</ejs-grid>

<div id="nameAnchor" style="display:none;">

    <a asp-controller="Claims" asp-action="Detail" class="btn btn-default">

        ${ClaimId}

    </a>

</div>

<form method="post" asp-controller="Claims" asp-action="Template"><button class="btn btn-light bg-white shadow-none">Template</button></form>

<script>

    function recordClick(args) {

        if (args.target && args.target.classList.contains("btn-default")) {

           var gridObj = document.getElementById("Grid").ej2_instances[0];

           var idVal = args.rowData["ClaimId"]; // get the row data

           event.target.setAttribute('rel='nofollow' rel='nofollow' href', '/Claims/Detail/' + idVal);

        }

    }

</script>

[Ryan Brown]

Ok update- I got it working.

This now has the clickable button for the Id field. Is there any way to make the entire row clickable?

[Rajapandiyan Settu]

Hi Ryan,

Thanks for your update.

Query: Is there any way to make the entire row clickable?

Based on your requirement, you want to navigate to another page when clicking a row. You can achieve this by changing the location.rel='nofollow' href in the recordClick event.

recordClick: https://ej2.syncfusion.com/documentation/api/grid/#recordclick

[index.cshtml]

<script>

    function recordClick(args) {           

        var gridObj = document.getElementById("Grid").ej2_instances[0];

        var idVal = args.rowData["OrderID"]; //  get the row data

 

        if (args.target && args.target.classList.contains("btn-default")) {

           event.target.setAttribute('rel='nofollow' href', '/Home/About/' + idVal);

        }else{

            window.location.rel='nofollow' href = '/Home/About/' + idVal;

        }

    }
</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_recordClick_location_rel='nofollow' href_-1620886220.zip

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.