Empty array selected checkbox MVC Kendo Grid-CodePudding

I have a ASP.Net MVC Kendo Grid with checkbox selection, as the documentation I added the checkbox using columns.Select().Width(50); as:

@model Project.Lib.ViewModels.Campaigns.CampaignViewModel

  @(Html.Kendo().Grid(Model.Stations)
                                .Name("grid")
                                .DataSource(dataSource => dataSource
                                    .Custom()
                                    .PageSize(10)
                                )
                                .PersistSelection(true)
                                .Sortable()
                                .Events(ev => ev.Change("onChange"))
                                .Columns(columns =>
                                {
                                    columns.Select().Width(50);
                                    columns.Bound(x => x.StationId)
                                        .Hidden();
                                   ...
                                })
                                )

Then I use javascript onChange event as example to try to retrieve selected checkboxes as:

function onChange(arg) {
                 var grid = $("#grid").data("kendoGrid");
                    console.log("The selected product ids are: ["   grid.selectedKeyNames().join(", ")   "]");
                }

So when I debug in console, the grid.selectedKeyNames value is always empty, so when I check a box it always show log as:

The selected product ids are: []

So I have two questions here:

Why the value is always empty?

How can I bind the selected id row to be my stationId column value and finally send them to the controller post-action through the ViewModel?

Regards

CodePudding user response：

Do you have your model id defined in the DataSource? From the Telerik code example - I've put an arrow pointing to the portion I'm referring to below:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Select().Width(50);
    columns.Bound(p => p.ProductName);
    ...
})
...
.Events(ev => ev.Change("onChange"))
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.ProductID)) <-------------- do you have this?
    .Read(read => read.Action("Selection_Read", "Grid"))
)

)