if need "Id" for "Selectable" then where is it hiding?

[Entilzha]

I am beside myself trying to do something that should be simple and is available in other grids I have worked with.  I want to know the "Id" of the item that was used to populate a row in the grid.  I have to provide that value if I want to use the "Selectable" option so where is it hiding?  I need to know that value when the user selects a row.  Here is my definition of the grid.

@(Html.Kendo().Grid((IEnumerable<MyRecordType>)Model)
    .Name("rawdatagrid")
    .Columns(columns =>
    {
        columns.Bound(session => session.Time).Width(100);
        columns.Bound(session => session.Glucose).Width(50);
        columns.Bound(session => session.TestEvent).Width(100);
    })
    .Scrollable()
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model => model.Id(p => p.Id))) // DataSource "Id" required for "Selectable"
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Single)
        .Type(GridSelectionType.Row))
    .Events(events => events.Change("onEventChange"))
)

Here is my event handler for the "Change" event from the grid.  The selectedText concatenates all of the cell values in a row which is very difficult to extract my "hidden" column value from.  The index value changes if you sort.  I've tried several of the different ways I saw from other threads on this board but they don't work for me.

function onEventChange(arg) {
    //var grid = $("#rawdatagrid").getKendoGrid(); // this is better than the next line
    var grid = $("#rawdatagrid").data("kendoGrid");

    var selectedItem = grid.select();
    var selectedText = selectedItem.text();
    var index = selectedItem.index();

    debugger;
}

What am I missing?  Where is my "Id" value?  I can't believe a product as great as Kendo UI can't do something basic like this.

[Entilzha]

I forgot to add that I tried creating a "Hidden" column with the Id value but can't figure out how to get just the value for a cell.  The line above that gets the "selectedItem.text()" returns all of the cells horribly concatenated together in an unparseable string.  If someone can tell me how to get the value of a single cell when "row" selection is specified then I would use that as a workaround.

[Nikolay Rusev]

Hello Entilza,

You can use the Grid dataItem method with argument the selected row. It will return the actual data item from the DataSource for this row and you can get reference to any field you need. Similar to the `Events` demo: Grid Events.

Regards,
Nikolay Rusev
Telerik

 

 

[Entilzha]

Nikolay,

Thank you for responding.  Unfortunately it just laughs in my face.  I had tried that before but kept getting the following error message.

"TypeError: this._data is undefined"

Here is my updated code.  It never gets past the "dataItem" call before throwing the above error.

function onEventChange(arg) {
    //var grid = $("#rawdatagrid").getKendoGrid(); // this is better than the next line
    var grid = $("#rawdatagrid").data("kendoGrid");

    var selectedItem = grid.select();
   var index = selectedItem.index();
    debugger;
    var data = grid.dataItem("tr:eq(" + index + ")");
    var recordId = data.Id;

[Nikolay Rusev]

Hello Entilza,

You must pass the selected item to the dataItem method. Here is how it should be:

var grid = $("#rawdatagrid").data("kendoGrid");

var selectedItem = grid.select();
var data = grid.dataItem(selectedItem);

var recordId = data.Id;

Regards,
Nikolay Rusev
Telerik

 

 

[Entilzha]

Sorry Nikolay, that is not any better.  I am still getting the same error message when I execute "grid.dataItem(selectedItem)".

"TypeError: this._data is undefined"

Do you have any other ideas?  Here is my code with the change you recommended:

function onEventChange(arg) {
    var grid = $("#rawdatagrid").data("kendoGrid");
    var selectedItem = grid.select();
    var data = grid.dataItem(selectedItem); // causes TypeError: this._data is undefined

[Nikolay Rusev]

Hello Entilza,

I'm very sorry. I misleading you. I've missed one important bit of your configuration - that you are using server binding for your grid. When server binding is used Grid data is not available on client and you will not be able to retrieve the dataItem, just as you say. You can verify this by calling `grid.dataSource.data()` it will return an empty array.

Server selection is handled by adding the following into your grid:
 - command column with select command. This will post back on server in order to select the row serverside:

.Columns(columns => {
 columns.Bound(p => p.ProductID).Groupable(false);

 columns.Command(cmd => cmd.Select());
})

 - configure Model.Id - it will be send to server when `Select` button is clicked in order to uniquely identify the item to be selected

.DataSource(ds => ds.Server().Model(model => model.Id(p=>p.ProductID)))

 - add RowAction which selects the item

.RowAction(row =>
 {
 var selected = (int?)ViewData["SelectedProduct"];
 if (selected.HasValue && row.DataItem.ProductID == selected.Value)
 {
  row.Selected = true;
 }
})

 - in the controller action method pass the Model.Id send from client to the view

public ActionResult ServerBinding(int? ProductID)
{
 ViewData.Add("SelectedProduct", ProductID);
 return View(new SampleEntities().Products);
}

Regards,
Nikolay Rusev
Telerik

 

 

[Entilzha]

Nikolay,

You are correct!  That resolves my problem!  But the user experience isn't that great.  I think the better fix that is implied by your response would be for me to remove the ".Server()".  Either way, you have helped me to resolve my problem.

Thank you!
Marcus