How to pass an ID into a grid column href

[David Demland]

I have the following code:

@using Syncfusion.EJ2.Grids

@model IEnumerable<HABRecordModel>

<ejs-grid id="grid" dataSource="@Model" allowPaging="true" allowSorting="true" actionBegin="onActionBegin">

    <e-grid-pagesettings pageSize="10"></e-grid-pagesettings>

    <e-grid-columns>

        <e-grid-column field="Name" headerText="Name" textAlign="Right" width="120"></e-grid-column>

        <e-grid-column field="Description" headerText="Description" textAlign="Right" width="150"></e-grid-column>

        <e-grid-column field="SalePrice" headerText="Price" textAlign="Right" format="C2" width="120"></e-grid-column>

        <e-grid-column field="Available" headerText="Available" textAlign="Right" width="120"></e-grid-column>

        <e-grid-column field="ID" headerText="ID" textAlign="Right" width="120" template="#template"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

<script id="template" type="text/x-template">

    <a rel='nofollow' href="javascript:void(0)" onclick="OpenWindow(this)">Picture</a>

</script>

<script>

    function onActionBegin(args) {

        if (args.requestType === "template-initialize") {

            var templateElements = document.querySelectorAll("#grid .e-templatecell");

            templateElements.forEach(function (element, index) {

                var id = args.data[index].ID;

                element.innerHTML = '<a rel='nofollow' href="javascript:void(0)" onclick="OpenWindow(this)">Picture</a>';

                element.firstChild.setAttribute('data-id', id);

            });

        }

    }

    function OpenWindow(element) {

        var id = element.getAttribute('data-id');

        $.ajax({

            type: "POST",

            url: "@Url.Action("PostImageID", "Home")",

            dataType: "json",

            data: { id: id },

            success: function (response) {

                var decodedString = atob(response);

                var windowObject = window.open('', '_blank');

                windowObject.document.write(decodedString);

            },

            error: function (xhr) {

                console.log('Error:', xhr.statusText);

            }

        });

    }

</script>

The AJAX post back to the controller always has 0 for the id. How do I get the correct ID form the item in the row?

[Santhosh Iruthayaraj]

Hi David,

Greetings from Syncfusion support.

We have checked your query and the code snippets you provided and noticed that you are currently using the actionBegin event to bind the attribute. However, we would like to clarify that the actionBegin event is triggered only when performing actions such as paging, filtering, and sorting. It does not trigger during the initial rendering of the grid. Consequently, the code inside the actionBegin event will not be executed, and the attributes will not be bound.

To address your requirement, we recommend using the dataBound event instead of the actionBegin event. The dataBound event is triggered whenever the dataSource is populated in the Grid. By utilizing this event, you can achieve the desired outcome.

dataBound API: https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_DataBound

We believe that implementing this solution will help you resolve the issue. If you have any further questions or need additional assistance, please let us know.

Regards,

Santhosh I

[David Demland]

Thank you, that worked, I now see that I am calling the function. I am still having an issue, how do I get the value of the ID field to pass to the onActionBegin function? I need this value to be passed to the OpenWindow function so that I can make the post to the web controller to get the data back from the server to display. This value must be the ID of the item in the grid.

[David Demland]

never mind, I got it figured out. The rel='nofollow' href needed to look like:

<script id="template" type="text/x-template">

    <a rel='nofollow' href="javascript:void(0)" onclick="OpenWindow(${ID})">Picture</a>

</script>

Now it works. Thank you for your help.

[Suganya Gopinath]

Hi David, 

Thanks for updating the status and the solution that you have tried. 

Regards,

Suganya Gopinath.