This is a migrated thread and some comments may be shown as answers.

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

7 Answers 52 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Entilzha
Top achievements
Rank 2
Entilzha asked on 17 Mar 2014, 11:37 PM
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.

7 Answers, 1 is accepted

Sort by
0
Entilzha
Top achievements
Rank 2
answered on 18 Mar 2014, 12:58 AM
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.
0
Nikolay Rusev
Telerik team
answered on 18 Mar 2014, 08:40 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Entilzha
Top achievements
Rank 2
answered on 18 Mar 2014, 12:50 PM
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;
0
Nikolay Rusev
Telerik team
answered on 18 Mar 2014, 04:39 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Entilzha
Top achievements
Rank 2
answered on 18 Mar 2014, 09:11 PM
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
0
Accepted
Nikolay Rusev
Telerik team
answered on 19 Mar 2014, 09:05 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Entilzha
Top achievements
Rank 2
answered on 19 Mar 2014, 02:37 PM
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
Tags
Grid
Asked by
Entilzha
Top achievements
Rank 2
Answers by
Entilzha
Top achievements
Rank 2
Nikolay Rusev
Telerik team
Share this question
or