Get row ID from kendo grid

Question

I am trying to get the 'ObjectID' from a selected row in a kendo grid, but currently it's not working.

<div class="clearfix">
        @(Html.Kendo().Grid<M20_AEK.Models.ContractSettlement>()
                    .Name("ContractSettlementGrid")
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                    .Pageable(pageable => pageable.Input(true).Numeric(false))
                    .Scrollable()
                    .Selectable()
                    .Sortable()
                    .Filterable()
                    .ColumnMenu()
                    .Groupable()
                    .Selectable()
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.ObjectID).Title("ID").Hidden();
                        columns.Bound(c => c.OPERATOR_OBJECTID).Title("Operator").Width("100px");
                        columns.Bound(c => c.Year).Title("Year").Width("100px");
                        columns.Bound(c => c.Month).Title("Month").Width("100px");
                        columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("Settlement").Width("100px");
                        columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("Technology").Width("100px");
                        columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("Upload").Width("100px");
                        columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("Download").Width("100px");
                        columns.Bound(c => c.ObjectID)
                            .Title("Edit")
                            .Filterable(false)
                            .ClientTemplate("<a onclick=\"showDetails(this,'#= ObjectID#')\" href='\\#'>Edit</a>");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.ObjectID))
                    .Read(read => read.Action("LoadSettlementContracts_Read", "SettlementContract"))
                    .Update(update => update.Action("Save", "SettlementContract"))
                    .Destroy(update => update.Action("Delete", "SettlementContract"))
                    )
        )
    </div>

function showDetails(ObjectID) {
       alert(ObjectID);
    }

I also tried something like this, as I have found some possible solutions on forums.

function showDetails() {
        var grid = $("#ContractSettlementGrid").data("kendoGrid");
        var selectedRow = grid.select();
        var index = selectedRow();
        console.log(index);
        //this does not work
    }

Any ideas on how to do this?

Answer 1

You're close to having it work!

You shouldn't need to use a client template for your button (unless there is other code you didn't share). You can change it to:

columns.Command(command => command.Custom("Edit").Click("showDetails"));

And make the showDetails function:

<script type="text/javascript">
    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        //do whatever you need with the dataItem here
        console.log(dataItem.ObjectID);
    }
</script>

Additional info here: https://demos.telerik.com/aspnet-core/grid/custom-command