how do I pass a Id value from a grid row to a asp-route-id value

[Eduardo Reyes]

Hi:

I have the following piece of code in a view, as you can see, I am putting a button at the end of each line to call the edition of the record using a template. But I have not been able to make the asp-route-id paste the Id of the row. Is there a way to paste the value?

Thanks in advanced

<div class="control-section">

   <ejs-grid id="Grid" dataSource="((IEnumerable<Soporte.Models.ListadoSolicitudes>)ViewBag.DataSource)" allowFiltering="true" allowSorting="true" allowPaging="true">

      <e-grid-filtersettings type="Menu"></e-grid-filtersettings>

      <e-grid-selectionsettings persistSelection="true" checkboxOnly="true"></e-grid-selectionsettings>

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

      <e-grid-columns>

         <e-grid-column field="NoSolicitud" headerText="No. Solicitud"></e-grid-column>

         <e-grid-column field="CreadoPor" headerText="Creado por..."></e-grid-column>

         <e-grid-column field="NombreUsuario" headerText="Usuario"></e-grid-column>

         <e-grid-column field="DescripcionGeneral" headerText="Descripción"></e-grid-column>

         <e-grid-column field="FechaCreacion" headerText="Fecha de Creación" format="dd/MM/yyyy hh:mm:ss a"></e-grid-column>

         <e-grid-column field="StatusSolicitud" headerText="Status"></e-grid-column>

         <e-grid-column template="#Editar" width="70"></e-grid-column>

      </e-grid-columns>

   </ejs-grid>

</div>

<script id="Editar" type="text/template">

   <div>

      @{

         <a asp-action="Edit" asp-controller="Solicituds" asp-route-id="Id" title="Click para editar el registro ${NoSolicitud}">

            <i class="far fa-edit" style="color:green; font-size:large;"></i>

         </a>

      }

   </div>

</script>

[Manivel Sellamuthu]

Hi Eduardo, 

Greetings from Syncfusion support. 

Based on your requirement you need to use the dynamic value in the asp-route-id. To achieve your requirement we suggest you to use the dataBound event of EJ2 Grid.  

In the dataBound event we have updated the link value (selected Record’s OrderID) value  in the click event of template cell in Grid. Refer the below code example.  

 

<ejs-grid id="Grid" dataSource=" ViewBag.DataSource" dataBound="GridDataBound" allowPaging="true"> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" width="110" isPrimaryKey=true></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="CustomerID" width="110" template="#nameAnchor"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="EmployeeID" width="110"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="CustomerID" width="110"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

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

    <a asp-area="" asp-controller="Home" asp-action="About" class="btn btn-default">${CustomerID}</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]['OrderID']; 

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

            } 

        }); 

    } 

</script> 

We have prepared a sample and it can be downloadable from the below location.  

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Asp-route_id-1131039124.zip 

 

Regards, 

Manivel 

[Eduardo Reyes]

Thanks a lot

It works

[Manivel Sellamuthu]

Hi Eduardo, 

Thanks for your update. 

We are glad that provided solution helped. 

Please let us know if you need further assistance. 

Regards, 

Manivel