get value in a grid

How to get value from the ID column when selecting a row from the ASP.NET Core Grid - EJ 2. I am using the grid:
<ejs-grid id="Grid" dataSource="@Model.Customer" dataBound="dataBound" allowPaging="true" allowReordering="true" o allowSelection="true" rowSelected="rowSelected" >
    <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>
    <e-grid-pagesettings pageSize="15"></e-grid-pagesettings>
    <e-grid-selectionsettings mode="Row"></e-grid-selectionsettings>
    <e-grid-columns>
        <e-grid-column field="ID" headerText="ID" visible="false" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="Resume" headerText="Resume"></e-grid-column>
        <e-grid-column field="CompanyName" headerText="CompanyName"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

3 Replies

PS Pavithra Subramaniyam Syncfusion Team June 19, 2019 04:46 AM UTC

Hi ed, 
 
Greetings from Syncfusion. 
 
You can get the Selected row data from the rowSelected event arguments as below. Please refer to the below code example for more information. 
 
<div class="control-section"> 
        <ejs-grid id="Grid" dataSource="@ViewBag.data" allowPaging="true" allowReordering="true" allowSelection="true" rowSelected="rowSelected"> 
            <e-grid-selectionsettings type="Single"></e-grid-selectionsettings> 
            <e-grid-pagesettings pageSize="15"></e-grid-pagesettings> 
            <e-grid-selectionsettings mode="Row"></e-grid-selectionsettings> 
            <e-grid-columns> 
                <e-grid-column field="ID" headerText="ID" visible="false" textAlign="Right" width="120"></e-grid-column> 
                .   .   . 
            </e-grid-columns> 
        </ejs-grid> 
</div> 
 
<script> 
    function rowSelected(e) { 
        console.log(e.data.ID); 
    } 
    </script> 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 



ED Ed June 26, 2019 01:38 PM UTC

Good morning, thank you for the solution. 
To complete the example, how do you direct the selected item to an editing page?
In the razor I would do this: 
 <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a>


PS Pavithra Subramaniyam Syncfusion Team June 27, 2019 12:56 PM UTC

Hi Ed, 

You can pass the selected row id using asp-page click event. In the below way, you can achieve your requirement with EJ2 Grid in ASP .Net core platform. 

[index.cshtml] 

<a asp-page="./About" onclick="clickAction(this)">Edit</a> 
 
<ejs-grid id="Grid" allowPaging="true" load="onLoad" rowSelected="onRowSelected" actionFailure="onActionFailure" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" ></e-grid-editsettings> 
    <e-data-manager insertUrl="/Index?handler=Insert" removeUrl="/Index?handler=Delete" updateUrl="/Index?handler=Update" json="@Model.DataSource.ToArray()" adaptor="RemoteSaveAdaptor"></e-data-manager> 
    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 
        <e-grid-column field="CustomerName" headerText="CustomerName" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="City" headerText="City" width="150"></e-grid-column> 
 
    </e-grid-columns> 
</ejs-grid> 
 
<script> 
 
    function clickAction(args) {         
        args.rel='nofollow' href = args.rel='nofollow' href + "/" + window.id.toString(); // Combine the OrderID with directed url 
    } 
 
    function onRowSelected(args) { 
        window.id = args.data["OrderID"]; // we have set a OrderID value in global variable(id) while grid selection 
     } 
 
 

 
Regards, 
Pavithra S. 


Loader.
Up arrow icon